Make Your Web App Mobile Ready: 4 Easy Things to Do Right Now

It can be really challenging to build a web app that displays well on mobile devices as well as desktop and laptop computers. But there are a few easy things that you can do right away to make your web site much more mobile-friendly.

Add a Meta Viewport Header

One of the easiest thing to do: add a meta-viewport header.

Web sites initially built to display on desktop computers will display with really tiny text and features on a smart phone. That’s the default display mode of mobile browsers. But you don’t have to accept that behavior; a web site can be made to display at a much more readable size simply by adding a ‘<meta name=”viewport”…>’ to the head of the HTML document like this:

1
2
3
4
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Web Page</title>
</head>

Desktop and laptop computers with larger screens ignore this header, but smart phones and tablets recognize it and display the page at a size that’s appropriate for the resolution of the device.

The compromise here is that websites that displayed small without the meta viewport header will now have to be scrolled to see different parts of the content on smaller devices, but in many cases the user would zoom first then scroll anyway to search for the features they want if this viewport tag was not used. It’s just a simple convenience that the text is set to the correct size on initial display.

Use Media Queries

Media queries provide a way of specifying different CSS styling for different sizes and types of device – mobile and desktop. Getting media queries right for a web site of any complexity, for devices of many sizes, can be a long, hard job. But sometimes a few simple things can be done to get started in the right direction.

If you’re working on a site where content flows to fit the width of the screen and you’ve followed the widely used practice of wrapping all content in a “wrapper” div, then it can be easy to adapt the page to different device sizes. For example you might want to limit the width to a fixed size for desktop but simply bring it to 100% of the screen size for smaller devices. CSS Media Queries provide a way to provide different styling for different size device screens.

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
    #page_wrapper {
        width: 800px;
    }
    @media screen and (max-width: 800px) {
        #page_wrapper {
            width: 100%;
        }
    }
</style>

The above “@media” query defines a “breakpoint” at 800 pixels width: any screen with width larger than 800 pixels will use the default style that wraps the page in a 800px wide div, 800 pixels or smaller will use the media query that sets width to 100%.

Choosing breakpoints for media queries can be an art. One approach would be to select breakpoints at the rough size of some mobile devices (320px for phones, 800px for tablets). Or select sizes based on prominent features in your website, like the size of images shown in the pages. For example, a multiple column display for a desktop app can become single column stacked display on a mobile device. Or try selectively hiding some features (headings, images, extra explanatory text) on smaller devices – use “display: none” in styles within a media query to hide their wrapping divs at selected breakpoints.

A lot more tweaks generally have to be done in the end, but a single, simple breakpoint with some simple geometry and visibility changes can be a good start.

Use Form Field Types

You may be familiar with form field types like “text”, “option”, and “password”, but HTML5 added a number of other types for editing text with specific meanings: “url”, “email”, and “tel” are examples. Using these more advanced field types can significantly improve the usability of form fields for mobile devices.

Mobile devices will generally provide different keyboards for the different field types:

  • a numeric keypad for phone numbers
  • a prominent “@” key for email address fields
  • “/” and “.com” keys for website URLs

Browsers that don’t support HTML5 forms use input type “text” as a default for input types that they don’t recognize. Current mobile browsers almost always support the newer HTML5 fields.

Here’s an example of a form with fields for some of the basic field types:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<fieldset>
    <label>First Name: </label>
    <input name="firstName" required="" type="text" autofocus="" placeholder="First Name..." />
    <label>Last Name: </label>
    <input name="lastName" required="" type="text" placeholder="Last Name..." />
</fieldset>
 
<fieldset>
    <label>Telephone: </label>
    <input name="telephone" required="" type="tel" placeholder="Telephone #..." />
    <label>Email Address: </label>
    <input name="emailAddr" required="" type="email" placeholder="Email address..." />
    <label>Web Site: </label>
    <input name="webSite" required="" type="url" placeholder="Web Site..." />
</fieldset>
 
<fieldset>
    <label>Range: </label>
    <input id="rangeFld" max="10" min="1" type="range" value="4" />
    <span id="rangeValue"></span>
</fieldset>
 
<fieldset>
    <label>Choose a Date: </label>
    <input type="date" value="2018-01-01" />
    <label>Choose a Time: </label>
    <input type="time" value="12:01" />
</fieldset>

While you’re at it, provide placeholders with explicit “placeholder” attributes in the <input> tags – the gray text that appears in a form field before any data has been entered in it. These can give users an additional visual cue about what can be entered in each field.

Optimize Images that are Displayed in the Website

Large images take a long time to load, and mobile devices tend to be more limited in bandwidth when they’re not close to a wifi network.

Images taken with modern digital cameras or downloaded from photo sites such as unsplash.com are generally very large (often on the order of 6000×4000 pixels, 5-7 Megabytes in size). If they’re used as-is on a website, they can take several seconds to load.

Tools like Apple’s Preview app can be used to edit the size of images, making them significantly smaller. For example:

  1. Open an image in Preview
  2. Open the “Adjust Size” dialog (Tools > Adjust Size)
  3. Enter a new value for width, say 400 or 600; the height should be automatically adjusted by an appropriate amount to preserve the aspect ratio (preventing the picture from getting stretched)
  4. Save the picture

NOTE: you may want to save originals of the images to start from scratch if they don’t end up look right the first time.

This simple kind of editing can reduce the file size from 1-5 MBytes to about 30-60 Kbytes, reducing display time from multiple seconds to tens of milliseconds.

Many images come as JPEG format; Preview and other photo editing apps allow an image in another format to be saved as JPEG. When saving size-reduced versions of JPEG images, you can specify a reduced quality that reduces the image size measurably more (without sacrificing human-visible image quality).

You can even edit multiple files at once: open a bunch of images in Preview, then select them all with Cmd-A and open the Adjust Size dialog as before. The width and Height fields will say “Multiple Files”; entering a width will adjust all files to the same width, then File > Save menu item will save them all.

TL;DR

Four things to do now to make your web site more friendly on mobile devices:

  • Add a “meta viewport” header to make the content of the web app a more agreeable size on mobile devices
  • Use a few basic media queries in CSS styling to selectively manage size and visibility
  • Use HTML5 field types in forms to take advantage of mobile-friendly usability features
  • Edit and save large images at a reduced size to allow fast download in bandwidth limited environments

References

Using the viewport meta tag to control layout on mobile browsers (MDN)

Quick Tip: Don’t Forget the Viewport Meta Tag
By Ian Yates, 2013

Looking Beyond Common Media Query Breakpoints
By Drew Thomas, Smashing Magazine, 2012

Media Queries for Standard Devices
Chris Coyer, CSS Tricks, 2011 (last updated 2017)

<input>: The Input (Form Input) element – HTML (MDN)

Making Forms Fabulous with HTML5 – HTML5 Rocks
By Pete LePage and Jan Kleinert, html5rocks.com, 2011

Add a Comment