Responsive Web Design

b-of-a-imageResponsive web design is a web development approach to provide an optimal viewing experience on all internet devices. A responsive web site allows for easy reading and navigation with a minimum of panning and scrolling.

The above image shows how Bank of America has configured its website to be viewable on a full screen desktop computer, an iPad, and a smart phone. My site, tomarrington.com, uses these same principles developed from a single WordPress theme. Cascading Style Sheets, CSS code, called media queries, are written to target specific screen sizes and devices. I strongly urge my clients to adapt to this web development as the number of mobile devices is rapidly increasing.

Another example would be to open up a newspaper website (example: Boston Globe). On a full screen desktop computer, 3 easily readable columns would appear with nice and clear images. If the site was not written with responsive code, it would be almost unreadable on a smart phone.  The images would be extremely small. The visitor would have to pan and scroll to read the newspaper.  The Boston Globe site is written with responsive code, the text and image content is easily viewable on all devices. On an iPad or tablet, the content is moved to two columns and on a smart phone the content now stacks up in a single column.

An easy way to test to see if a site is responsive:

Put your mouse on the far right hand side of the screen until you see the little black arrow appear. Once the arrow appears, click and drag the screen to the left hand side and watch what happens to the content. When the site is not responsive, the content on the right will simply disappear. If the site is responsive the content will start stacking up in columns and the navigation will change position to accommodate the new screen size. An easier metnod is simple to login to the website  on a smart phone or table and look at the content. Give me a call if you  have any questions regarding whether or not your site is responsive.

 
Tom (510) 680-3086