Print this Section

  
  

Mobile Web Development

Smart phone.

All of human knowledge in this thing?

First generation computers relied on vacuum tubes. These early computers were typically very large, sometimes as big as a room, and relatively slow by modern standards. As Moore's Law has continually progressed over the years we've now got nearly the breadth of all human knowledge available at our fingertips every day. They've gone by a few different names over the years but typically when we say Smartphone we recognize the distinction between these small hand-held devices and what is just a mobile phone. Typically a smart phone has much more capability in what it could do compared to a mobile phone. Now (2015) we have a wide range of mobile devices consisting of smartphones, tablets, and watches that access websites and run software applications.

Device Resolutions

On a desktop computer, the user can typically set a resolution that works best for them. The monitor itself may have a specific aspect ratio in which many specific resolutions may apply. Typically a maximum resolution will make items smaller, but clearer. If you use an resolution smaller than the maximum supported items may look larger relatively but possibly less clear. In the late stages of CRT monitors' prevalence most monitors seemed to only go as high as 1024x768 pixels but today many modern High Definition (HD) monitors display at 1920x1080 pixels or higher.

Smartphones (and tablets) come in a wide range of sizes and resolutions. Many smartphones have resolutions smaller than 1024x768 (an old CRT monitor) but since the phone's size is much smaller than a CRT's screen size we get very clear images even at these smaller resolutions.

Responsive Design with Media Queries

Using Media Queries is a technique that allows certain CSS to apply under specific circumstances. This helps designers of websites to adjust CSS properties of the site to create a better browsing experience for the user.

To start using Responsive Design:

  • Set the Viewport using into the <head> section of your HTML page. This sets the width of the browser window for the Media Query.
  • Create a Media Query to hold a set of CSS that can apply at specific ranges. W3C Schools suggests using a Mobile First approach so that designs can start small and get more complex as more room is opened up at larger widths.

Mobile First Example

This examples shows a bar that is 20px tall and changes colors based on the width of the browser. It starts as green and changes as the width gets larger. Try resizing your browser window to see the bar change colors.

 
    <style>
	    .colorChanger { width:60%; margin:0 15%; height:20px; background-color:green; }
	    @media only screen and (min-width:600px) {
		    .colorChanger { background-color:orange; }
	    }
	    @media only screen and (min-width:900px) {
		    .colorChanger { background-color:blue; }
	    }
	    @media only screen and (min-width:1200px) {
		    .colorChanger { background-color:red; }
	    }
	    @media only screen and (min-width:1500px) {
		    .colorChanger { background-color:yellow; }
	    }
    </style>

    <div class="colorChanger">
	     
    </div>

Listing 11-6. Code for resizing sections of a page with browser size.

Choosing Breakpoints

In the above example we wrote Media Queries at fairly random intervals (every 300px) to achieve the color change. These breakpoints aren't really standardized and requires the developer to use some judgement as to when a breakpoint is needed. In a mobile first design a developer may choose to add breakpoints to open up the page for more content or to rearrange the design into a 2 or 3 column layout.

It is a free and open internet to all. It is not suggested to write media queries to target specific device resolutions. Instead, write media queries along the range of width that make it look good across devices in the range. It may take actually testing these devices to make sure it performs as intended.


TOP | NEXT: HTML/CSS Appendix