Framing Mobile-Optimized Websites: The Contrasting Methodology Evaluated

8
70 Flares Twitter 0 Facebook 0 Google+ 3 StumbleUpon 0 Pin It Share 67 70 Flares ×

The Net is over-exploded with new advancements. Each day brings forth a new technology and the focus shifts onto it. Mobile-ready websites are the ones in demand nowadays. Techniques catering to provide creation for such websites are found in abundance in the market. There’s a constant debate over the use of the best technique available for creating a mobile-ready website.

Google has always come out in support for creation of responsive web designs whereas Jakob Nielsen, an experienced usability consultant, is of the opinion on creating dedicated mobile sites.

There’s a third dimension as well. Popularity expansion, where the web server makes use of the corresponding HTML and CSS from the same URL. This further depends on the device a web page on the site is being requested from. The name coined for this technique involves responsive design and the server side components.

Below, are provided the three techniques together with real-life examples that are present for the technique.

1. Responsive Web Design(RWD)

The size of the user’s viewing data determines and helps adjust the layout of a web page. The design form makes use of CSS3 media queries. The technique helps you use the same HTML code to display a different web page layout for various devices such as, desktops, tablets, mobile devices, etc.

Pros of Responsive Web Design

Maintaining a Content Balance: The same content and HTML is present irrespective of the device being used and provides the users a similar experience. This factor will see a gradual growth and become important as people are more bent on using their SmartPhones as primary means of accessing the Web.

A Common URL: This feature makes it easier to share and link to the content. There is no need of re-direction to enable devices to get an optimized view, when compared to a dedicated mobile site.

Cons of Responsive Web Design

Lack in Content Optimization: Until and unless you use a mobile-first approach towards designing, the web pages will contain the same information as the desktop counterpart.

Navigation Difficulties: Mobile users are of the notion to multi-task much more than desktop users. They can be more hooked towards mobile specific UI design patterns. Thus, the navigation issues should be adhered to on a priority, otherwise there can be usability problems.

Some real-life examples of sites using RWD are PixelCrayons, World Wildlife Fund and The Boston Globe.

Bestpsdtohtml-PixelCrayons-Responsive-Web-Design

2. Dedicated Mobile Site

There are instances where some designers cater to the experience of mobile users by opting for a separate mobile site. A common form of implementation of such a technique is that the desktop website is redirected to a sub-domain.

Provisions of a Dedicated Mobile Site

Simpler to Make the Changes: It is much easier to make the spark changes to the mobile and desktop sites. These changes can be one portal-centric. It can be either for the mobile version or the desktop version, only.

A Quicker load time: Developing for only a mobile device helps you streamline and optimize your site and concentrate it for a better user experience.

Navigation is easy: The entire navigation layout and the content is easily customized for the various tasks to be performed.

Hazards of a Dedicated Mobile Site

Presence of multiple URLs for every page: This problem is a grouse one as sharing the web page on social media becomes an issue. The problem persists because mobile users will have to share the mobile URL, but the desktop users will simply click on the link and comply the mobile version.

Difference in the Content and Functionalities: The main purpose of creating a dedicated mobile website is to cater to the needs of the mobile users. This leads to a different experience of the content and functionalities.

Content Forking: Two different sets of content will create a content strategy nightmare for the designers and the users, as well.

Re-Direction is Required: The users on mobile devices will be required to be re-directed for an optimized view. This re-direction adds to a page’s load time resulting in more implications on the site’s SEO.

Some of the real-life examples of websites using this technique are Walmart, Amazon and BBC.

Bestpsdtohtml-Dedicated-Mobile-Website

3. RESS: Same URL but Different HTML and CSS

This third dimension of creating a mobile-ready website makes use of server-side programming to deliver customized CSS and HTML for the various devices. The users of the mobile devices would be able to see one set of code, whereas the desktop users will have access to a different set of code. Improving a site’s performance level is the primary purpose of implementing this technique. The method is at its zenith when it combines itself with RWD. Thus the name, RESS (responsive web design + server side component. )

The primary inclusion that has to be made while using this method is to include the Vary HTTP header so the bots can easily crawl both versions.

Positives of RESS

Navigation is Easier:  Customized navigation layout is available for the various tasks that can be performed by the users on both the device platforms.

Page Bloating is Reduced: Removing ‘to hide page’ elements can be removed from HTML or CSS as well, instead of banking on display: none or visibility: hidden. This is done so as to reduce the amount of data to be downloaded and also to speed up the load time.

Quicker Load Time: The redundant Javascript can be got rid from the HTML, which liberates the CPU, the memory and cache on the mobile devices.

Negatives of RESS

Server resources get increased: Building the HTML dynamically increases the load on the server.

Device Detection is Required: The mobile users will need to get detected, but this process of device detection is unreliable.

The real-life illustrative examples of RESS are CNN, eHow, SlideShare and WordPress.com

Finally

Going by theory, sites following RWD are the best solution, but practically such sites have no optimal implementation and thus result in a slow load time. A dedicated mobile site technique has the fastest load time, but there are many significant issues that creep in, like the performance issue.

The best method, according to me, is the third one, RESS. It not only includes all the advantages of the RWD, but also overcomes the two major disadvantages.
Choose your technique and create your mobile-optimized site.

About author View all posts

Andrew Johnson

Andrew Johnson is founder of BestPSDtoHTML. He loves creative designs, photography, paintings and everything about innovation. As an Internet entrepreneur, he constantly tries to develop new ways to bring content faster and closer to the end users in a more streamlined way. His main focus lies in inspiring all the designers and developers with all new ideas through his blogs.

Leave a Reply

Your email address will not be published. Required fields are marked *