Responsive techniques with websites have been around for a while now. Not many websites here in Indonesia are responsive. Being responsive for me is out of necessity, mobile web traffic is increasing very rapidly and being responsive is the next logical step despite already having a mobile web. It will look good with search engines too
To get into perspective, by making your website Responsive, you start Mobile First. Why? Because mobile version is considered as the lowest fidelity in terms of the Information Architecture and also from a visual point of view. By doing this, you can actually devise a scale of priority and get to know your products/features deeper. If you’re still not sure, you can always A/B test it.
Before going through, these are the things you will need for later:
- Zurb Foundation 3.0
- Code editor, Smultron will suffice for Mac users
- Some HTML5 Knowledge
- Github repository for the source code in this tutorial is available here
We’re gonna start by building the layout. Every layout elements in Foundation is made up of grids. Every row, there are 12 columns with a default gutter size of 30 pixels. The interesting part of Foundation 3.0 is that now it provides mobile columns. Mobile columns spans 4 columns and it will be really useful in cases like when on the Desktop the first column is 4 columns wide, the second is 8 columns while on the mobile version you’d want it to be equally divided columns. You can create your own custom Foundation by the way.
Starting up we want a layout with a website name at the top, articles at the belly, sidebar on the right and some fancy notes for the footer.
You can see how easy it is to do the columns. Of course, it’s just a single row occupying the whole width. Let’s make it more interesting by dividing into 2 belly columns consisting of the articles and a sidebar.
When you resize your browser, the layout will automagically be adjusted with the screen resolution. Looking the code above, I encourage you to hack the left column by adding a
mobile-three class and a
mobile-one class on the right. The behaviour of the layout changes by persisting the sidebar to always be on the right. Doesn’t look good right? Revert it.
We’re done! So quick and painless to finish this Techtorial right? There are a lot of improvements in store for this DailySocial reader. On the next tutorial, we’re gonna cache our JSON into the browser’s Local Storage. So for now, have fun with the codes!