Responsive web design is a way of creating websites so that the pages you design display beautifully to the end-user no matter what device they are viewed on.
The problems it solves are things like horizontal scroll bars when the user makes a web browser narrower, having to "pinch and pan" the screen when viewing on a mobile devices, or not being able to use certain functionality as mobile do not have "hover" functionality.
.net magazine listed this as the number 2 web design trend for 2012 (behind progressive enhancement) and Mashable has called 2013 "
The year of responsive web design".
At NBS we try and be innovative and respond quickly to new technology. So responsive design was important to us when we were asked to develop the
RIBA Plan of Work 2013 website, which was launched in March this year.
The website looks great on a traditional computer (as you'd expect)...
 |
| On a lap top |
Try the same website on an iPad horizontally and it looks like this...
 |
| iPad horizontal |
Tilt the iPad vertically and it looks like this...
 |
| iPad vertical |
On an even smaller screen, the exact same web pages are smart enough to deliver a different user experience. So on a iPhone horizontally the page changes to...
 |
| iPhone horizontal |
...and then finally, crunching the pixels down to the pretty much smallest possible screen size, on the iPhone vertically it still displays the key information in a useful, user friendly way...
 |
| iPhone vertical |
This approach to web design is something that we are now taking into all new projects. We will be re-launching theNBS.com next year with a fantastic new user experience. So expect to see more of this in future from the NBS R+D team.
And of course a little shout out to the interface designer who actually did this work -
@StylizeRuss (also responsible for the
BIMBingo sheets).
 |
| Sketch showing considerations of the fluid grid and CSS rules |
Hi, I love your post. I'd like to share. Web visitors expect a similar experience regardless of the device they are using. Therefore, if a person visits your site and it is not optimized for their machine, there is a good chance that she will end up leaving and not come back. thanks all!
ReplyDeleteBest Wishes-
Christina West
I like your post..its a true thing.
ReplyDeleteLondon Website Design
Based on the needs of the client, a developer, only one web page with at the least information a more complicated website is developed to generate for the use of many people. The type of cms for html websites style will be identified by the dimension the area and the particular needs of clients. For a relatively small website.
ReplyDelete