A responsive web design, or mobile optimized design, is an approach to website design that adapts to different devices a visitor to your website uses. This gives the user the best possible viewing experience and access to a simple navigation. The views can then enjoy your website rather than focusing on having to manually zoom, pan, or scroll to your desired.
Described below are various attributes of a mobile optimized website. We aren’t saying one method is particularly better than the other but rather as a means of comparison.
Responsive vs. Adaptive
Source: Imgur
A responsive web design is a type of design that fluidly expands as a browser gets bigger or smaller. An adaptive form of web design operates slightly differently because it snaps as the browser or viewport expands.
Relative Units vs. Static Units
Source: Imgur
Creating designs elements using static pixels (for example 600x600 pixels) can cause a site designed for one screen (like on your desktop) to look weird depending on another (like your mobile device). Using relative units, images are noted as percentages of your screen fitting to any device you are visiting from.
With Breakpoints vs No Breakpoints
Source: Imgur
Breakpoints are essential to any website design. A breakpoint design discovers what size screen you are using and fits perfectly to that size. For example, if the desktop view of your website is 3 columns, the mobile version will put them together into one solid column.
Why This Is Important
With Google’s recent Mobilegeddon announcement it is essential that websites make the move to a responsive website design. Google has made this change to create a better experience for their engaged searchers and because of the huge increase in searches conducted from mobile devices. If your website is not mobile optimized your search engine ranking and traffic is basically guaranteed to plummet. This change occurs April 21, 2015.