From BC$ MobileTV Wiki
(Redirected from Responsive)
Jump to: navigation, search

Design is the art and science of creating aesthetically pleasing and functionally sensible arrangements and/or constructs of a piece of the world.



No Spec

An initiative to educate the public about speculative (spec) work. With legitimate design opportunities turning into calls for spec work increasing, the No!Spec aims to arm designers (and all creative skilled workers) with the tools they need to take a stand against this trend. Spec (specification write-up, speculative prototyping, examples, etc) work is any initial design or even implementation work that a client attempts to obtain for free.



Responsive Design (also called Responsive Web Design, or RWD[1], when referring to designing and styling/laying out web applications) is a way of making a single application (web application for RWD) that works effectively on both desktop operating systems (browsers for RWD) as well as the myriad of mobile device operating systems (mobile browsers for RWD) on the market. Responsive architecture gives the best quality browsing experience - whether on a smartphone, tablet, netbook or e-reader, and regardless of the operating system. People who browse while on-the-go have very different needs than those sitting at a desk. Responsive web sites re-organize themselves automatically according to the device viewing them, so that the same website provides a great experience everywhere. Desktops get a full-blown interface with videos, large images and animations. Smartphones get a simplified website that runs fast without the bells and whistles. Tablets and netbooks get something in between.[2][3][4]

[6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25]


Physical Design precedes Web Design and Application Design, back to the Iron Age of starting to make progressively better and easier to use tools, better designs (early architectures) of houses and man-made constructions, etc. Nowadays we are seeing an integration between Physical and Digital Design practices, methodologies and in some cases principles.


Systems Analysis & Design.

Systems Thinking

[26] [27] [28] [29] [30] [31] [32] [33] [34] Tools for Systems Thinkers: The 6 Fundamental Concepts of Systems Thinking: [35] [36]< ref>Pinterest - Systems Thinking:</ref> [37] [38] [39] [40] [41] [42] [43] [44] [45]


[46] [47] [48] [49] [50]


Designing Virtual Worlds is typically done in a way to emulate Physical Designs in the real-world, however they could represent designs that are "out-of-this-world" or entirely fictional in nature.

Virtual Worlds

Art Design

High Brow

Web Design

Web Design, as well as the wider world of UI design for desktop and embedded applications, is a very particular subset of Design which requires specific tools and knowledge.

[57] [58] [59] [60]

Mobile Web Design

Specialized area of Web Design focused on Mobile device usability.

See: Mobile Web Design [61]

Material Design



Designing for Mobile devices, mobile usage patterns and mobile user experiences/preferences first, then (disproportionately) thinking about how the application will function, look & feel on a larger more stationary device (such laptops, computers, small devices hooked up to larger screens, TVs, etc).


Progressive Enhancement

Starting with a base set of features that work regardless of what combination of versions of Browser/Device/OS


Graceful Degradation

[65] [66] [67] [68] [69]


Designing digital components, effects, or experiences as intentional attempts at recreations or approximations of real-world objects.



Book Cover Design









[74][75][76][77] [78] [79]


Workflow is the set of processes and data relationships required to fulfill a specific task. Designing a workflow is an important step to successful software development.[80]



A Sequence is the order in which specific actions or system-level workflows should be carried out.


[82] [83] [84]


Database design involves the architecture of an application's data objects and entities. It must address critical questions such as what objects or data types will we be working with, who will use the system, how will they use it, what types of information will they be most likely to look for, when and how often will they look for each type, will there be any particular combinations of data commonly requested, among other critical design questions.


See: UML (the leading code design/modeling language)

Code Design/Re-use



External Links


  1. wikipedia: Responsive web design
  2. Responsive Web Design - What is it and why should I care?:
  3. How to decide between a responsive website or a native mobile app:
  4. The Pros and Cons of Responsive Web Design vs. Mobile Website vs. Native App:
  5. A Complete Guide to the <Picture> Element:
  6. Creating Intrinsic Ratios for Video:
  7. Responsive videos:
  8. CSS Elastic Videos:
  9. Fluid Width Video: | DEMO
  10. HTML5 Video scale modes?:
  11. Responsive HTML5 video:
  12. Shrink a YouTube video to responsive width:
  13. Responsive Youtube Embed:
  14. Video Scaling (WxH) tool:
  15. Use screen measurements to design for responsive breakpoints:
  16. window.innerWidth in Chrome's device mode:
  17. How to detect screen size for responsive web design?:
  18. Using Media Queries For Responsive Design In 2018:
  19. Best Practices with CSS Grid Layout (in Responsive Web Design context):
  20. CSS Grid Layout and Accessibility:
  21. CSS Grid – Table layout is back. Be there and be square:
  22. Learn CSS Grid by building a simple Calculator Layout:
  23. How to build a responsive feature list with CSS Flexbox:
  24. How to build a Mobile App Layout with CSS Flexbox: http:?/
  25. A Complete Guide to Grid:
  26. How to recognise a Systems Thinker in your team:
  27. The Pattern Problem:
  28. The Pattern Problem (PRESENTATION):
  29. Google Firestarters 25 - Patterns of Behaviour:
  30. Marshaling the Power of Systems Thinking for Sustainable Change:
  31. Changing the way we investigate healthcare incidents:
  32. Applying Systems Thinking for Nutrition:
  33. Overcoming Organizational System Blindness with System Thinking for Greater Productivity:
  34. The 3 Main Systems at Play in the World are...:
  35. Systems Thinking: What, Why, When, Where, and How?:
  36. Tools for Systems Thinkers: Getting into Systems Dynamics… and Bathtubs:
  37. Observe Orient Decide Act (OODA) -- Agile Business is More About Manoeuvrability Than Speed:
  38. Platform Economics: (podcast episode)
  39. What I learned from 100’s of hours studying platform businesses (Platform Building Basics) — Part 1:
  40. What I learned from 100’s of hours studying platform businesses (Platform Growth Tactics)— Part 2:
  41. What is a Bottleneck and How to Deal With It?:
  42. How to locate the bottleneck in your system (Gaming Computer):
  43. Systems Thinking and the Theory of Constraints:
  44. Seed Systems -- "Systems Thinking in Agriculture" course:
  45. What Airbnb, Uber, and Alibaba Have in Common:
  46. wikipedia: The Open Group Architecture Framework
  47. wikipedia: TAFIM (Technical Architecture Framework for Information Management)
  48. TOGAF library:
  49. What is TOGAF?:
  50. What is TOGAF? An enterprise architecture methodology for business:
  51. Ikko Tanaka's works recreated in pure HTML/CSS:
  52. 9 GIFs That Explain the difference between Adaptive Design & Responsive Design Brilliantly:
  53. What is the difference between responsive vs. adaptive web design?
  54. Responsive vs. Adaptive Design: Which Is Best for Publishers?:
  55. Adaptive Vs. Responsive Design:
  56. Responsive vs. Adaptive Design: What’s the Best Choice for Designers?:
  57. Web design is now completely boring:
  58. U.S. Federal Government -- Web Design System spec:
  59. 3 practical cheat sheets for designing attention grabbing UIs:
  60. Why Everyone Always Hates Redesigns, Even When They’re Good:
  61. USA Today Network Finds Success With Mobile Redesign:
  62. Meet Material-UI — your new favorite user interface library:
  63. Hacking user perception to make your websites and apps feel faster:
  64. Designing with Progressive Enhancement -- Building the Web that Works for Everyone (BOOK):
  65. W3C - Graceful degradation versus progressive enhancement:
  66. Progressive Enhancement and Graceful Degradation - an Overview:
  67. What is the difference between Progressive Enhancement and Graceful Degradation?:
  68. Progressive Enhancement vs Graceful Degradation:
  69. Graceful Degradation as a Feature:
  70. Top 10 Free Online Mind Mapping Tools:
  71. Cause and Effect Analysis -- Identifying the Likely Causes of Problems:
  72. The Cause and Effect (a.k.a. Fishbone) Diagram:
  73. wikipedia: Axure RP
  74. Wireframing Marathon Starts!:
  75. 10 Free Wireframing Tools for Designers:
  76. Web Design - Top 5 Wireframing Tools:
  77. Top 20 Wireframe Tools:
  78. Wireframes -- past, present & future:
  79. How to Create Mockups, Wireframes and Interactive App Prototypes With Apple Keynote In 30 Minutes Or Less:
  80. If you can't talk to your colleagues, this is the design language for you:
  81. wikipedia: Workflow
  82. What is Precedence Diagramming Method in Project Management?:
  83. The 4 Types of Relationships in Precedence Diagramming Method:
  84. Time Management & Precedence Diagramming:
  85. How the Boston Globe Pulled Off HTML5 Responsive Design:
  86. What is the opposite of skeuomorphism?:
  87. A Look at Flat Design and Why It's Significant:
  88. PROOF from archived jQuery site that inspiration for the logo/branding came from Devo:

See Also

UI/UX | HCI | GUI | UML | ERD (DB Design) | CSS/JS (Web Design) | Programming (Design patterns) | Rules (Business Process Modeling/Design) | Testing (Test Design) | Marketing (Design Research)