Thursday, September 5, 2013

Responsive Design in real life

Hey everybody,
Sorry for being a bit quiet lately, we just had a lot to do in order to sort out our website layout to make it up to date and respond to different devices.
For those who did not read our previous posts, I would say if you want to get a better understanding on responsive design, read our post "Responsive Web Design - Getting started".
So after several weeks of work for our designer and developers we are almost there, there are still a few pages left to complete but the major part is done.
So, let's have a look. Full screen version (for all PC, Mac users with screen resolution higher than 800x600):

Now, when we open the same website from a tablet or on a smaller screen we are going to hide some less important bits of information from the screen to free space up for the rest:

And now let's go even smaller (phones):

As you can see the layout is altered to have cellphone friendly look, to give users enough information on the screen and avoid unpleasant zoom-ins to actually read something.
So go on guys and check it out for yourself, this particular example is list of best bars in Amsterdam.

In our next post we will talk about a few tricks we used in order to overcome some problems we faced, like google maps implementation, identifying screen resolution in jquery to apply different functionality etc.

Your GPTeam


Post a Comment