Sure, web design and development might be a little over your head. Maybe you forked out for a designer to build your site, maybe you bought a premium theme or use a free one. Maybe you’ve heard this buzzword “responsive design” being bandied about here and there. But what has it got to do with you?
Well, the short answer is: a lot. But let’s start at the beginning.
What is responsive design?
Basically, the idea is that your website design responds to the visitor’s screen size, so their experience is optimised no matter if they’re viewing on a high-definition display, a smartphone, or a tablet.
Unlike using a plugin to make your site more friendly to mobile visitors, responsive design allows you to have full control over what the user sees. You can set scale and position for images, text blocks, sidebars and navigation items.
How do you do it?
Firstly, check if your site is already responsive. If you’re using WordPress, there are many responsive themes out there already.
If you aren’t using a responsive theme, then hold on to your hats, I’m about to get technical! You’ll need to add a few lines of code to your theme’s CSS file, which many normal website owners aren’t comfortable with. But if you are comfortable with tinkering around, responsive designs use media queries, to determine the visitor’s device screen size and make the appropriate CSS changes. Most modern browsers support media queries.
You’ll also need to look into an adaptive grid system, especially specifying sizes in percentages, rather than pixels, to make everything fluid. If that’s too techy for you, you can certainly enlist the help of a web designer to make your site responsive.
What does it look like?
Well, the WordPress.org website is, of course, itself responsive. Notice how all the elements scale down and reposition themselves so the site is still usable and readable at various sizes? Cool, huh?
Another good example is the Food Sense website. Head over there and try resizing the window to see the responsive goodness.
Why should I care?
Can you imagine the frustration a visitor experiences when they navigate to your website on a mobile browser, only to have the page take a long time to load, the text unreadably teeny tiny, and having to scroll and zoom in and out to get where they’re going? That visitor is probably not going to stick around long.
In contrast, a responsive design will give your visitors a slick and customised experience, that will highlight the most important elements of your site. That translates to more time spent on your site, and more potential customers!
Extra resources
For more inspiration and examples of sites that are using responsive design, head over to one of these galleries:
This post originally appeared on Grassroots Internet Strategy.
Leave a Reply