While running through testing on a recent project, the client asked if the website could look the same on her iPhone as it does on her desktop. I had to ask, “why would you want that?”
I quickly realized, despite my explaining early on in the project how the website would “morph” itself to best display from desktop to tablet to mobile device, the client needed further explanation about responsive design.
A responsive website design starts with incorporating CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible layout. The goal is to adapt the website’s layout to the user’s viewing device. More succinctly, make sure the content is viewable within any screen device. Beyond the aesthetics of the website, Google has made it clear that non-responsive websites will not be ranked as high as responsive websites. Why? The heavy use of CSS streamlines the HTML, thus a cleaner markup, which is easier to run through for search engine indexing. One URL for all display types.
Taking the time to compare and contrast screenshots, explaining usability on various devices and more so showing the client how the site would be impossible to use on a mobile device if it was non-responsive. Taking the time to educate the client went a long way. The site is live and highly usable across multiple display devices.