Mark Zuckerberg said it, Google said it, even Obama is saying it… Mobile websites are the “FUTURE”. Yet in Zimbabwe (with its high percentage of mobile internet users), we still code using old habits, developing for fixed width viewports…the monitor.
With over 70% of the 1.2 Million active internet users browsing via mobile devices, most of the local websites we browse are not mobile friendly. They are far from mobile friendly. They are fixed width, blocky and pixel based. Even if these websites do have some sort of “Mobile” side to them, this is usually a free plugin which leaves the mobile site looking dull, uninviting and rather sickly. This is not what we want; we want colour, we want graphics, textures…custom CSS.
More and more of us are buying smart and semi-smart phones, capable of browsing the web using Opera Mini – and this is all we need. We can now target these devices using simple media queries, giving us the capability to style elements exactly how we want. And that is what I intend to share with you, my knowledge, my understanding of how it all works; as well as the tools to help you develop your own mobile websites.
- First things first, you will need a developer’s browser… Firefox. Make sure you also download the Firebug extension. Here is a bit more info on how Firebug will help you in your coding adventures.
- Next we need to change our mindset; we almost need to revert back to table-based layouts… NO more fixed width div’s. From now on, all of our div’s will be percentage based. Even our main container div will be percentage based; it will just have a max-width condition that will stop it from expanding after… let’s say 960px.
- So, let’s say we wanted a box (div) that was half the width of the container (960px) div. Instead of giving the element a width of 430px, we would give it a width of 50%, it’s that simple. Now if we were to resize our viewport (browser size) down to 500px (width of a tablet), our box would still be 50% wide.
- Now that I have explained the basic use of responsive coding, let me shed light on how I use it. First, I split my container into 12 columns (I call them spans) – similar to how the 960 grid system splits it. Now each of these columns has a percentage value. E.G Span 1 = 8.33333%, Span2 = 16.6667%, Span3 = 25%, Span4 = 33% and so forth. I then code up the whole site using these span classes, for example:
<div class=”span12”> <div class=”span6”>Left</div> <div class=”span6”>Right</div> </div>
<div class=”span12”> <div class=”span4”>Left</div> <div class=”span4”>Middle</div> <div class=”span4”>Right</div> </div>
Please note that for these percentage values to work effectively, we need to set box-sizing up in our CSS file.
- Now that we have a better understanding of how percentage based widths work, let’s put it into practice. I have set up base CSS and HTML5 documents for you all to use and abuse. Please study these documents in great detail; open them in a browser, notice how the layouts change depending on browser width. Understand why the CSS makes the layouts change.I guarantee that if you spend just 30 minutes studying the code I have put together for you, you will have go from knowing very little about responsive development, to almost being a mobile ninja.Click here to download my responsive HTML5 & CSS files
- And finally, remember to test your new layout by resizing your browser; however, please note that you cannot be 100% sure that your layout will work perfectly on Opera Mini, to do this please download Opera’s Desktop Mobile Emulator. Now we are good to go.
Here are a few resources for those just starting out:
- Lynda.com – Best online training
- CSS – Noob to Ninja
- Web design inspiration
- Awwwards.com – Best website
Good luck and happy coding. I look forward to seeing some amazing mobile websites hit the Zimbabwean web space. If you have any questions, please feel free to ask them below, I will try my hardest to answer them ASAP.
This guest article was written by Rupert Byers, a local web designer & developer who has about 7 years on experience in the web industry. Aside from from the web Byers says he enjoys reading, cooking, fitness, design and minimalism. You can check out his company’s website here.