5 things to consider when creating your responsive website

5 things to consider when creating your responsive website

So you want your new website to be responsive eh? Internet high-five. Internet browsing is no longer a niche thing. Email open rates on smartphones and tablets increased 80% between January and June 2012, and that 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 desktop or mobile browsing. Your business is aiming to deliver a certain type of experience to your visitors and you 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.

Remove Clutter

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 webpage 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 is 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 16px, and if you are ever in doubt, err on the side of 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 text seem less intimidating. Web designers used to be limited to just a few web fonts, but things like Google Fonts and Adobe Typekit 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. 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, which 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 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. 

5-things-to-consider-when-creating-your-responsive website

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/

 [fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][wpcb id=”1″]

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Paul Sullivan
No Comments

Leave a Comment: