Responsive web design is fast becoming the hottest trend in the world of web design, and this is largely down to the huge popularity of mobile devices, like tablets and smartphones. The wide range of different screen sizes to cater for means that websites need to adapt to the device they are being used on to keep looking good. Gone are the days of designing for the standard desktop screen. Alongside this trend of mobile internet use, is the dawn of HTML5 and the interactive capabilities that the new technology brings. In .net magazine’s top 15 web design trends for 2012, responsive web design came in second place.
The simple answer to who needs responsive web design is pretty much every company, organisation, and public service out there. It’s has been a little slow top take off, but now momentum is picking up with the availability of 4G internet to power a plethora of powerful mobile devices a key factor. Businesses are quickly learning that responsive websites can offer the best way for presenting a service online, and are likely to keep customers on their page, no matter how they are viewing the web page. In an era where a strong online presence is essential for a successful business, as much so as having commercial property insurance to cover business assets, responsive web design is the best way for companies to show off what they can offer customers and clients. If you are a web designer who plans to work freelance, and haven’t yet got to grips with how responsive web design works, now is definitely a good time. Read on to find out about some tools that could help you.
To start you off, it’s worth doing a bit of research into how other designers have approached responsive web design, and look at examples of responsive websites already out there on the internet. Luke Wroblewski’s website is a fantastic place to begin your research. Being a design professional himself, he shows a variety of popular patterns that have been proven as successful, and explains why these patterns work so well. You will also find a bunch of links to live websites that employ the different patterns he talks about, so that you can see them in action. Go to Luke’s website here to read his advice.
Once you’re up and running with your new responsive web design project, it’s definitely worth your while to take advantage of FitText. It is a jQuery plug-in to use with your site, and basically makes the text on your website responsive to the type of device it is being used on. This plug-in is great if you want to use large, bold headers on your website, but want them to scale down for mobile devices. The text will enlarge and shrink to whatever size, whether you’re using a wide screen monitor, or an iPhone. Find out more details about this useful plug-in here.
A useful tool to use when designing websites that have a lot of images is Sencha.io. It is a relatively new tool that allows users to do a variety of things, but most interestingly for responsive web design is its ability to resize images before delivering them to the device they are being viewed on. It is a cloud service, so all images are stored online and readily available. When a user views a website with images hosted at Sench.io, the images are optimized for the screen size. Still in the Beta stage, if you want to find out more about Sencha head over to their website.
While you’re designing a responsive website wouldn’t it be great if you could see how it looks when viewed on a variety of different devices, without actually having to use all the devices? Well thankfully designer Matt Kersley has answered the prayers of many a web designer by creating a responsive design testing tool. Insanely useful and simple to use, just type in the url of the site you want to see in different browser sizes, and there you have it. You can see what your site will look like on a desktop screen, and see how it responds to being viewed on a tablet. Click here to try out this great tool.
Responsive web design was born out of a need for websites to be able to offer a better user experience for different devices and screen sizes. However, now there is a shift to creating responsive websites that respond directly to the user, not just the device. Instead of a website reacting to the device it is being viewed on, the next stage is for a website to tailor itself to the journey of the person using it. This article published at CMS Wire explains why web designers need to start designing websites with this is mind. The world of web design moves fast, and keeping ahead of the game is essential for success as a web designer.
Juliette Lancaster is a tech writer from England. She works with a number of small businesses helping them to understand the importance of mobile to their online future and the best ways to adapt to the challenges small screens pose.
Subscribe to our email newsletter for useful tips and freebies.