What is Responsive Design / Adaptive Websites?

What Is Responsive Design?

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.

Responsive Design is particularly targeted at making browsing websites on tablets and mobile devices more user friendly, and can be a good alternative to creating duplicate sites for mobile browsing.

At it’s base level Responsive Design means that when you drag your browser window to a smaller size, the elements on the page flow better into the new browser window size…

That is a big part of Responsive Design…but the full extent of a truly Responsive Web Design can go beyond that by not just take into consideration how to make your website look better on a smaller screen (by scaling everything down and/or moving things around to flow into the browser window size), but can also take into account the features, capability, or media that a mobile or tablet web browser can support (i.e. Flash or no Flash, drop-down menus, touch, javascript, image resolution, video resolution, connection speed, etc.).

Many Levels Invovled

Many Levels Involved In Responsive Design

So we believe there are many levels of Responsive Design to be considered, which are addressed in the following sections of this article.

Typically either approach of:

A) Designing a website utilizing Responsive Design, or

B) Designing duplicate sites for different browser experiences

…can both be time consuming and expensive and may or may not be warranted based on user trends to a particular website, budgets, and how much the website owner is willing to invest in their website to make it as future-proof as possible keeping in mind that technologies available today will be different next year and the years to come.

Responsive Design Methodologies

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.

Note that these methodologies are not necessarily in a hierarchical order of importance or design structure…there are blending lines between these definitions; i.e. one could argue that Programmatic and Media Query versions are the same. These definitions are by no means official, but are just our unofficial way of breaking out some of the levels and approaches involved with Responsive Design. These are not official definitions or perspectives on the subject, nor are we the experts on the subject (yet!). We welcome your comments.

Web Browsing Environments

Vast Amount of Web Browsing Environments

Due to the many types of devices, screen resolutions, screen sizes, operating systems, browsers, browser versions, browser capabilities, connection speeds, web standards, and web content…it is very challenging and practically impossible to accommodate all of the possible variants…and it is a bit of a moving target. Web browsers like Firefox are now releasing new versions every 6-13 weeks, compounding the multiples of the ever-changing browsing environment and supported capabilities.

This is truly the hardest issue that a Web Developer/Designer will ever face.

For this reason it is important for website owners to have proper expectations and consider carefully about any possible ROI before investing in some level of Responsive Design to try to address and target some of the most popular browsing environments.

Web analytics should be analyzed for user trends to see which platforms are worth developing for before investing in a user experience for a particular browsing environment.

The fact that the world’s worst web browser Internet Explorer (IE) (any version) is dominant in many areas of the market (due to Microsoft shipping their browser with the Windows operating system on PCs for so many years) makes the job of building websites 20 times harder. What works on most standards compliant browsers most of the time will not work on IE.

Usability and User Expectations

One of the most important aspects of Responsive Design is trying to keep website usability also in line with user expectations. If you move the sidebar to the bottom of the screen to accommodate a smaller browsing window (improving website usability), you might be tinkering a bit too much with what website user expectations are…maybe it’s a good solution and maybe it isn’t…everyone pretty much expects the menu towards the top and the sidebar(s) to the side, not the bottom.

Maybe this is a reasonable trade-off, but something to consider if it throws off user experience. So be careful and weigh the pros and cons when creating a responsive website so that it still conforms as much as possible to user expectations, which after all, is really a big part of what usability is all about.

Client Expectations

If you are a Website Designer / Web Developer, what really counts here is…what are your clients expectations? And what are you committing to…

Are they expecting:

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?

The demand for Responsive Design is increasing like a ground swell, even though most website owners don’t understand this emerging topic very well at all.

I wonder if the situation can be related to how the prescription drug companies with deep pockets spend millions of dollars on advertising that tries to prompt consumers to ‘ask your doctor about our pill’. They are trying to generate consumer demand with a flood of advertising, and at some point after enough patients ask about the drug the doctors give in (or are incentivized by the drug companies) and start handing out the drug with the hopes it might help or might be the right solution.

So it may be with Responsive Design…the marketplace is beginning to demand Responsive Design even though there is no real consensus or understanding at this early stage of all that is involved, what is the best approach, how much it should cost, or what result to expect.

And as a web developer how do I bid against such uncertainty?

Having a good discussion with your client upfront and understanding the Scope-of-Work involved in the project, and then setting and meeting client expectations is key. Especially in this new arena where not everyone understands or agrees on the amount of extra work, or the approach, or the result.

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...

What is Responsive Design / Adaptive Websites?