What is Responsive Design?
(a.k.a. Responsive Website Design (RWD), Adaptive Design or Adaptive Websites or Progressive Enhancement)
Our definition of Responsive Design:
Responsive Design is a relatively new (~2011) and advanced set of web design techniques that attempts to accommodate various screen sizes, web browsers, and devices used for web browsing by making browsing your website more user friendly.
Many Levels Involved In Responsive Design
We classify several approaches and methodologies to Responsive Design:
- Basic CSS Responsive Design:
- What we call Basic Responsive Design (or CSS-based Basic Responsive Design) usually includes CSS targeted at adjusting and simplifying the layout for the browsing device (usually stripping out stuff or simplifying the design).
- Basic Responsive Design may also involve using a ‘Responsive Theme‘ or ‘fluid‘ theme or grid that is based on percentages rather than fixed pixel widths allowing things to scale a bit for different browser sizes. (Our experience with so-called ‘Responsive Themes’ or ‘fluid grids’ has thus far been hit and miss. So each project requires some up-front homework as to the best theme and approach.)
- Caveat: Some things like images and video may or may not scale so well without additional effort depending on site architecture. In addition trying to manipulate page content by using CSS alone without using Progammatic Responsive Design or other methods may not realize any page load improvements for devices with slower connections, and will also suffer from the site looking broken or misaligned at some level of scaling down (see Media Query Responsive Design).
- Progammatic Responsive Design:
- What we call Progammatic Responsive Design will not only adjust page layout visually, but will also use various methods of CSS and typically other conditional programming to adjust page content based on the device doing the browsing (i.e. perhaps different menus, perhaps moving the sidebar to the bottom of the page or no sidebar altogether).
- Programmatic Responsive Design may incorporate website extensions (WordPress plugins or perhaps ‘responsive themes‘ or theme frameworks in our case) that handle detecting some of the mobile device browsers and displaying a mobile version of the website to site visitors (what is displayed is often controlled using customizable templates designed for mobile browsing).
- Some newer WordPress themes and theme frameworks are now supporting disabling specific widget areas as a form of conditional logic to not display widgets for certain platforms such as mobile devices.
- Caveat: Not all themes support conditional logic without extensive custom programming. It is time consuming and very difficult to create programmatic settings for all of the many possible environments, so it is typical to target the top 2 or 3 environments.
- Media Query Responsive Design:
- Some versions of Responsive Design (what we call Media Query Responsive Design) attempt to make the layout responsive for portable devices typically by setting ‘breakpoints‘ or ‘viewports‘ based on screen resolutions, screen sizes, or specific devices using CSS Media Queries.
- ‘Media Queries‘ can also be used to display images sized and optimized specifically for the browsing device (in this case at least 2 sizes of images are required, one for the regular full website and one smaller image for mobile website browsing).
- Caveat: Again, it is difficult to create settings or ‘breakpoints‘ for all of the many possible environments, so it is typical to target the top 2 or 3 environments and set breakpoints and layouts based on your content.
- Progressive Enhancement:
- Progressive Enhancement involves displaying a simplified website in a basic form for mobile devices, and adding more enhanced features ‘progressively’ as you move up to targeting more capable devices.
- An example of progressive enhancement would be to NOT include featured images on a mobile version of your website, to include a 50px wide featured image on tablets, and to include a 150px wide featured image along with an Author link for desktop browsers (full website).
- Caveat: In using the Progressive Enhancement approach it is best to START building your website with this approach in mind (even go so far as to build mobile first). It would be very difficult to retrofit a website with this methodology, but more likely you would need to build your website from scratch with this approach, typically starting with building a mobile website and going from there. Another caveat is that ‘capabilities’ and environments are constantly changing, so what you build as a next step in the progression today may not fit in 6 months or a year or two.
Responsive Design may use any combination of the above mentioned methodologies.
Vast Amount of Web Browsing Environments
Usability and User Expectations
- Type to scale?
- Boxes to shrink?
- What about widgets?
- Media to resize?
- Different optimized media to load?
- Different or more simplified menu?
- Different or more simplified header?
- Web forms to scale?
- Site to load faster?
- Comments to work?
- Good viewing on top 3 browsers or top 10?
- Which mobile/portable devices?
- What about tablet browsers?
Summary Thoughts About Responsive Design
Responsive Design / Adaptive Design is a fairly ambiguous area today within web development, and a bit of a rabbit hole regarding how far down the hole do you go.
There are many levels of Responsive Design, and there are many factors involved as to what devices you target and how you target them.
As mentioned above…
What are your thoughts about Responsive Design? Please leave your comments below...