IVAN STANTON

Computer Nerd

General Guidelines for Mobile Site Building

Tip Number 1: Meta Viewport

Make sure to include this tag in your <head>. It will automatically change the size of the text on your site depending on the size of the screen. Otherwise, your text will look really small:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Tip Number 2: Optional sidebars

Sidebars take up vertical space on the screen. Generally you don't want the website to scroll in both directions, and you want there to be enough space for the text on mobile. So don't include a sidebar on your website. If you must include a sidebar, make sure that it can be shown or hidden using a button. This code can be very useful:

<script>
if (document.getElementById("sidebar").style.display == "none") {
 document.getElementById("sidebar").style.display == "block"
}
else {
 if (document.getElementById("sidebar").style.display == "block") {
  document.getElementById("sidebar").style.display == "none"
 }
}
</script>

If you are padding your text areas to add whitespace, I recommend changing the padding scheme using a @media query when your site is smaller/larger:

.textcontainer {

    padding: 30px 30px 30px 30px;   
}
@media screen and (min-width: 1000px) {
    padding: 25% 60px 60px 25%;
}

In general, anything large and vertical should be either optional or removed on mobile.

Tip 3: Mobile first

Design your website for vertical smartphones first, then add special features to make it better on mobile. This helps your site load faster because smartphones will load slower than desktops, especially if they have to load the special "exceptions" made for mobile devices.