What Is Responsive Design?
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.
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 taking 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.).
Responsive Design began as early as 2011, and has become a standard feature for most web designers today.
Primary Approaches
Many Levels Involved In Responsive Design
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 (most common), 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 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.
Note that these methodologies are not necessarily in a hierarchical order of importance or design structure (and since the time of this writing there may be more methodologies)…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. 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 likely 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.
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.
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.
To assist with browser testing across many different platforms we use BrowserStack; it allows us to render any website under whichever combination of platforms we select to target. With BrowserStack we can cut our development time way down, and even know which platforms are the most common to help us limit our testing time. We now have a list of about 12 platforms that we test against regularly within BrowserStack in a short amount of time, whereas in the past we would only test against 2 or 3 due to time constraints.
Usability and User Expectations
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 (or no sidebar at all). So in a case like this we would recommend either no sidebar or possibly moving any critical sidebar content towards the bottom of the page or somewhere else within the page so that it fits within the page structure rather than just moving the sidebar as a whole.
Maybe this (sidebar to the bottom) 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
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:
- 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?
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.
P.S. — As time has passed since this initial writing we have developed a more refined process of how to set customer expectations and describing what we deliver within our standard website design services.
Other Good Articles
- Responsive Web Design
- Responsive Nav Patterns
- 5 Reasons Why Responsive Design Is Not Worth It
- 5 Reasons Responsive Web Design May Not Answer B2B Seo Strategy
Please suggest more good articles in the comments section on this page or using our Contact form.
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…
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 with a clearly defined Statement-of-Work (SOW) 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.
And From the client side, we recommend clients paying for a new website or a redesign to their current website to include Responsive Design as a requirement for their new website, but to ensure that they get clarity as to the level of effort their web designer will make their site responsive.
Did you know that Responsive Websites and Responsive Website Design (RWD) were initially known by several different names until the name Responsive Website Design finally stuck and won out? When this technology and process were first being developed and defined it could also be known as Adaptive Design, Adaptive Websites, or Progressive Enhancement. Now having a Responsive Websites is a standard and well known item.
Trackbacks/Pingbacks