You may have heard a lot of talk on the internet about responsive design and how that relates to websites. In this article we take a look at what exactly is responsive design and how it’s the next level of technology for website developers and web designers.
Responsive design definition
Responsive design is a development method that allows websites to display content and images in the most optimal way across a range of different platforms. With more tablets, smartphones and other mobile devices entering the market each year it doesn’t make sense for web designers to build separate templates for each operating system and browser. This increases development time for a website project and costs for the client.
Many web design agencies struggle when it comes time to build a website AND take into consideration making the site work in all browsers (Google Chrome, Safari, Firefox, Internet Explorer - although it’s debatable if IE is a browser :-p, Opera and many more), plus the different mobile platforms to build on (iOS, Android, Symbian, etc).
OK, so what is responsive design?
Essentially responsive design can be boiled down this statement:-
Your website shows the same elements across all platforms and devices, scaled for that device, resolution or screen size.
So responsive design is different to a mobile template right?
Yes! A mobile template is a separate template built for mobile devices. Mobile templates will often have their own .css files, logo files and other associated elements that sit outside the normal desktop site people see on their PCs, Macs or laptops.
A quick note on mobile templates
There are many website content management system templates that have built-in mobile templates and many other plugins that can enable any website to have a mobile template.
There are many Joomla template providers like Rockettheme, Yootheme, Joomla24, Shape5, Gavick, Joomlart and many more joomla template providers that provide mobile templates built into their offerings. There are also many Joomla mobile display components that can turn a Joomla site mobile friendly.
Like Joomla and other open source offerings, Wordpress has its fair share of mobile template offerings. Template providers like Rockettheme, Yootheme, Shape5, Themeforest, Template Monster and Themefuse all offer great Wordpress templates. Some with mobile support and others without. There’s also a bunch of great Wordpress Mobile Plugins – the most popular of which is WPtouch.
I could list all the other CMS systems here like Drupal, Concrete 5, Magento – the list goes on... in fact there’s entire websites dedicated to listing open source CMS’s like www.opensourcecms.com, but Wordpress and Joomla are two of the most popular.
Third party mobile template providers
There’s also options for people who can’t get a hold of templates that incorporate mobile templates into their designs. With services like Dudamobile, MoFuse and mobiSiteGalore it’s pretty easy for anyone with no technical knowledge to set up a mobile template for their current website.
So what’s the difference between a responsive design and a mobile template?
Put simply, a responsive design website is built just once in a way that displays all the elements of that site across all platforms, as opposed to a mobile template that will serve up a separate design to the user.
If you’re still not sure click on the short video below for a more visual explanation.
So should I have a responsive design or a mobile template?
Mobile devices aren’t going away anytime soon and more and more Australians are getting smartphones and tablets every year. Having a mobile strategy as part of your online marketing is a must in today’s online environment. Whether or not a responsive design or a mobile template is better is really dependant on many factors like your budget, your audience and the content on your site.
Responsive design frameworks
Here’s where things get a little more nerdy and technical so strap yourselves in. With many different providers of CMS templates and web frameworks out there, it’s understandable that there’s a few different platforms (think Joomla and Wordpress etc) and frameworks (think Gantry, Bootstrap, Wright, T3 and Warp) that a responsive design website can be built in.
So if you’re a website developer and want to start learning about responsive design it would be best to choose a framework you’re familiar with and start from there. Bootstrap is a great place to start as it’s a simple and intuitive framework to start getting your head around responsive design elements and there’s loads of plugins, templates and other elements for many of the popular open source content management systems that have Bootstrap built into them.