What is responsive design? Why it is important to incorporate it in every design, and how do you apply its core principles to your web design process efficiently? The emerging practice of responsive design aims to meet the increasing demands of new devices as well as the challenges of tailoring web content for each of them. It has well surpassed being labeled as a trend and is highly regarded as the future of good user experience design. In its current state, it remains a coveted asset to those who can afford the time and resources, but it doesn't have to be that way. Still, preparing for the ebb and flow of responsive design can be costly.
Why it is important
Designers are now faced with the hefty challenge of imagining how content will lock up and reflow when forced into different sized containers than the one in front of them. They need the right tools and dialog to prevent broken layouts and preserve the best possible experience at any width. Users with no background in choreographing content are seeing the lack of it show up on their devices -- things such as overwhelming scroll bars, lighboxes in mobile showing the exact same size images, and buttons that cannot be touched with an average sized pointer finger without zooming in. It is important that your users be served the best experience possible at any screen size or resolution.
The bare necessities approach
Consider a conservative approach when deciding how your designs are going to span across devices and scale, and only do the bare necessities. The practice of responsive design is gaining rapid momentum, and the current discussions are wide and vast. There is much chatter and many different opinions on technique and how to solve challenges. As the discussion continues to grow, new techniques -- and the associated risks involved -- will continually emerge. One risk is that every device requires research, design, development, testing, and re-iteration -- easily consuming your resources. Your developer, who by the way would probably rather be working on developing richly creative interactive interfaces, might not even have access to those same devices in order to do accurate testing. You can get a lot of value by approaching your responsive design strategy from incorporating the bare necessities. In order to work smarter and not harder, there are two basic strategies to configure web content into a seamless web experience across devices in an economically viable way. With a good developer and utilizing some of these basic responsive design techniques, responsive design can not only be cost and time effective, but relatively simple to come back and make it even more responsive in the future.
Core principle 1: Fluid grids and flexible images are the new liquid layouts
Fluid grids are basically the super linguistically savvy offspring of the liquid layout. They can communicate across devices and be placed in a variety of viewport sizes. I know what you might be thinking: What the heck is a fluid grid? If you have been around since the early days of web design, you might have heard of fixed-width layout, liquid layout, elastic layout, and even hybrid layout. As these layouts increase in sophistication -- and for the sake of not calling everything hybrid -- I would like to show how fluid grid differentiates itself from the rest. Layouts are not just layouts to exceptional developers the same way electronic music is not just referred to as electronic music (especially when you are talking to passionate dub-steppers).
Utilizing minimum and maximum width percentages will create a fluid layout. This fluidity prevents horizontal scrollbars from appearing and makes full use of the screen real estate available on each user's device. Once the content can no longer wrap, due to the fixed width of images and other content (this is where the grid comes in to play), a horizontal scrollbar will finally appear. When a fluid layout is combined with a grid, it becomes less restrictive and begins to represent responsive design at its finest.
For optimum responsive designs, your fluid grid efforts should be combined with creating flexible images. Always deliver optimized and contextual images in various sizes appropriate for each device requesting them. Applications like Sencha are available to optimize images and make this process more efficient.
Core principle 2: CSS3 media queries take you from macro to micro
Using CSS3 allows you (or your developer) to work in a familiar, supportive environment for the ultimate in control over how your users are going to experience your web presence. Many modern browsers allow you to gather data about the user visiting the site including what device they are on. It uses that data to conditionally apply CSS styles and deliver an optimal user experience for each device accounted for. You would be well served doing a media query for each device. You might find that designing an extra Photoshop composition mock-up for every device as well as an additional CSS style sheet doesn't balance the weight in value versus cost of implementation. I highly recommend doing some research to prioritize the viewing devices (such as desktop and iPhone) that are most crucial to your campaign and start with those. Prioritize the rest followed by those that are just "nice to haves." This way, the bases are covered, and it leaves room to easily go in and update the rest for future iterations. Of course, if you design the non-responsive layout properly with a liquid layout, it should be relatively simple to go back and update it to be more responsive in the future.
The future of responsive design
Currently, you most likely will be starting with desktop and ending with mobile or tablet taking your approach from macro to micro. It is worth noting that in the future, responsive design will become a series of progressive enhancements. Soon we will be designing the mobile sites first, and adding stuff later for desktops and tablets. While we wait for the practice to flip the script, these steady approaches will leave you well prepared.
As browsers grow in sophistication, they will begin to adapt to standard designs. We are already seeing this on Android devices that render websites as if they were on a desktop. This means that without "scraping" or designing for mobile, designs are being inherently adopted to the device because of the sophistication of the browser. So, what is the point of being concerned with responsive design? The answer to that is more than likely your audience is not going to be viewing your website on Android devices all the time. Non-smartphones, tablets, laptops, and even smartphones have a long way to go to be seamlessly responsive and deliver a consumable let alone friendly user experience.
I recommend keeping your designs as current as possible, as the discussions around responsive design continue to develop. This will ensure a seamless transition as responsive design technology catches up with the growing number of devices being produced. Incorporating flexible layouts and media queries will at the very least leave you prepared for the future of spanning across devices and scaling with the future of responsive design. The concept behind it embraces much broader consideration. You can approach your specific needs in a multitude of ways and experiment with additional techniques but the ultimate goal remains the same: to deliver elegant visual experiences regardless of the specific device limitations.
On Twitter? Follow iMedia Connection at @iMediaTweet.