Mobile Web Design: Mobile First, Responsive, Adaptive or RESS?

Today, Mobile First is a very popular mobile development concept when mobile version of the website is prioritized above the desktop version. At Intersog, we're always driven by client's project goals and objectives, and we tend to suggest what will be best suited for this or that particular business and use case. For instance, desktop remains the main working tool for many users while at home and is used for most of complex operations such as completing check-out, submitting data, transferring money, etc. Mobile is mostly used for secondary functions such as saving data or getting information. If Instagram integration is a mission critical feature in our client's software product, we should definitely go with the Mobile First approach and design a mobile website first, as most of traffic will undoubtedly come from the mobile devices. Also, when we see our client has a well optimized website with sustainable high quality traffic and there's no need to actually redesign the existing solution, creating a standalone mobile website is something we'll most likely recommend in our proposal. In this case, website will remain the main online property, while mobile website will address the needs of / better serve the mobile audience. Read about mobile app development.

The advantages of a standalone mobile website are pretty self-evident:

• Autonomy - you can edit desktop and mobile content separately;
• Fast load time - you don't have to use complex animation and "heavy" features that always increase site load time;
• Convenient navigation - your website will present content in a mobile user friendly manner, so you won't lose your mobile traffic.

However, mobile website has its bottlenecks as well:

• Support of two sites - you'll have to spend extra time and resources supporting two separate websites. In many cases, organizations update their desktop website as the main outlet, but forget / ignore to update their mobile site. As a result, the content used in both sites isn't synched and delivers different non-coherent messages, which is bad for your online branding!
• Increased page load time as a result of automatic page re-direct to the mobile version on a smartphone;
• SEO issues - because each content page has two URLs (a desktop and a mobile one), it'll lower down your search engine marketing efficiency;
• Different mobile versions for different devices - to be effective in mobile, you have to optimize your mobile website for each particular screen such as tablet or retina, which adds extra work and investment.

In case of adaptive design, your website will get adjusted to any screen size while re-shuffling positioning of content blocks, changing fonts or sometimes replacing content or functional blocks.

In case of responsive design, the website relies on flexible and fluid grids, i.e. changes fluidly and responds to fit any screen or device size.

One more way to optimize your website for mobile is to use responsive design + server side components (RESS) for creating CSS and HTML for different devices. As a result, you create two website codes - one for desktop and one for mobile, and the right code is selected automatically depending on the device. It allows for significant increase in content load speed.

Advantages of RESS:

• Single URL - it allows for seamless content sharing;
• Legacy - navigation and content structure are the same for all devices, which increases user loyalty and engagement with your site content;
• Single site support - you update content once and it looks great on all screens;
• Automatic adjustment to devices other than mobile such as game consoles, TV sets and tablets.

Disadvantages of RESS design:

• Heavy pages - developers often forget to optimize images for mobile devices or eliminate unnecessary scripts. As a result, the pages are cumbersome and heavy-weight;
• Bad usability as a result of wrong user behavior scenarios considered at the site architecture level.

To conclude with, standalone mobile websites are best suited for situations when companies have enough resources to manage numerous websites and can ensure the mobile site will always be synced with and mirror the desktop version. Mobile websites are really good for sites that are not likely to change / update often, i.e. landing pages or corporate sites. In all other cases, it's recommended to use adaptive or responsive design that allows for immediate (reactive) responsiveness to events and changed functionality. Adaptive design is best suited for digital media sites or websites with frequent structural content changes. Oftentimes, adaptive design requires full desktop site redesign and code scrutiny, therefore, the choice of the right mobile web development partner is so important for the future success of your entire mobility strategy!

Hire talented developers from LATAM, Canada, and Europe

Effective website is a flexible tool that adjusts quickly to any user behavior scenario. To be effective, your website must be designed with full consideration of such factors as variety of mobile screens and devices, user behavior cases, touch functionality, size of images and load speed, animation and UI, testing in numerous browsers and on as many relevant devices as possible, etc.

Without it all, it's just an awkward mix of CSS and images!

On April 29, Intersog will moderate panel discussion within Mobility group at AITP event in Chicago. Feel free to register for the event if you want to see guests from Aon, Citi, MillerCoors, Northern Trust and United Airlines sharing their mobility best practices and examples.