Responsive Web Design

Responsive Web Design Examples & Screenshots

Responsive Web Design is a single website design that displays well at all screen resolutions — whether it's a desktop, tablet or mobile phone. A responsive web design is coded to adapt web pages to the user's screen size. Many older sites when viewed on a mobile phone or tablet require the user to do a lot of scrolling, and zooming to read and navigate on the website, and give your site an outdated look. See examples of Responsive website and an older website Unlike a mobile specific website that may have limited content, the user can access the entire website.

Instead of tiny text on an old style website that needs to be zoomed to be readable, the text on a responsive website is easier to read, because the text is sized for the screen on which it is displayed.

Usually a responsive website is designed with two menus — a desktop computer style menu, and a mobile menu for smaller screens. The navigation menu automatically adapts to display a the desktop menu or mobile menu according to the user's screen size. As a result, the menu is easy to read and select on any size screen.

As the number of users navigating the web on their mobile phones and tablets continues to increase, the importance of having a website that displays well on all devices increases. A mobile user is more likely to stay on a website that's easy to read and navigate.

In addition, starting in April 2015 Google will penalize websites that are not mobile friendly. You could see a drop in your rankings and number of visitors, because if your site doesn't display well on a smartphone, your site may be ranked low in Google search results for smartphone users.

A picture is worth a 1,000 words. See these responsive web design screenshots and examples for a pictorial view with some examples and discussion on how a web page might be adapted for mobile phone and desktop computer.