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 :)
Zurb Foundation is one of a handful collection of frontend Responsive frameworks out there. However, to get your website to be really resilient, you should start from the server side. There’s a slide show here by Yiibu covering all the aspects why being responsive starts from the server side part. Keep in mind that frontend Responsive frameworks does not actually help with optimizing the images your clients will download nor do it will strip HTML fragments that shouldn’t be included, it simply hides them with CSS, but with some clever JavaScript, you could take them off from DOM but then again that’s more work for handsets with minimum CPU power.
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.
For the purpose of this Techtorial, we’re going to build a simple news reader application for my friend’s Tech Blog DailySocial.net. We’re going to extract contents using only frontend technologies, JavaScript to be exact. There will be no caching (persistency) at all, you are welcomed to fork and do your own implementation, you could try to persist by using Local Storage or even cookies (beware of the 4 KB limit for this).
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
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.
Now the footer is done and you’ve got a working layout that is responsive and ready for some JavaScript manipulations.
The data source comes from DailySocial’s JSONP endpoint. If you don’t know what JSONP is, there’s a good reading about it here. Because of the nature of JSONP, all we gotta do is just create a callback function in JavaScript and include a script from DailySocial’s JSONP endpoint after your callback function is declared.
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!