You’re probably aware by now that ensuring your website is mobile friendly is very good business practice. But how exactly do you get started on doing this? How can your web design account for the dozens of different devices – and different screen sizes – the your potential customers use to access the web?
The answer is to, firstly, make sure your website uses a responsive design. You can read all about this is our informative eBook: "How to Have a Mobile Friendly Website". Beyond that, there are a few strategies you can use to give your customers a best-practice experience when they visit you online. Here are Crockford Carlisle’s magnificent seven responsive website design tips:
1. Set priorities for your website content
Of course, as the screen size narrows, the amount of visible content will be reduced. So by working on your website content in advance, you can prioritise what needs to be rearranged when the browser window changes.
Remember that not all the content that’s visible on desktop needs to be on the mobile version of your site. It can be a good idea to collapse into dropdown navigation, so that content is only visible when the user wants it.
2. Think about mobile browsers first
A “mobile-first” approach to your website isn’t just about designing around smaller screens first. It’s also about putting yourself in mobile viewers’ shoes; thinking about what they’ll be doing and where they’ll be doing it.
Instead of just sitting at a desk, mobile users will be viewing your site while outside, watching TV, doing the laundry, riding public transport, etc etc. That means it’s critical that your website is focused, efficient, and able to deliver just what they’re looking for quickly.
4. Consider fingers in your design, not just cursors
Mobile browsers will appreciate having decent-sized buttons that easily get them where they want to go, first time. As well as creating larger buttons for mobile, you can also make the content area a clickable link to solve this problem.
And if your desktop site relies on hover effects to indicate a link, remember that this feature won’t work on touch devices – and your content may be overlooked.
4. Work around low bandwidth by compressing files
The speed at which your site loads is a major consideration for mobile users. Because they’re most probably out and about and on the go, they just won’t have time to wait for your website to load. That’s why your site needs to respond to the comparatively low bandwidth of mobiles.
Some of the ways you can do this are:
- Compress images to minimise their size in bytes without degrading the quality of the image.
- Use media queries to load more content for larger screens, while loading only the core of the code for mobile users.
- Use a plugin to delay images loading, instead of the site trying to load all the images at once when the page is opened.
5. Design around a fluid grid framework
A fluid grid framework can be an easy, quick, and flexible way to create a responsive website. They do a lot of the responsive design work for you, allowing you to rapidly create prototypes and concentrate on the user experience (UX), as well as how to rearrange your content when it responds to the browser.
6. Improve responsiveness with flexible images and video
A flexible grid uses percentages to ensure images respond to browser size appropriately. For example, you might choose to specify that images have a max-width:100%, which will resize them to 100% of their actual dimensions and not stretch beyond. Or by choosing width:100% you can stipulate that images will adapt and stretch to fill their “container”.
Some mobile devices will render icons or images pixelated, because they have a higher ppi (pixel per inch) than desktops. To get around this issue, you can opt to use SVG (scalable vector graphic) files or icon fonts.
Crockford Carlisle’s experienced graphic designers and web developers can help you to improve the responsiveness of your site’s pictures and video.
7. Think – breathe – live – responsive design
Hopefully by now you’ll agree that there’s more to creating a responsive website than just build-and-forget. There’ll always be more than one solution to any given challenge.
By always bearing in mind that your website won’t always be viewed the way you see it, you can foresee important questions before they’re asked, and prioritise your content around the demands of mobile devices. The end result is a more focused website design for your business.
Want more advice on the best way to build a responsive website for your business? Give Crockford Carlisle a call now on 3891 3800 and find out how we can help.