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>
Or
<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
~ The documents that I have put together are a mash up of Foundation 3.1 – a responsive framework, Normalize.css – A modern, HTML5-ready CSS reset and HTML5 Boilerplate – A frontend template.
- 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.
Share
Home
35 comments
Couldn’t agree more. Another brilliant alternative to the Foundation grid, is Twitter Bootstrap. These packages make responsive web design, prototyping and development an absolute breeze.
Great article Cuzzie, Rupert Byers
Interesting angle.Nice article
thanks 🙂
a decent use of javascript would be beneficial too, especially with the ease of use of frameworks such as jquery.
Great article. Finally, we see code!
responsive design also has its downside. Its reliance on CSS3 media queries means that it is relevant only when targetting devices & browsers(PC & mobile) that support it. On the web, compatibility issues will always haunt us, it seems. It is certainly the future, as I am sure modern browsers & devices/both will be accessible to more people with time.
Thank you all. Its a real pleasure to share what i know. @tinmann:disqus – Yes, I agree, but in these modern times, who uses IE6-7, those are about the only mainstream browsers that will not pick up media queries.
The main point i was trying to drive, is that Opera mini, which most mobile users in Zimbabwe have, picks this up (media queries). Therefore we can now start developing good looking websites for the larger portion of Zimbabwean web users (the mobile users)
Dont get me wrong,I have nothing against it at all and will reiterate that its a good article. We just have to bare in mind that smart browsing is not available for everyone.
One will have no choice but to segment one’s audience. All up to you as the developer. You can also use Progressive Enhancement as part of your framework so that you do not exclude other audience.
Thank you. Yes you are 100% correct, we should be using progressive enhancement in our workflow. Thank you for adding this.
Hey all, on a side note, to view your mobile styling ( max-width:320px) on Firefox, you will need to temporarily disable the “navigation menu” in your browser. More info here: http://css-tricks.com/forums/discussion/comment/65119/#Comment_65119
Use media queries
Once upon a time, “responsive design” was know as “fluid layouts”… I beg to differ with author on 1 point: we want less graphics on mobile please – most of us pay by the MB. Depending on your demographics, I’d say forget about smart phones and make sure you target 320×240 – that is the most common resolution on mobile (or 240×320 in landscape). Make sure your (mobile) site looks good in that.
Another handy trick is to reflow your divs by making them display:inline-block and width:100% in your mobile CSS, creating a vertical layout which is easily navigable on mobile (top-bottom, with no sideway motion).
Not necessarily, fluit layouts were still pixel based ( http://css-tricks.com/examples/PerfectFluidWidthLayout/ )
If you notice with the documents I created, when a user does get below 320px, the navigation does go vertical. Its mainly horizontal for larger smartphone and tablet devices. To view it as a mobile device, remember to disable the navigation menu as in my post below.
Nope; if it’s px-based, it’s not fluid by definition. Fluid is when you use em or % to define width (or height). The possible caveat for px is for min-width if you don’t want your elements to shrink beyond a certain size (which totally defeats the purpose for resolutions smaller than your min-width. I’d call layouts with unreasonable min-widths [say, greater than 240] semi-fluid). Your link is a great example:it is fluid for screens between 720 and 1280px, but fixed beyond those bounds
I did a google search for “Fluid layout” and this link was directly above the one you provided http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/. You might notice the lack of px‘s
I suppose it just ends up beinga typical, you say potatoe, I say patatoe. It all depends where we get out definition from.. W3C calls them liquid ( http://www.w3.org/TR/WCAG20-TECHS/G146).
At the end of the day, it does not really matter much, as long as you are providing a good looking/readable website for your visitors.
Lol. I also think the same. But you know how it is with web guys and the new generation of developers. Buzzwords! Web 2.0, the cloud etc were all names of new things that already predated them.
Various representations of System designs are also called “wireframes”, these days.
Back to the topic. Responsive design is a kinda fluid layout with the secret sauce being CSS3 media queries. They allow actual logic within the style definitions
ha ha ha.. yes. LOL
Next it will be RWD 2.0 !
Responsive design is all gravy, but I’m in the camp that it’s better to have a mobile site built from the ground-up specifically for mobile, with mobile-specific templates/CSS/
image resources. It’s not too hard to pick up mobile user agents and redirect to mobile site (with a link to switch to desktop version – something that Responsive designes sorely lack. You can’t break free of @media, even though modern smartphone browsers are perfectly capable of zooming in/out of the full website)
You are right, its a tough one, many large websites do deploy this type of stratergy as it provides the right files for the right device, however, for those just developing a simple website, its an easier and more cost effective route to just go responsive, you then know that your website will look good on all current devices as well as future ones.
The thing is, RWD does not need to pick up mobile user agents because it works as is. We live in an age where opera is the norm. And as stated in the article, thats just fine, we can work with that. RWD can work with that.
wireframes & media queries are very much two different things. CSS3 & media queries are very different two. Why I say this is because most Zim developers use Joomla or wordpress which may not be HTML5 or CSS3 but can be responsive.
how about you help ‘us’ as a country by redesigning http://www.rg.gov.zw/index.php/forms/passport , apparently they require us to ‘upgrade’ our browsers to IE
not too sure i understand the downvote…
even the US gvt has websites that only work in IE
and… if its down by the US then its gotta be ok?
of coz not, just trying to throw some awareness out there, its very inconvenient and it would be interesting if you could ask the developer why he did that so that we can fully analyse the situation
fair enough… but i still think it would be good for us to surpass those establishments and be the best that we are, maybe you misread my post, but the author is one good designer if what he says is anything to go by, and we could benefit if the right person was given the job, because honestly the design of our home affairs website needs some serious re-working, if not re-designing.
A redeisng may be need yes, totally agree. My point to share is that the web is now so dynamic even the CSS of sites can target specific browsers but in the next year or two if it has not already happened you can already design, code, and browse your one code on all browsers, IE, FF, GC etc
http://www.teqno-magazine.co.zw
Cool article man, Nice.
Thank you 🙂
Thank you for sharing this. Please pick the barin 🙂
check out this local site icapatrust.org
I hand coded it 2 years ago, and recently recoded to full HTML5/CSS3 so its not just Zimbabwe, but the world at large thats not coding for mobile first web browsing.
At the same time you may want to check my personal website http://www.meh-hikwa.com
its fully responsive, so your point about Zim not coding for mobile first is just an observation of a few sites which have not caught on to the new and forever evolving field of web development
Its nearly 2 years but I think I couldn’t let let this one slide by. Thank you for show casing your stuff by providing the link. The site is fully responsive and its good. You did not hand code this website that I will you tell. You used a responsive framework. You just customized the responsive framework and am not saying that it cant be done. The site is good but am getting Error 404 when I click the the M logo from any page other than the home page. Am not at liberty to show you a hand-coded responsive website but what I will tell you is that its difficult and very hard.
Thank you.
To my surprise, this very website is actually not responsive.
[…] adjustment in ranking means that websites that aren’t mobile friendly have a lower priority on a search results list, and Google will also specify whether a site is […]