The days of designing a website for a single desktop screen are over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Responsive web design (RWD), the buzz word, is an approach that allows design and code to respond to the size of a device’s screen. This basically means that it gives you the optimal viewing experience whether you’re looking at an iphone, your iPad mini or a 40-inch desktop.
The best responsive websites use fluid grids, flexible images and CSS styling to alter the site’s design and render it according to the width of the browser. For designers the ultimate goal should be to seamlessly tailor website design across different devices and platforms.
A major key to responsive web design is knowing your audience and what device they’re using to view your website. How much of your current traffic is desktop vs. tablet vs. mobile? Today there are around 2.6 billion smartphone users and by 2020 that’s tipped to reach over 6 billion. Mobile design has never been more important.
It’s critical to design your website for varying devices, but it get’s more complicated when designing across varying web browsers. Each major web browser has it’s own mobile version and renders sites differently. Where it gets even trickier is that there are many versions of browsers that need to be catered for—you can’t expect everybody to be on the latest version. So it’s important that the design works and responds to a variety of browser versions.
So basically there is no “standard website size.” There are hundreds of devices out there, and model sizes and screen resolutions change all the time. And each individual website attracts users on different devices. With endless combinations of browser sizes and devices, how on earth do you design responsively without losing your mind?
Design at least 3 versions for different browser widths. We use under 600px, 600px-900px, 900px+. Between those widths, your content can scale freely or you can keep 3 fixed layouts. Having 3 (or more) fixed layouts and adding margins when necessary is usually easier to design and implement than fluid scaling. However, fluid scaling may provide better experience on a larger number of devices.
- Small: under 600px. This is how content will look on most phones.
- Medium: 600px – 900px. This is how content will look on most tablets, some large phones, and small netbook-type computers.
- Large: over 900px. This is how content will look on most personal computers.
Responsive design needs to be more than converting a desktop site into a mobile screen. We need to consider the user’s experience, their interaction and the essential content they’re actually looking for while using a mobile device. Don’t design for the latest mobile device with a specific screen dimension. Instead, design your site around your content. How will the layout and elements work on desktop and how will those same elements adapt to each other on a mobile device?
The hierarchy of the layout is super important, especially on mobile. Often less is more! One of my recent clients knew that their main web demographic was mobile so we made sure that information was scaled back to one page on mobile devices and graphics were paired down to the minimum.
Flexible images are really important to designing a responsive website. You need to think about how an image will scale. How will it look on a large desktop screen vs. a tablet vs. a small mobile screen? From a development perspective, the code will allow images to scale via a percentage value to the width of the browser window.
Navigation is important on mobile. There are several common methods for collating large menus and content. It could be in the familiar hamburger style menu, a simple dropdown selection, expand/collapse fields or you could use tabs that scroll horizontally like YouTube.
Gestures open up new possibilities for design. People love reading with their hands and interacting with the content—it empowers the user. On mobiles and tablets, users can pinch to zoom or slide images across the screen. Interaction greatly affects the design. For instance, if you have an image gallery try avoid using a standard carousel (small dots) to let people cycle through each image. Think about the size of a person’s finger and how that translates into a useful UI solution. According to Apple: the comfortable minimum size of tappable UI elements is 44 x 44 px. This limit is often broken and the real estimate limit is around 25 px.Complex desktop designs need to be able to adapt to simple intuitive UI for a small mobile screen. Always keep this in mind when designing for different devices. The design has to be flexible so it creates a great experience across all devices for users.
Responsive design is a universal challenge for everyone in the web industry and the best answer is to simply test your site on as many devices, new and old, as possible.