The key to understanding responsive web design or RWD is imagining the screen as canvas that stretches and changes shape with each viewer rather than something that is static and bound by finite measurements or resolutions. Unlike printed marketing materials, such as a brochure or report where graphic designers are limited to working with a predefined space, web designers must think about and plan for many shapes and sizes when creating a responsive web design. In order to accommodate the never ending list of screen sizes our web visitors view our websites on today, we must make the website respond in real time to the viewport of the device being used as the display.
There are many theories, arguments and suggestions for web designers regarding the best way to plan for and design a responsive website and I’m not here to say which are right and which are wrong by any means. However, I will offer the six key factors I consider when creating a responsive web design.
- Information Architecture
- Mobile-first Strategy
- Design for Fingers
- Optimize for Mobile Bandwidth
- Fluid Grid Framework
- Flexible Media
1. Information Architecture
Information architecture is a key ingredient in a successful web design of any sort, but it is especially critical in a website that must degrade gracefully for mobile devices. Imagine building a house without any plans or understanding how many floors are required or how many rooms are needed and how they all fit together. Web design is similar in that before we start thinking creatively, we must consider and plan for content. On the desktop version of the website we have much more space to show larger pieces of content, promotional elements and supporting graphics to our audience. When the same page is pared down for a mobile screen we simply do not have adequate space to display as much information.
This is where information architecture comes in. By deciding early on what information is most important we can ensure the messaging on the web page is being communicated to the audience efficiently 100% of the time no matter how they choose to view the site. For mobile, we reduce the content and graphics to the simplest and most important elements to ensure the user is absorbing our message quickly and is not overwhelmed or frustrated with page speed.
2. Mobile-first Strategy
There is a lot of buzz around having a mobile-first approach to web design. In short, it’s the mindset of thinking of the smaller screens first; the realization that we should design not just for smaller viewports, but with the understanding that web visitors are viewing a website on various devices. Your audience may be on the bus, walking their dog, or doing the laundry. The world is full of forces competing for our attention and cutting through the clutter and distraction can be extremely difficult.
At this point in the game for many website owners, viewers are now more likely to view their website on a tablet or mobile device, making it ever more critical to streamline and focus the web content and experience. A nice little trick that I like to employ is to break content up neatly under short descriptive headings as viewers in these situations are not likely to read everything on the page, instead they quickly scan the page looking for specific information. Breaking content and design elements up neatly in this way helps users find what they’re looking for quickly.
3. Design for Fingers
Designing an experience that is accessible and comfortable for users is critical and even more so on a mobile device where users are without their trusty mouse. We do not want to frustrate users with buttons or navigational elements that are too small to press or do not work the first time they tap them with their finger. As a general rule, I avoid creating graphical navigational elements any smaller than 40 pixels by 40 pixels. This seems like a comfortable size for most users to tap easily with their finger.
When creating tablet or mobile designs be careful not to overlook the fact that there are no hover states available to indicate links to users. We can shoot for the moon with dazzling hover effects in a desktop environment, however when we trim down that same website for a mobile device, links should still be clear and obvious without depending on some sort of fancy hover effect.
4. Optimize for Mobile Bandwidth
You might have the most beautiful website ever imagined, but if it does not load quickly enough users will become frustrated and most often leave before you’ve had a chance to communicate with them. When designing and developing a responsive website we must consider users accessing the website on a cellular data network.
There are several factors to consider when optimizing for mobile users:
- Consolidate as much code as possible using media queries to lighten the load on a mobile device. It’s much quicker to load code in pieces rather than trying to load everything at once.
- Compress your images and choose the correct file format. Photographs are best saved as JPG images while illustrations and vector artwork are typically best suited for the PNG format.
- Delay image loading instead of having the images load all at the same time. You may also want to consider using “lazy load” or a CDN service to host and load your images more efficiently
- Specify smaller image files using media queries for smaller screen sizes.
5. Fluid Grid Framework
Websites are made up of boxes containing content and/or imagery and we use CSS to assemble, position and style these boxes into a polished design that users experience in a web browser. A fluid grid framework allows us to smoothly and proportionately transition or reposition these boxes into multiple formats to suit just about any viewing environment.
If preferred, you may also consider using open source frameworks that you can quickly download, modify and reskin to fit nearly any need.
6. Flexible Media
Once you’ve created your fluid grid to enable a responsive layout for your users you are ready to look at creating flexible images that resize automatically respective to the viewport. For example, we may want an image to fill the width of its container, historically we would set the image width to 100%. However, images can become pixelated or blurry when they are stretched beyond their actual size. Using the max-width property ensures that an image will only resize to 100% of its actual dimensions and not stretch beyond that point.
You may have noticed instances where your mobile device displays pixelated graphics. This is due to the fact that many mobile devices have a higher ppi (pixel per inch) resolution than desktop monitors. For example, Apple devices like the iPhone and iPad, even newer MacBook Pro’s feature a Retina display that is twice the resolution of a typical desktop monitor.
In a responsive website design we need to consider resolution as a critical factor in user experience. To maintain a clean, crisp look across all devices we can use SVG (scalable vector graphic) files or include Retina images that are twice the size of regular images in the image directory that will load automatically when the website is viewed on a Retina compatible device.
Think Responsively and Keep Experimenting
As with any design process, there are many ways of approaching a project and ultimately ending up in the same place. I’d love to hear what successful strategies you’ve created or come across to deliver a successful responsive web design.
If you’re interested in examples of our approach to responsive website design we invite you to read up on some of our case studies.
Cookie Policy