Hi there.
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
High resolution wire frame. for devices having greater then 1024 px width.
Medium resolution wire frame
Medium resolution wire frame for devices having width between 481px to 1024px.
Low resolution wire frame
Low resolution wire frame for devices having width less then 481px..
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
High resolution design created in photoshop targeting high resolution devices.
Medium resolution design
Medium resolution design targeting tablets and phablets.
Medium resolution design targeting tablets and phablets.
Low resolution design
Low resolution design targeting hand held devices.
Phew! finally the task was done and i got that coded.
Priyank Verma 
Leave a Reply