This post is to share my experience and work under getting started with ‘Responsive web design‘.
I created a website under the theme of House Of Horrors, and I am not even leaving my desk and posting this right away.
Any suggestions are more then welcome!.As it was a project under ‘Responsive Web design’, so firstly what i did was, i created 3 wire frames of the website as high resolution, medium resolution and low resolution.High resolution layout will target the devices having more then 1024 px width.
Medium resolution layout will target the devices having width between 481px to 1023 px.
Low resolution layout will target the devices having width lass then 481px.
High resolution wireframe
Medium resolution wire frame
Low resolution wire frame
When i was really satisfied with the wire frame i created, the next step was to make things little more alive in the photoshop.
Here are the snaps of the designs created in the photoshop.
High resolution design
Medium resolution design
Medium resolution design targeting tablets and phablets.
Low resolution design
Phew! finally the task was done and i got that coded.
You can have a look at it.