Module 3: Creating an effective mobile UX

3.1.1 Assess your mobile site

Before you introduce the principles of UX design to your clients, familiarize yourself with different site-development options and high-level pros and cons of them.

There are three main techniques for implementing a website that can handle view screens of all types and sizes. Here’s a chart comparing the three methods:

  1. Responsive web design: Serves the same HTML code on the same URL regardless of the user's device (desktop, tablet, mobile, non-visual browser), but can render the display differently (i.e., “respond”) based on the screen size. Responsive design is Google’s recommended design pattern.
  2. Dynamic serving: Uses the same URL regardless of device, but generates a different version of HTML for different device types based on what the server knows about the user’s browser.
  3. Separate URLs: Serves different code to each device, and on separate URLs. This configuration tries to detect the user's device, then redirects to the appropriate page using HTTP redirects along with the Vary HTTP header.

 

Image caption

Separate (m.dot)

Pros:

Useful if your clients have a distinct mobile-only experience vs. desktop, typically faster load times vs RWD

Cons:

Two separate properties to maintain and update; difficulty to provide a customer experience for tables and phones; limited functionality

 

Responsive (RWD)

Pros:

One codebase/canonical URL; generally easier to maintain and more cost-effective; automatically repositions elements based on device (client-side)

Cons:

Usually slower load times vs. separate; same experience across devices means limited-opportunity to cater UX to different user needs

 

Adaptive (AWD or Dynamic)

Pros:

Highly differentiated and optimal experience based on screen size, device, and OS; usually faster load times than RWD (server-side)

Cons:

Additional development resources and budgets required for maintenance due to multiple codebases

 

 

Google does not favor any particular URL format as long as the page(s) and all page assets are accessible to all Googlebot user-agents.

It also a good practice for you to visit your clients’ mobile sites and experience them for yourself. Visit a client's mobile site and complete a conversion. It's the best way to familiarize yourself with the site experience and will help you identify which principles to focus on.

Based on that assessment, recommend the principles that will make your client’s website mobile-ready. How do you do that?

 

Image caption

UX evaluation and optimization suggestions

Pre-designed widgets

Programming templates to help build your client's platform

PageSpeed

Technical evaluation on your client's mobile site and app performance

Prototype project

Prototype of the mobile site and app

Certified Partners for UX implementation

*if necessary

 

 

  • Test My Site: Test My Site by think with Google allows you to find out how friendly your site is and provides suggestions for improvements. Test My Site is powered by PageSpeed Insights
  • WebPagetest: WebPagetest is an online service that enables a set of performance tests to be run for your site using a variety of networks and host locations. 



 
Was this article helpful?
How can we improve it?