If you’re familiar with responsive web design (RWD), you know that one of its goals is to make your website easier to use on different devices. And if you don’t know what RWD is, I’m sure you still want your website to look good on all devices. More and more people are using mobile devices everyday, so it’s important your message is reaching them. What isn’t always apparent, though, is that RWD about more than making your site pretty on phones. It’s about working on any device that your customer may use, including assistive technology devices. It’s also about getting your content to your customers quickly and without delay. The great thing is, you can achieve these benefits by making your site responsive. Even better, you can achieve all of this without doing a major redesign.
1. A Solid Foundation
As a first step in becoming responsive, you should begin with a solid foundation. Using a fluid grid is a great first step in making your site work well on different devices. It helps organize your content as it visually transitions from large to small displays. It also provides well ordered content for non-visual devices. Done well, grids can also make the experience better as text is magnified on your site. Your content will reorganize itself to make it readable without any extra work required. Having a solid foundation is an important part of building a great web experience.
2. Better Markup
Introducing RWD and a strong foundation also means that you have an opportunity to update your markup – HTML and CSS – of your website. Using HTML5 tags makes your site semantic. A semantic website means that your site is more readable by machines – I.E., search bots – which leads to improved search rankings. Using the new markup and following semantic processes also makes your site easier for accessibility software to parse. When taking this step, be sure to include both WAI-ARIA and microdata with your markup – both of these are great ways to improve your markup. Better markup means simpler markup, which also makes your site easier to maintain. That means that the changes you want can eventually be made even faster!
3. Performance Matters
It is important to keep in mind performance while completing a responsive design project. The networks that are used to power the Internet on smart phones can’t compete with the way you access it on your computer at home or work. As a result, many new tools and techniques have been created to improve website performance. Minification and compression are two examples that have been around for a long time, but they aren’t alone. You can prioritize resource loading, load the less-important stuff as needed, or asynchronously include third-party resources like social buttons and analytics code. Google has some great resources to help us make the web faster. And if you didn’t know, Google likes fast websites. So “fast” is good: for your users and your search rankings.
4. Enhanced Images & Graphics
Don’t forget about your images while making your site responsive. You might not want to change them visually, but there are a lot of things you can do to that will make your site better. First, if you have text in your images, you should try to pull it out and layer it over the images. This gives you the flexibility to change its position on different devices without having to create new images. And the message in the text layer becomes more effective to non-visual web browsers and search engines. You should also look into optimizing your images. There are lots of tools to help you lower the size of your images. You can even create multiple images – one for larger displays and another for smaller ones. These changes can really boost your site performance and enrich your user’s experience.
5. Optimized Content
Finally, RWD can give you a chance to revisit and improve your content. This isn’t a requirement, but taking time to make simple changes – like improving page titles, trimming large areas of text, and simplifying forms — can lead to a better experience on all devices. This is especially true on smaller devices, where your audience may have to scroll more or use a tiny keyboard. If you care about your search visibility (we hope you do!), content improvements combined with the above changes can really help give you a boost. As we’ve discussed in the past, content is an important part of SEO. Having a more accessible, semantic, and faster website makes your content as important as ever.
These improvements are all things that you can achieve by making your current site responsive, even without a complete redesign. Sometimes you do need to do a redesign and sometimes your don’t. Either way, we’d love to help you get all of these benefits by making your site responsive.