Software Programming

Kunuk Nykjaer

From json data to responsive design example

leave a comment »


Synopsis:

Somebody (your boss or customer) comes to you and says:
‘Create a web page which displays this data and the design must be responsive. I will give you a REST API to a service.’

If you work with front-end tasks, you probably would now be thinking JavaScript templating, Media queries and a JavasScript library to work with the REST API (maybe jQuery?).

In my previous blog I gave hello world code demo of Handlebars. I will continue with Handlebars and this time use data from an external source and also think in responsive design.

All these wonders (freely) available in the Internet available. I Use:

  • WordPress.com for blogging
  • Gist for sharing code samples
  • Codepen.io for making web page prototypes
  • Various Javascript libraries to help me ‘get the job done’


For this example I will use.


 

Demo

Try to resize the screen width and see how the content adapts.


 

Data structure

This is the given data source structure which is to be parsed and rendered on a web page. A list of news with title, date, link, author and categories.


 

Styling

Mobile first approach. Style for smallest device first and gradually adjust the styling for the larger devices. The breakpoint sizes are the same as used in the Bootstrap 3 framework.

Literally make your browser the same width as the smallest device. Start the styling with that size. You will notice there are not much space. Usually that means you use all the width space available and stack the items below each other. You focus on the the essential which is (usually) the content. You hide or minimize navigational items, minimize images, cut part of content or designs which are less important.
For the increasing screen sizes the items can be aligned horizontally and there are more rooms for adding ’empty’ spaces, larger images, bigger menus. That’s the usual approach.

As you go up in screen size override the styling. Here I have added debug information of the target device.
e.g.

#rendered .title::after {
    content: ' - Phone';
}

I start with 100% width (default value). As the devices increases the text size increases and the width percentage reduces.


 

Markup

This is more or less the same as my Helloworld example. The markup is the template.


 

Scripting

Here I fetch the data and parse it to the template and add a couple of Handlebars formatter helpers. In case something goes wrong I use stub data to render the display.

 

Advertisements

Written by kunuk Nykjaer

January 10, 2015 at 10:32 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: