Mobile Web Development
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.