Responsive Web Design

Gone are the days of creating a website just for computers is good. New technologies and the development of mobile sites are forcing graphic designers to rethink the way their designs appear on different screen formats. Think about it for a moment: how much time do you spend surfing the web on your phone versus on your computer? Welcome to the world of responsive web design.

What is Responsive Website Design?

Put simply, responsive designs are designed in such a way that the look and code of a website changes based on the user's screen size. This means that the experience we have of a given website is always optimal, whatever device we use, whether it is an Android device, an iPad, or a Home Cinema screen.

Compare with our site and see how it is presented in its static version and in its adaptive version:

The best responsive sites are basically designed with smooth grids, flexible images, and CSS to alter the design of the site and adapt it to the width of the browser being used. The ultimate goal of graphic designers should all be to design identical UI and UX experiences regardless of the device and platforms used.

Why is responsive website design so important?

If several versions of the same website had to be designed and developed, for each of the possible uses depending on the device, the process would not only be very long and impractical, but also very expensive! It would also be very difficult to evolve versions as new technologies appear. Responsive design is an excellent solution to ensure that you have a site that can evolve with the times.

Knowing your audience and the devices they use is key to building a good quality responsive website. Does your traffic mainly come from computer, tablet, or smartphone use? In the United States, about 56% of traffic is on mobile phones. There are around 2.6 billion smartphone users worldwide, and that number is expected to triple by 2020 to reach 6 billion. Knowing how to design a website for mobile use has never been more important.

It is absolutely essential to create your website so that it can be used on different devices, but it becomes even more complicated when you also take into account all the browsers that exist. Each browser has its own way of adapting to mobile use, and therefore its own way of presenting websites. Worse yet, not everyone updates their browser ... So it is essential that your design works and adapts to all these different versions.

Are you in a panic at the idea of ​​designing a website? Don't worry, everyone is in the same situation and the battle is constant. The best thing to do is simply test your website on as many devices as possible, old and new (and hire a web development god!).

What dimensions should I design my website for?

There is no “standard” website format. There are hundreds of devices: the models, quality and format of screens are constantly changing. And each website attracts visitors on different devices. For example, you are more likely to watch a cooking recipe on your mobile phone than on your computer, but it would be quite the opposite if it were a tutorial for Photoshop.

It is possible to determine which browsers and page formats are the most popular for your website by looking at Google Analytics data. But with all these combinations of browsers, formats, and versions, how do you go about creating responsive design without losing your sanity?

Try to design at least 3 versions

A responsive website design should have at least 3 different versions depending on the width of the browsers. The specific numbers we're naming here are the ones we currently use at 99designs, but you could very well do it differently!

·         Small: less than 600px, size for most smartphones

·         Medium: 600px - 900px, size for most tablets, big phones, and small computers

·         Large: more than 900px, format for most computers

Each of these formats should be able to contain the same text and graphics, but each should be designed to present all that content optimally, regardless of the type of device used. Minimizing the page to fit in a smaller screen size will make the text unreadable, but you may be able to shrink the text proportionally and go to a single column,

Some points to take into account

·         User experience is key: Responsive design should do more than fit a site to a screen size. It should also take into account user experience, how they interact with the site, and what content they actually watch.

·         Don't create a design for the latest smartphone model only, build your site based on your content. How can the layout and the different elements be arranged to suit each screen format?

·         Commitment: the layout hierarchy is very important, especially for the mobile versions: it is always better to keep it simple and stay sober. The mobile experience, compared to that on a computer, is always much more concentrated since there is less space. The reading direction must therefore be very clear so that the messages are immediately understandable. Also think about the main action of the page: if the goal is to get people to click as much as possible on the “contact us” button, make this button obvious… Design your platform according to your content and the experience you want to create.

·         Flexible images are crucial in creating a responsive website. Think about how the images will adapt to different screen sizes (very large on a computer, but very small on a phone, etc.). Regarding the development of the platform, the code must allow the images to change scale (in percentage) according to the width of the browser.

·         Navigation is important on a smartphone. There are several methods for positioning large menus as well as content. The hamburger menu for example, or a simple drop-down menu, or different tabs presented horizontally, as is the case on YouTube.

·         The different gestures open up a whole lot of possibilities for design. People love to read “with their hands” and interact with content. It feels like you're in control. On mobiles and tablets, users can zoom in and out, or scroll through images, etc. These interactions generally affect the design. For example, if you have an image gallery, avoid using small dots to select an image individually, and allow users to slide the screen from one image to another. Consider the size of users' fingers and make sure you create a good UI experience. According to Apple: the minimum comfortable size for clickable UI elements is 44 x 44 px. This limit is not respected and these elements are generally around 25px. The complex designs that we see on 'desktop' interfaces must be adapted to create an intuitive UI on a smartphone. Keep this in mind when creating your different versions. Discuss the different options available with your developer to find the best solutions.

·         Create at least three versions for different browser widths. We have a version below 600px, another at 600px-900px, and a third at over 900px. Between these dimensions, the content can adapt freely or on the contrary remain fixed. Having three (or more) fixed layouts and adding margins where needed is often an easy way to create and implement scaling. However, having adaptive versions will work better on more devices.

Tools and Resources

·         Your web browser may be a common tool, but it is still one of the most effective tools for previewing your designs while on the web. Install different browsers to see how your site will appear on each one. Then crop the size of the browser windows.

·         Your mobile phone is also one of the most obvious tools: very useful for seeing your site on a small screen and testing the UI / UX.

·         Fluid grids allow you to base your layout on a percentage instead of pixels. For example, if the width of the content on a computer screen is 930px, but you want that figure to increase to 320px on a mobile: 320/930 = 34.4%. When you use this percentage, your design elements will keep their size proportional to each other. We especially like the One% CSS Grid .

·         Google Resizer is a good tool for viewing your site on different screen sizes.

·         Media Queries is a type of code that will be implemented in your site when it is built. It's important for your code because it sets the conditions for your site to magically adapt to different screen sizes. For example: “if the screen size is less than or equal to 480px, change the design to tablet format”. Try this tool right away by reducing the size of your browser window (from a computer). You will see that the content changes scale automatically to adapt to these new dimensions.

·         Other resources to help you get started:

o   The Ultimate Guide to Responsive Website Design

o   12 Column Fluid CSS Grid System

o   Guidelines for responsive websites

You now know everything about responsive website design (or almost)!

Don't panic, responsive web design is a challenge for everyone in the profession. The best you can do is stay on top of UI / UX and design trends, make sure your images are flexible, never forget that browsers are all different, and never forget the user experience. Is queen.

Learn more