By admin/development, css, mobile/December 01, 2014

MOBILE WEB INTRODUCTION

What is the mobile web? The mobile web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone or a feature phone, connected to a mobile network or other wireless network.

The web itself is not only targeted for the desktop. It should be accessible from any device, as in the internet of things. Tim Berners-Lee once said "The primary design principle underlying the Web's usefulness and growth is universality"

Web Design

Web design consists of three things:

Mobile Design
Adaptive Design
Responsive Design

Mobile Design with Fluid Layout

A fluid layout is a layout that uses proportional values as a measuring unit for blocks of content, images, or any other item that is a part of the WordPress theme. This allows the web page to stretch and contract relative to the user's screen size.

Why proportional layouts are essential for responsive designs?

Whilst media queries are powerful, we are now aware of some limitations. Any fixed-width design, using only media queries to adapt for different viewports, will merely 'snap' from one set of CSS media query rules to the next with no linear progression between the two.

Instead, we want to create a design that flexes and looks good on all viewports, not just particular ones specified in a media query. Which concludes that we need to switch our fixed, pixel-based layouts to fluid, proportional ones. This will enable elements to scale relative to the viewport until one media query or another modifies the styling.

Proportional layouts and media queries

Ethan Marcotte wrote the definitive article on Responsive Web Design at A List Apart – new ways to create web pages that offered the best of both worlds: a way to have a fluid flexible design based on a proportional layout, whilst being able to limit how far elements could flex with media queries. Putting them together forms the core of a responsive design, creating something truly greater than the sum of its parts.

A formula to remember

Ethan Marcotte provided a simple formula for converting fixed width pixels into proportional percentages:

target ÷ context = result

target target font size context font size of containing element

Example:

30px ÷ 10px = 3em

Let's see this formula in action:

h1 a {
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    color: #6C564B;
}

Let's convert the font-size into proportional percentages, provided context being 30px.

14px ÷ 30px = 0.4666667em

The result will look as follows:

h1 a {
    font-size: 0.46666667em; /* 14px/30px */
    text-transform: uppercase;
    text-decoration: none;
    color: #6C564B;
}