Full responsive vs m-site approach

Nowadays there are more mobile devices than desktops and every mobile device can have different resolution and aspect ratio. That means that we need to come up with optimal solution to that situation. There are basically two main approaches: a website that can dynamically adapted to every screen size - full responsive or additional dedicated mobile version of every page – mobile site (m-site). In this article I will show you main different in both approaches and I will try to answer when to use and when do not use given approach.

M-Site

Dedicated mobile sites (m-site) was the first solution targeting mobile devices. An idea was simple – having already built desktop site - add an additional mobile version of the same site. Seems easy right? It's more difficult than most people think. A new web site means that you double the cost of whole project. Cost of maintain two separate sites also doubles. Keeping them in sync and testing is not easy. On the other hand adding a new mobile site won't change your existing code! And that is very important. In situation when changing a site to fully responsive is too expensive than adding new one it may be a nice solution.

Are there any gotchas? At least two: seo and mobile detection.

SEO

The first thing is to research how your favorite search engine will index your site. As the mobile site will have a different url (like m.example.com) it is important to know how it will be indexed and presented in search engine like Google. Google algorithms are not smart enough, so they need help a bit.

There are two ways of telling robots if our pages has mobile version: in HTML and in separate sitemap file. The first method will look like this:

a) <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >

b) <link rel="canonical" href="http://www.example.com/page-1" >

As you can see there are two values that ‘rel’ attribute can have: „alternate” indicating that there is a mobile version of that page under a link http://m.example.com/page-1 and “canonical” telling that there is full/desktop version of our page under link http://www.example.com/page-1.

More can be found here, where you can read how to make the same thing using sitemaps.

Are you mobile?

M-site approach require from us some kind of detection mechanism. That means that we need to know - on the server side - if request is comming from mobile or desktop device. That information is needed if you want to make redirections. The problem is you can never be sure. All you can do is a heuritic check to verify that a request may be consider as „mobile”. In ASP.NET we can use Request.Browser.IsMobileDevice property that will help to properly redirect requests. Unfortunately it is not magic. It checks if request matches a set of defined rules. That rules are shipped with .NET and stored in „C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG\Browsers” catalogue. It is a smart way I guess but has some limitation. You need to add more devices to that repository every time there will be a new device… not cool.

The good news is that Request.Browser.IsMobileDevice feature is extensible. If you do not want add new device definitions manually you can use one of the open source project 51Degrees.mobi Foundation. The way it works is using a WURFL device database to read latest mobile signatures, so it w can help you be up to date.

Responsive

The responsive approach „adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries an extension of the @media rule” - wiki.

That means that we do not care which device displaying our site – all elements will adapt whether the screen is big, small, vertical or horizontal. All that is handle by client side only - without involving any server detection. So basically it is a metter of framework we gonna use, such as Bootstrap, Foundation or any other. You can read about here. You do not need to use a framework but why bother? Remember that Bootstrap can be downloaded partially as a grid system without styles.

One code to handle all device sizes will definitely be larger. If you do not apply any lazy loading our site may be heavy and slow. No detection means that every element need to know how to behave in any situation - there should be an information if it should be display on give screen size or should be hidden, or should be larger or smaller. This is the main difference developing responsive site. Major part of mobile devices has touch screen that means that buttons should be bigger and easy to handle. The same thing is with drop down, navigation, wide tables with data. It is easy with a mouse but not as easy on the bus holding a phone with one hand and a thumb in a glove.

All that should be known in very early stage developing a web site. Having universal site - friendly to all devices - means a lot of compromises.

What to choose?

Today there are thousands different gadgets with different screen sizes and different input devices. Information that someone displays our site on mobile device doesn't telling us much. Our site can be handled by remote control on TV, by finger on a smartphone, mouse on desktop and so on…

I belive that segregation to desktop and mobile devices is obsolete. It is difficult to distinguish what is mobile. Is my TV mobile? There is an android on it and I do not use mouse on that device. What about smart watches? Spectrum of devices is wider that ever before and that have a major impact on IT sector. there is a large demand for JavaScript developer or UXPIN specialist. New solution are made and new specialization are created. Over last years ASP.NET was moving in direction to seperate between data and presentation developing Web API. A lot is happening also on the side of the front end - every month new JS framework is being built.

There is not much situation when m-site approach will be good fit. If we got old project and we do not want to mess it up, then adding a simple mobile page may be a good idea. The same goes if we exactly know which alternating devices we going to support, for example we targeting only to iPads for some reason. In my opinion m-site or dynamic serving(when server deciding how should data be presented) is not elegant solution really. Call me old fashion but I still belive in principle that server should handle data – client should handle presantation.