Technology has come a very long way in the past few decades, from the very first room-sized computer to the little hand held computers we have today. Between desktops, tablets, mini laptops, smartphones, and new smart watches, the internet can be accessed from anywhere anytime. For this to work correctly, however, websites need to be designed with more than one device in mind. Otherwise, the person using their smartphone will have a much harder time finding the information they are looking at than the desktop user, because the mobile user would have to be constantly moving the screen around to see everything, or zoom out enough to see the whole screen, but not be able to read any of the content. Hence we have responsive and mobile web design.
A mobile design is totally separate from the desktop design of a sight. Taking a look at Texas Roadhouse’s and Booking.com’s sites as examples, Each has a desktop site (http://www.texasroadhouse.com/ and http://www.booking.com/) and a separate website made specifically to be viewed on a smaller screen, like that of a smartphone (http://m.texasroadhouse.com/ and http://m.booking.com/). This is handy and makes a company’s website easily viewed from any kind of device, however it has the drawback of more work; the designer has to make two separate code sets for the two separate websites.
That’s where mobile and responsive websites differ. Responsive websites are a single site that is coded to be fluid enough to resize itself for whatever device it is being viewed on automatically. That way, the designer only has to code for a single website. A few examples of responsive websites are http://www.jonathandacosta.com/, http://westinfinds.com/, http://www.andremaurice.it/, and http://themes.themepunch.com/?theme=goodweb_wp. You can tell that these sites are responsive by adjusting the size of the browser window on your desktop and watch as the content resizes and realigns itself before your eyes to adjust for the new screen size.
Whichever type of design you choose to use, there is a list of steps to keep in mind:
1) Mobile or responsive?
2) Address navigation; avoid drop down menus for smaller devices.
3) Use grids.
4) Be sure to make fonts responsive as well, in case a device cannot support a certain font you use.
5) Make sure images size and resize well.
Research:
http://blog.evolvecreativegroup.com/post/2013/07/09/Responsive-Web-Design-vs-Mobile-Site.aspx
http://www.govdelivery.com/blog/2013/08/how-to-make-your-website-mobile-friendly/
rwingender 