open menu icon
close menu icon
How To Design A Responsive Website
feature icon
So you are trying to build your first website and someone has, very correctly, told you your website needs to be a responsive website. Where are you going to start?

Well not all designs can be built using responsive technologies. Your design needs to bear this in mind. It must start off with responsiveness in mind. Some call it mobile first, preferring to build initially for mobile devices. But in short your website needs to be built using blocks of content. On wider screens some of these blocks will be laid out horizontally, whereas on the phones all of these blocks will be laid out vertically.

Your responsive design must also bear in mind the navigation around the site. On a small mobile screen the navigation could take up a lot of screen space, which on a desktop would be next to nothing. Usually you'll use various techniques here to hide the menu on smaller screens, revealing it with a burger button. Techniques to show the menu can include the menu appearing as a new block, a simple select box or an impressive layer that moves in over the content.

Whichever you chose remember how users are pressing those links. Imagine using your website on bumpy public transport. You need those buttons to be a reasonable size on mobiles. Consider that most mobile operating systems have 4 buttons across on their desktops - use that width as your minimum width and height.

Images are also critical when you are designing your responsive website. There's nothing quite like an impressive banner image on the desktop version, but that needs to be reshaped for mobile. And if it's thousands of pixels wide to cover the desktop, do you really need the user to download that full image on their mobile, potentially over 4G? In that case the responsive version can pull in a smaller image.

Other images used to decorate the content need to be considered carefully. Get carried away and they will needlessly fill the mobile screen, skimp and the desktop version could look boring.

Consider your fonts carefully. Make sure that they are clear and consider using different font sizes between mobile and desktop. Make it easy to read - clear fonts and no messy backgrounds.