A Beginner’s Guide to Responsive Web Design

The question of whether or not to build a mobile site is at the center of many discussions. Responsive web design is another option. How should you go about designing a website that is responsive?

With mobile internet users set to surpass desktop internet users in the US by 2015, with tablets becoming more popular, and even with TV internet usage increasing, it is important for companies to provide a great user experience for all their visitors. Responsive design can help us do this. It displays the same content to a user in a format that suits the width of the device, but uses flexible grids and clever styles to do it.

Why should you design a responsive site?

When a client asks for a mobile solution for their website, there are many options to consider, but it is important to consider any existing solutions or sites they 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, it is a very serious option.

Why would you make a website like this?

You’re starting from scratch

The process of developing a website is difficult. Before you create an additional mobile site or application, it is more efficient to get your new site performing well with the assistance of professionals who are proficient at custom wordpress website design.

You want to keep costs low

Solid responsive solutions need additional design and front-end development time. It could take more time to develop a responsive site, but it is still quicker than creating an additional mobile site or app. Developing a site this way means that you only need to manage and maintain one site so that it can be cheaper.

When new devices are released you want it to work.

When new devices are released, the site needs to be updated. No new updates would need to be made as the responsive solution only recognizes the browser width. It is much more future-proof andScalable.

The process

We will talk about the process of creating a responsive website. The new Macdonald Hotels website was released in September. Macdonald Hotels have 47 hotels in the UK and Spain. A new site structure, extensive hotel content web design firms, and a booking engine were created for them. Some considerations should be considered when designing a responsive website.

These are the key steps:

• Understanding the requirements for a responsive site is research/scoping.

Understanding the additional requirements for a responsive site is called wireframing.

The style of the grid structure and layout is important.

There are style considerations when building a site.

Research and scoping

It is important to take into account the people who will be using different devices in the design process. Understanding how different users will use the website on different devices will help you prioritize the project.

What goals will a user have? This is starting to become more redundant. We used to think that task-driven mobile users were. People on any device are as likely to browse the Internet as they are to complete a task. It is worth considering though, as thinking about users goals in this way could help you prioritize content for the site.

What are the technical considerations we need to make? Think about how different devices work with different functions. Although a responsive site will only change theCSS depending on the width if there are complicated elements that rely heavily on Javascript, they may not translate well on a smaller device.

Wireframing

We need a way to start defining the different stages of the layout because the logic behind how the styles should change can be difficult to define. For your project, you should think about what screen width is important for you to use, even if you don’t have to.

At this point in the project, you should already have the key templates that you need to wireframe, but you don’t need to wireframes for other templates. The main goal is to help define the logic behind how theCSS will change the look of the page so focus on pages that have very different layout. We looked at the home page, the booking process pages, the hotel pages, and some generic layout. The different column layout, content types and key functions were covered.

Define the grid structure for each width. We needed to define a grid structure for each of the different screen widths we created. It was easy to plan for components wrapping as the width changed because of the simple grid structure.

When you have less space, what happens when the page width shrinks? Do you have any columns of content? There should always be ongoing communication between the designer and the front end developer to answer any questions about what you can do with components.

You might feel like there is another page that is more important than the home page, but this is where we started. The wireframe is finished. The mobile page length is larger due to the content wrapping over one column

The main navigation was simple and had a fluid width to change with the screen size. When the screen was reduced, the menu items would get closer together. We wanted to create a menu that would suit the devices better, so we created this menu. The menu was split over two columns for the device. As the page width decreased, the other components would shift. Think about how the navigation will work when the screen sizes change. As the screen width decreases, certain styles, such as using tabs, may be difficult to get to work.

The footer is pretty simple, just think about what you want and how it will change as the width changes and the columns change.

The grid structure made it easy to plan out the components. The home page used a horizontal scroller that had four components that would scroll across on a click. We changed the layout of the tablets to only show three items, then we removed the scrolling function and displayed each item vertically. Think about how a visitor will use the component on different screen sizes when designing it. Cell phone users are more comfortable scrolling down a page than using small buttons.

Immediately after you have created your first wireframe, test it on the device you want to use. You can take a look at how the image looks and feels to scroll down. This will let you know if your wire frame is working. This way of testing gave us clues about what was going on. You should see our first issue if you look at this wire frame. The user would only see the first two pages of the site as they navigate through it. This means that the user may not know if the page they are on is the same as before. The user could get into the content much faster if the items were put in show/hide panels. Adding the mobile and tablets versions to the user testing process will give you feedback. It is time to make your wireframes look good for all of your screens.

Look and feel visuals

It’s not necessary to make visuals for every wire frame. The main goal is to cover all of the styles that will be required to create the web pages. There will be some styles that will be required for the mobile where there wasn’t a need for an initial wire frame.

• You don’t need lots of images to get great styled effects, but these still take a bit of time to load.

• It’s a good idea to make sure your fonts are readable on all devices. They will have to be larger on the mobile device.

When the visuals are translated into the build of the site, be prepared for them to change. Balance should be maintained between what looks good on a flat visual and what will work when the site is being developed. You can compare the live site with the final site if you take a look here.

Building the site

I won’t discuss much detail, but here are a few things to think about.

• The site will need to load in the full size images even if theCSS scales them down, so try to keep image sizes as low as possible. There are some nifty tricks that can be used to make the site run better. We initially loaded the smallest image size on the site, and then used Java to decide if a larger image was needed.

Use advanced CSS:

Getting the client behind the idea of using advancedCSS styles will allow the site styles to degrade, as the browser capability does. You can keep site loading times low.

• The project will always go better if the team talks to each other, so it is good to discuss problems and solutions as soon as they show up.

It is worth taking a look at the front end development of the Macdonald Hotels website that was done by Jamie Boyd.

So what does all this mean?

If you want to convince your client to have their new site designed and developed in a responsive way, you need to be able to communicate that it will add more time to the process. I believe that more sites will be developed in the future.

We have learned a lot on this project. We were fortunate to have a client who was willing to work with us to create something new and innovative.

The image is from needoptic.