So you want your new website to be a responsive website? Internet high-five. Internet browsing is no longer a niche thing. Email open rates on smartphones and tablets increased by 80% between January and June 2012. It's also worth mentioning that this number has been rising rapidly ever since. Chance are you open a lot of your emails on your smartphone too. In fact, there are over 1.2 billion mobile users worldwide. That’s a lot of people that you’re automatically eliminating if your website isn’t optimised for mobile viewing. But if you're reading this, then chances are that you already know how important responsive websites are.
Responsiveness may once have been written off by some as a fad but now it’s become ubiquitous. There shouldn’t be a diminution of quality between a desktop or mobile browsing. Your business is aiming to deliver a certain type of experience to your visitors. You also need to make that consistent across all platforms. None of this should really be news to you if you’re a regular mobile web user, but actually taking steps to apply this to your website can take some effort and head-scratching.
So if you’re ready to take the leap and make your website responsive, be it a brand new design or updating an existing one, here are 5 things to consider when creating your responsive website.
It sounds pretty obvious, but when you consider what you want on your page, are you sure it’s all relevant? People don’t read things on the web, they scan. If you have a cluttered web page full of text, images, links, and it’s not user-friendly on a desktop, then it’s certainly not going to be user-friendly on a smaller screen. Consider what the purpose is for each page and diligently remove waffle or anything you deem to be superfluous. Make use of white space and keep the content organised neatly to try and engage the viewer.
Avoid hiding content for mobile
This one could be slightly controversial, in that there are a time and a place for removing certain things. There’s often a tendency, particularly when making an existing website responsive, to hide content for mobile devices in order to try and reduce the amount of content being displayed. This helps speed up loading times and makes it easier to create a simpler website, but by doing this you’re devaluing your mobile offering. If you think something is worth hiding, ask whether you really need it there at all? We need to stop trying to treat mobile and desktop viewing as two separate entities and work on delivering a unified experience across all platforms.
Make sure your text is big
Small text is only going to look smaller on small screens. If you’re confronted by a vast amount of text at a minute point size, do you take the time to read it? Digital typography should always be larger, and you try to aim for a minimum size of 16 px, and if you are ever in doubt, err on the side of the text that looks almost slightly too big. Another way to increase legibility is to create more white space, this opens the page up and makes the text seem less intimidating. Web designers used to be limited to just a few web fonts, but things like Google Fonts and Adobe Type kit are giving us much greater flexibility to craft good-looking type online. You can read more on typography here.
Make sure that your links are big enough to tap/click
How many times have you viewed a website, attempted to tap on a link only to highlight some text? Even though I don’t have the largest fingers, I still get frustrated by links that are not only tiny but surrounded by other links or text. So when you are creating your responsive website, always consider the size of your links. Make sure your viewers find it easy to tap on a link and aren’t getting frustrated. Don’t have a small two-word link when it can be 6 words long, or better yet use an icon. Using icons makes links a lot easier to tap. This is why you constantly see Twitter and Facebook logos on almost all websites now. Social sharing links are something that you must prioritise. It's also integral to the inbound methodology and you want people to share and post your website's stuff. Google will love you for it.
Design with a mobile-first ethos
Obviously, this all depends on the type of website that you’re doing, but for the most part, a good way to ensure that your website is properly optimised for mobile is to design it for mobile, then design it for desktop viewing. Mobile-first allows you to focus on delivering a quality website with the smallest viewpoint, lowest processing power, and fastest load time, and scale up your site through progressive enhancement. Whereas designing for desktop first and removing things as the screen gets smaller cannot always guarantee a good mobile experience. Obviously, every web designer has their own way of doing things, but mobile-first certainly helps us and makes it easier to understand what you really need out of your website. Click here for more information on mobile-first design.
So that's 5 things to consider when creating your responsive website. Hopefully, you have a better idea of how to approach creating your responsive website. There are a variety of ways to find out what your site will look like on a mobile device, such as MobileTest.me and Screenfly, and as the Internet grows and more and more devices start to become connected to it, you do need to jump on the responsive bandwagon. Remember, delivering a user-friendly experience on your website is just another way of delivering a quality service, and it reflects on the quality of your business.
Image from www.smashingmagazine.com/