What is Responsive Design?
Our non-official definition of Responsive Design in our own words:
Responsive Design is an advanced web design technique targeted towards user experience across various combinations of devices, operating systems, screen sizes, web browsers, and orientations that arranges and sizes elements in order to present the resulting view in a user friendly way.
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 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).
- Programmatic Responsive Design:
- What we call Programmatic 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 and web page builders are now supporting disabling or adjusting specific elements or widget areas as a form of conditional logic to not display specific elements on 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 few 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 few 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 (e.g. tablets, laptops).
- An example of progressive enhancement would be to NOT include featured images (a.k.a. hero images) on a mobile version of your website since they can be very large (or perhaps to use 150px wide image), to include a 500px wide featured image on tablets, and to include a 1150px wide featured image 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
It is typical to target the top few most commonly used environments with Responsive Design based on analytics and research rather than try to accommodate every possible combination of user browsing experiences.
Usability and User Expectations
- Elements to stack?
- 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 and environments or top 12?
- Which mobile/portable devices?
- What about tablet browsers?
Summary Thoughts About Responsive Design
Responsive 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…