How to plan and build a Responsive Website

According to a recent survey mobile internet usage is set to surpass desktop internet usage in the US by 2015. Now with tablets becoming more popular, and even with TV internet usage increasing, it’s important for companies to provide a great user experience for all their visitors no matter which device they are browsing on. How does responsive design help us do this? Well, by allowing us to create one website solution that is flexible for different screen widths. It uses flexible grids and clever styles to present the same content to a user, but displays that content in a format that suits the width of the device.

Why should you design a responsive site?

There are many options to consider when a client asks for a mobile solution for their websites, and the suitability of these options depend on the business requirements and budget; it’s also important to consider any existing solutions or sites they may already have. Creating a responsive website isn’t a complete mobile strategy, and won’t answer every brief, but, especially if you are starting a website from scratch, you should consider it as a very serious option.

So why would you decide to create a website this way?

Developing a new website or web application is a challenging process. You won’t know if the site will be successful until it’s live, so creating a separate mobile site or a mobile app in tandem with a website project could be a big waste of time and money. It’s more efficient to get your new site performing well before you create an additional mobile site or application.

You want to keep costs low

Good responsive solutions require additional design and front-end development time, but doesn’t heavily impact application development. It could take around 20-30 per cent longer to develop a responsive site, but it’s still faster than creating an additional mobile site or app. Developing a site this way also means that you only need to develop, manage, and maintain the one site, so it can reduce maintenance costs too.

You want it to work even when new devices are released

A mobile site needs to be able to recognize the user’s device; when new devices are released, the site needs to be updated. As the responsive solution only recognizes the browser’s width, no new updates would need to be made. This means it’s much more future-proof and scalable.

The process

Let’s talk through the process of creating a responsive website. These are the key steps:

•             Research/scoping: Understanding the additional requirements for a responsive site

•             Wireframing: Grid structures and layouts for the site considering different screen widths

•             Look and feel: Style considerations

•             Building the site: HTML & CSS issues

Research and Scoping

Research is always a very important stage in the design process so it’s worth putting in a little extra consideration into the people who will be using different devices. Understanding how these different users may want to use the website on a variety of devices will help you to decide what the priorities are on the project.

•             What different goals will a user have on different devices?

Questions like this are starting to become more redundant. In the past we’ve assumed that mobile users have been task-driven. But now people on any device are just as likely to leisurely browse the Internet as they are to need to complete a task quickly. It is worth considering though, as thinking about users’ goals in this way could help you prioritize content for the site, irrelevant of what device the visitor is using.

•             What technical considerations do we need to make for functionality and content?

Think about how any complicated functionality may work on different devices. Although a responsive site will only change the CSS depending on the width if there are complicated elements that rely heavily on JavaScript, they may not translate well on a smaller device and it could be worth hiding these.

Wireframing

The logic behind how the styles should change can be a bit hard to define and the magic of it will really come out in the build of the site, but we need a way to start defining the different width stages of the layout. For your project you should consider what widths are important for you to think about—you may even need to look at bigger screen widths for TV internet usage.

At this point of the project you should already have the key templates that you’ll need to wireframe, but you shouldn’t need wireframes for all these templates in the different widths. The main goal here is to help define the logic behind how the CSS will change the look of the page, so focus on pages that have very different layouts.

Getting started

First, define the grid structure for each key width.

A very simple grid structure with equal column widths on each layout should make it easier for you to plan for components wrapping as the width changes.

Creating the master template

As you create each wireframe you’ll need to think about the columns and how the components within these will adapt as the page width shrinks. e.g. what happens When you have less space? If you have four columns of content? When you change to a three-column width? There should always be ongoing communication between the designer and the front end developer to answer any issues about what you can do with components visually and in the CSS.

Starting on the home page

You may feel like there is another page that has a higher importance than the home page, but this is where you should start.

Main navigation

Create a simple horizontal top navigation that has a fluid width to change with the screen size. As the screen reduced the menu items would get closer together, then wrap on to the next line when necessary. This works for desktop, laptop and tablet widths, but going further down you may want to create a menu that would suit the devices better. This will give you the menu spilt over two columns for the mobile device.

Remember when you are styling the navigation do think how it will work as the screen sizes changes. Certain styles, such as using tabs, may be difficult to get to work and look good as the screen width reduces.

Footer

Footer should be pretty simple, just think about what content you want and how it will change as the width changes and the columns reduce—this could be as simple as components wrapping underneath each other.

Other components

A simple grid structure should make it easier to plan out the components. Each component you design may require different behaviors, so think about how the visitor will want to use the component on different screen sizes. Phone users are more comfortable scrolling down a page than using small buttons to interact with the page.

Test it straight away

As soon as you have created your first wireframe test it on the relevant device straight away. It’s easy to get the image on a simple web page and take a look at how it looks and feels to scroll down. This will let you know early on if your wireframe is working.

Adding the tablet and mobile versions to your user testing process will give you a lot of useful feedback too. Now that your wireframes are created, tested, amended and approved it’s time to make them look good for all your screen widths.

Look and Feel Visuals

It isn’t necessary to create visuals for every wireframe. The main objective is to cover all the styles that will be required to create the HTML and CSS. There will be a little bit of a crossover for wireframes and visuals, some styles that will be required for the mobile where there wasn’t a need for an initial wireframe.

•             Styling the page: Think about keeping your styles simpler for your mobile version—what’s great about CSS3 is that you don’t need a lots of images to get great styled effects, but these still take a bit of time to load.

•             Thinking about font: Make sure your font sizes are going to be readable on each device. They’ll have to be much larger on the mobile device to ensure readability.

Also, be prepared for your visuals to change when it gets translated into the build of the site. There always should still be balance between what looks good on a flat visual and what will work when the site is being developed. The final site isn’t too far away from our look and feel visuals.

Building the Site

Building the HTML and CSS is a challenge all of its own, but here are a few things to think about.

•             The impact of image sizes: The site will need to load in the full size images even if the CSS scales them down, so try to keep image sizes as low as possible. There can be some nifty JavaScript tricks though to make the site run smoother.

•             Use advanced CSS:

It’s important to get the client behind the idea of using advanced CSS styles, allowing the site styles to degrade as the browser capability does. This lets you keep site loading times low.

•             Constant communication is required: The project will always go smoother if the team speak to each other, so from both designer and developer it’s good to discuss problems and solutions as soon as they turn up.

So what does all this mean?

If you are thinking about convincing your client to have their new site designed and developed in a responsive way, firstly you should consider if it really is the right solution for them, then you’ll need to be able to persuade them of the benefits and communicate that it will add more time to the project. But, we believe that this is how more sites will be developed in the future.