Responsive website design is a technique of creating a website that adapts or ‘responds’ to any viewing device. As an example, try re-sizing your browser window (or rotating your phone or tablet sideways).
In our previous article in this series, we talked about the basics of responsive website design and why it’s beneficial for business. In this article we are going to look a bit deeper and explore responsive design to it’s fullest.
When thinking about a website’s content it is always advisable to plan how said content is presented, which now includes how it will look on mobile and tablet devices as well as desktop. That’s why ‘mobile first’ coding was created.
If a developer were to start by coding the desktop site and then code how it would look on mobile after, you would most likely have to hide various elements of the desktop site for the mobile version to work.
Mobile first does the opposite. Think of it like creating a mobile site and then making that content look good on desktop. Not only does this put the ever-growing market of mobile users first, it also speeds up the site.
Using media queries (which apply style to certain screen widths), you can apply large backgrounds, bigger images and extra code just to the larger screen sizes – speeding up load time on mobile devices.
When thinking mobile first, content is the most important focal point of any site. A mobile screen is very small, so what do you need your visitor to see first?
Rather than taking up this precious space with a banner image, slider or bulky navigation, this space needs to be utilised to tell your visitor what the site is about and why they should go through the effort of scrolling down.
The same goes for other pages within your site. A blog post’s main focus is the text within the post and perhaps the title, so post dates, massive images and author information need not overshadow this.
Using a mobile device is completely different from viewing a website on your desktop computer. There is one fundamental reason for this, and that’s your finger. On desktop you primarily use your mouse to navigate a website. On a mobile device, you use your finger(s).
This makes designing for mobile devices a challenge. The surface area of a clickable item needs to be much bigger for the user to easily navigate; this includes buttons, text links and menu items.
For this reason many designers are opting to use ‘app design’ within their websites. This style of design focuses on accessible bold designs that at the same time are simple in their approach.
When we talk about navigation, this could mean anything from the menu at the top of a website, to a sub-menu in the sidebar, or even breadcrumbs. When converting your large to menu to a mobile-friendly one there are a few key things you can do.
Unless you have very few navigational items, you will have to find a way of taking up less space. The solution to this is usually hiding your menu behind a button, which when clicked reveals said menu. This can be done as a drop down, moving in from off screen or a multitude of other options.
If you are creating a website that’s mostly going to be viewed on mobile devices, then having a sidebar is probably not your best option. On desktop a sidebar is a valuable piece of space which can be utilised with sub-menus, blog feeds and search bars, but on a mobile devices, this is likely going to be below your main content and unseen.
To counter this, websites need to be streamlined and simplified to showcase only the features you really need. Search bars, tag clouds and your twitter feed may not actually be essential tools in your website’s overall structure.
Bringing all of these elements together to create a responsive website which works well on desktop and mobile can be tricky. However, by working with your content first, you can see what are the most important things you want your visitors to gather from your site and work from there.
Read our first article in this series titled What is Responsive Web Design? Part 1: The Basics.