How to Use Google to Shrink Websites for Mobile Viewing
Analyze how Weblight works., Test site changes with Weblight., Recognize the limitations., Keep mobile device limitations in mind., Use a Content Management System (CMS) service., Test mobile device screens using desktop software.
Step-by-Step Guide
-
Step 1: Analyze how Weblight works.
Weblight is an algorithm created by Google to provide users with faster and lighter page loads when in poor network conditions.
This means that Weblight has no user interface and operates on the backend.
Pages are stripped of their more complex elements, providing a stripped-down, lightweight experience, rather than one explicitly optimized for the mobile platform. -
Step 2: Test site changes with Weblight.
On your mobile device, simply append your full site URL to the end of the weblight address (e.g. if your website is "mywebsite.com" then you enter http://googleweblight.com/?lite_url=http://mywebsite.com).
The page will load a simplified but functional version of itself.
With the removed elements, some sites may appear much better on mobile device screens. , Keep in mind that this is not an explicit converter tool designed for user interaction.
While manually entering the website can be used in a pinch, Weblight is designed for speed, not usability. , Mobile devices share a few aspects that make them distinct from their desktop counterparts.
These core features should be the main considerations when creating a site for mobile consumption.
Small screens and verticality:
Although screen resolutions on mobile devices are constantly improving, the size and form factor remains a concern for site design.
Designing a site into a single column layout is best for phones (tablets can often use desktop sites without too much issue).
Touch interfaces:
Page elements should be placed with the size of a finger in mind.
Elements that utilize mouseover should be minimized or redesigned for touch (e.g. dropdown menus).
Data speeds:
One of the great advantages of mobile devices is usage outside of wifi range, but data connections are typically slower and less reliable.
User interfaces (UI) should remain simple and content should be visible and accessible.
Too much clutter will bog down load times and make navigation difficult. , For those developing with fewer resources, using a CMS service like Wordpress or Squarespace is a great options for low-cost, user-friendly mobile design.
Themes that utilize responsive web design will provide the easiest template for a mobile site.
Responsive web design is a theory of web design that promotes the use of fluid design elements to allow smooth transitions of design and usability across platforms. , There are a number of free web applications that allow you to emulate mobile devices to test website aesthetics and functionality.
Using these tools is as easy as selecting the desired test device, then entering to target website to preview.
Most will include tools for variables like screen orientation, pixel density, or even browser selection.
A few popular examples are:
Chrome Device Mode Emulator mobilephoneemulator.com screenfly (a subset of quirktools) mobiletest.me (paid membership) -
Step 3: Recognize the limitations.
-
Step 4: Keep mobile device limitations in mind.
-
Step 5: Use a Content Management System (CMS) service.
-
Step 6: Test mobile device screens using desktop software.
Detailed Guide
Weblight is an algorithm created by Google to provide users with faster and lighter page loads when in poor network conditions.
This means that Weblight has no user interface and operates on the backend.
Pages are stripped of their more complex elements, providing a stripped-down, lightweight experience, rather than one explicitly optimized for the mobile platform.
On your mobile device, simply append your full site URL to the end of the weblight address (e.g. if your website is "mywebsite.com" then you enter http://googleweblight.com/?lite_url=http://mywebsite.com).
The page will load a simplified but functional version of itself.
With the removed elements, some sites may appear much better on mobile device screens. , Keep in mind that this is not an explicit converter tool designed for user interaction.
While manually entering the website can be used in a pinch, Weblight is designed for speed, not usability. , Mobile devices share a few aspects that make them distinct from their desktop counterparts.
These core features should be the main considerations when creating a site for mobile consumption.
Small screens and verticality:
Although screen resolutions on mobile devices are constantly improving, the size and form factor remains a concern for site design.
Designing a site into a single column layout is best for phones (tablets can often use desktop sites without too much issue).
Touch interfaces:
Page elements should be placed with the size of a finger in mind.
Elements that utilize mouseover should be minimized or redesigned for touch (e.g. dropdown menus).
Data speeds:
One of the great advantages of mobile devices is usage outside of wifi range, but data connections are typically slower and less reliable.
User interfaces (UI) should remain simple and content should be visible and accessible.
Too much clutter will bog down load times and make navigation difficult. , For those developing with fewer resources, using a CMS service like Wordpress or Squarespace is a great options for low-cost, user-friendly mobile design.
Themes that utilize responsive web design will provide the easiest template for a mobile site.
Responsive web design is a theory of web design that promotes the use of fluid design elements to allow smooth transitions of design and usability across platforms. , There are a number of free web applications that allow you to emulate mobile devices to test website aesthetics and functionality.
Using these tools is as easy as selecting the desired test device, then entering to target website to preview.
Most will include tools for variables like screen orientation, pixel density, or even browser selection.
A few popular examples are:
Chrome Device Mode Emulator mobilephoneemulator.com screenfly (a subset of quirktools) mobiletest.me (paid membership)
About the Author
Ann Myers
Ann Myers has dedicated 3 years to mastering education and learning. As a content creator, Ann focuses on providing actionable tips and step-by-step guides.
Rate This Guide
How helpful was this guide? Click to rate: