More and more people are accessing websites from their mobile phones. Developing mobile websites is very important. There are 2 different ways web designers and developers can address the needs of our users:
- Responsive Design
- Separate Mobile Website
The following image shows the Responsive Design version of my website on the left, as well as a separate iOS-optimized version on the right. The Responsive site that serves desktop and mobile is accessible through tinaciousdesign.com/portfolio and the separate mobile site is at tinaciousdesign.com/ios.
Responsive Design
Responsive Design creates different layouts for the same content depending on the device. The same HTML markup is used but there are additional styles in the CSS. It is a great technique for optimizing a page’s content for mobile and desktop.
Responsive Design is great but it can only go so far. It does not change the content that is served for each device—the same content is served but it is styled differently. It’s powerful but not as powerful as developing a separate website for each.
If I want to change the content that is served altogether, a separate mobile site is in order.
Pros
- One single set of HTML – no need to develop a separate site for mobile because they share the same site
- The same stylesheet just modified slightly to optimize for layouts
Cons
- Not very flexible – you cannot shift elements around the page and can only modify limited behaviour through CSS
- Can result in larger than optimal CSS and HTML files – sometimes you want to show content only for mobile or only for desktop but you have to render both on the page and hide your choices using CSS, which is not as efficient as not rendering them at all.
Separate Mobile Website
A separate mobile website is essentially duplicate content of the original website… But not always. If your website is a basic, static website without dynamic content, your website will have duplicate content. If, on the other hand, your website is integrated into a Content Management System (CMS) like mine is—e.g. ProcessWire, WordPress, Drupal, etc.—you do not have to duplicate your content. Your content will be automagically generated in both parts of the site. Essentially I add content to my site and it’s generated in both places. If I change something it’s updated in both. Everything is automatic. All values are stored in a database and the magic of PHP and the CMS handle everything the way I want it to.
For the separate mobile website I used the Jaipho Javascript extension and integrated it into my existing site powered by the ProcessWire CMS.
Pros
- Complete flexibility to drastically change your mobile website to whatever you want and not required to follow any layout specified by the desktop site
- More easily optimized – render only the elements you want to use
Cons
- Can take twice as long to develop – essentially you are developing two websites with 2 different HTML markup, CSS styles and Javascript
Final Words
They’re both great options depending on your needs. If you really care about usability then getting a mobile website will speed things up for your users and serve them only relevant content. Also, if your website sees frequent or occasional updates, having a content management system would be recommended for managing more than one instance of a site. If, however, you would like to maintain a consistent layout, not have a separate subdomain for a mobile site and your site is not powered by a CMS, then Responsive Design is a great option for you.
Both are great options and depending on your needs, I’d recommend either. In this day and age, people are accessing the web from their mobile phones more and more and it is highly recommended to have a mobile-friendly version of your website, be it Responsive Design or a separate mobile website.
The post Responsive Design vs. Mobile Website appeared first on Tinacious Design » Blog.