Now that Google has placed a higher emphasis on mobile friendliness within it’s SRP rankings, it has become more important than ever for websites to be just that.
Achieving this can be daunting for many developers, especially those who have not spent much time around mobile applications.
In the following guide we will break down a few key elements and attempt to simplify the entire process.
1. Viewport META
Add the viewport to the head of your HTML document:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0 ” />
Why?
The viewport META tag is used to set up the viewport (visible area) of mobile devices.
There are several content attributes that can be added to this, but today we have used the most important.
The width=device-width tells mobile devices to fit the page to the screen size. By setting device-width instead of a fixed width, the web page will be as wide as the mobile screen at all times, and adjust when a user switches between portrait and landscape orientations accordingly.
By setting the initial-scale to 1.0, we ensure that certain mobile devices such as IOS do not zoom into a page on load.
2. Header, footer and content area
Remove all width declarations from your header and footer as well as your main content area or wrapper CSS, and add the following to each:
width:100%; min-width:350px; max-width:1024px;
Why?:
The max-width value can be set as high as needed, this will be the width of your site when the user is viewing on a large screen. It can be removed altogether if you intend on having a liquid layout.
The standard width of your website will be 1024px (in this case) as set by the max-width property.
When the viewport is smaller than 1024px, the page width will shrink to match the viewport thanks to ‘width:100%’.
3. Other page elements
Using the above techniques, we have guaranteed that the main frame of the website will not exceed the mobile viewport.
All other page elements can not exceed 350px (the minimum set). You will of course need many of these elements to be larger than that, and thus a responsive option is best.
<!– Image to display in HTML –>
<img src=”picture.jpg” width=”900″ height=”400″ />
/* ———- Mobile CSS ———- */
@media only screen and (max-width : 900px) {
img{width:100%; min-width:350px; height:30%;}
}
In the above example, the image HTML has a set width that may be larger than the mobile viewport.
When the page is less than the image’s 900px width, the image will automatically fit to the width of the screen and scale accordingly.
You can apply this concept to almost all page elements, simply by setting the item’s width to a percentage when the page becomes thinner than it.
