Responsive Web Development as a Standard, Step-by-Step
For each and every new client, and new project, it seems that the request for compatibility among mobile devices is rising. Smartphones are at their peak in popularity, and the popularity of devices like iPads, Kindles, and other medium-sized handheld devices are nearly there too. We don't need to stress the importance of mobile-friendly websites, and how responsive design can help solve the problem anymore; that's a given.
We are now in the era of how we can include the concept of responsive design in nearly all of our projects. It seems today as though a website that works on a multitude of screen sizes is not a "luxury", but instead a necessity. So, as developers, how can we include flexible and responsive web development into all of our projects, both easily and as a standard?
In this article, we'll go over how more of us can include responsive coding as a new standard in web development in order to push forward the next era of the web.
Responsive Web Development as a Standard
It's Still a Premium Service
It is becoming more of a necessity to make all of our websites responsive, not only for a better user experience, but for better maintenance of websites in the future. However, coding a fixed-width design takes far less time, effort, and strategy than going the responsive route. While we can become more familiar with ways to standardize and speed up the process of coding responsive websites, we must always remember that creating intelligent, responsive websites is still a premium service, and should still be treated as such no matter how common-practice it becomes.
If you begin using responsive practices in your daily practice, then don't be afraid to charge accordingly. Also express with clients that it is a standard practice of yours, and exactly why. Show clients how you're solving their problem with responsive design, on their terms. Responsive design is really accommodating for several versions of a website into one implementation: mobile, tablet, desktop, and usually more. Responsive coding is also really an area of specialty, just like any other area of web development.
Basic Steps to Simple Responsive Design
A fully planned and implemented responsive website takes time – between design, development, and testing phases. There are plenty of in-depth articles on best practices, design workflows, and otherwise on the topic, but that's beyond the scope of this article. Whether a client (or you as a designer/developer) wants to get into all of that is up to you, but with or without all of that we can begin implementing responsive design at least in some small ways.
Sometimes, it's just a matter of using a few basic, and standard, steps to achieve more flexible design, without all of the extra planning.
Step 1: Include the Right Viewport
Many mobile browsers will auto-scale websites to fit the screen width. This is great for fixed-width designs, because it allows the user to see the website with the correct proportions, but also with a lot of zooming, scrolling, and frustration. Even with flexible and responsive code, many mobile web browsers scale down the website thinking it's the correct view, and then of course no responsive rules will apply regardless. The mobile browser simply treats it as the large version of the website, scaled down.
With flexible and responsive design, include the following meta tag between the tags, and the mobile browser will scale the website to the literal width.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you have the option of testing on multiple mobile devices, you may also notice another quirky thing: a pixel is not a pixel. Android, Windows Phone, Apple Mobile, and more all interpret the width of a pixel differently, so even with the above viewport in place, it may not set the correct scale of a website.
To fix this, we can use viewport's
targetdensitydpi property to force the devices dpi to match Mobile Safari's:
<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=device-dpi">
Still having trouble with scaling? You can always play around with some exact dpi settings. Mobile Safari can't interpret this code and will ignore it, so it's best to follow an Apple device as a standard, and adjust accordingly to that.
<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=160">
Step 2: Add Support
While we'd all love to through IE, old devices, and even older browsers out the window, we still need to accommodate cross-browser compatibility. I actually read on a business blog lately that clients shouldn't pay extra for responsive design. The reason? Most browsers don't support CSS3 media queries and HTML5 yet, which is used for responsive design.
Include the Google-hosted snippet below so that IE8 and under understands CSS3 media queries.
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
There are other plugins as well that help to support responsive development concepts. Most do a fairly similar job as above, but feel free to discuss in the comments what others are out there and your preference.
Responsive Plug-Ins and Apps
Below is a small collection of what I like to always include for responsive design. If you've been into responsive development for a while, you've likely heard of them. They're not required, but a good idea.
This plugin will not only visually create flexible images that adjust in width, but it also only loads a small, medium, or large version of the image automatically. For mobile devices that may be less capable or have less bandwidth to work with, this allows smaller image files to be downloaded.
Flexible media beyond images can be tricky. Sure, there are a few different CSS tricks that can help out, but since different platforms handle videos differently and because there are so many different implementations of video (embedding/iFrames, Flash, HTML5 video, etc.), a plugin that does most of the work can be very beneficial.
Carousels can be tricky to make responsive, but Elastislide does it well. There are a few more flexible/responsive carousels available, but this is by far one of the best.
This is a nifty little plugin that makes background images responsive by keeping full width and and height, without limits, and without distorting.
jQuery Mobile is a framework that uses HTML5, jQuery UI, and includes mobile-specific jQuery events that create for a better user experience across a multitude of mobile devices.
Setting up a basic structure for responsive design isn't all that difficult with a step-by-step method for starting out a project. Responsive design can take more time, but overall it's a great practice that can save time in the long run. With everything, responsive design techniques and development time can both improve with experience, and with a few tips.
1. Design/Develop from Mobile First
With all of the basic elements in place, it's easy to create responsive development from scratch, with minimal additional effort. Many developers will find the easiest way to ensure smart markup and CSS for a fully transforming layout is to start with mobile first. How must the markup be laid out in mobile first, and then expand into each wider view? What CSS can be made as a screen width expands?
Some developers will work in the opposite way by going from desktop down to mobile, which is perfectly fine — whatever works, right? There is no set rule; it is simply that many developers find it easier to go with mobile first.
Developing for mobile first may just be easier for some because it's a lot easier to accommodate for added space than it is to think of ways to rearrange in less space. Start with less, and then add more.
2. Don't Get Carried Away, Use Classic Flexible Layouts
With responsive websites being such a new concept, it's easy to get wrapped up in the newest technologies and tools to implement them. However, it's far more practical and safer for older browsers to use the methodologies of "classic" flexible layouts. At some point media queries are needed, but for the core of responsive design, use the power of simple percentage widths, displaying content based on available space via CSS "display", and em-based font spacing and sizing.
3. Progressive Enhancement
Of course, we love the field we are in because it can be fun to experiment with new technologies and tools. It's ok to use these when working with responsive design, it's just important to remember compatibility first, and then we can use the mindset of Progressive Enhancement to experiment.
Feel free to use new and interesting techniques, or feel free to evolve your own. Using more traditional methods such as regular flexible layout and intelligent cross-browser compatible markup and CSS is important for the basis of responsive design, while anything more should be extra, allowing for a slow but sure adoption of new technologies.
Need some more information on Progressive Enhancement?
Surely in the years to come responsive design is going to take on even more mainstream approval, of course among us as developers and designers, but also among clients and businesses. With that, new techniques and tools will also come about, but it's important to keep in mind the basic structure and concepts of responsive design in order to ensure a great user experience for nearly everyone as we each adopt newer gadgets, technologies, mobile devices, and more at various rates.
As web technology is now evolving at the fastest rate it ever has, we should learn to adopt responsive techniques as a standard practice, rather than simply an added benefit. As a community, we must also keep always evolving in the way we think about its practice, and how we can better responsive design beginning today.