responsive

optimized1

Why Optimize Your Site For Mobile Devices?

Published by Kevin T.

A standard, one size fit’s all, website design can suffer when it comes to usability if a visitor accesses it through a small screen device such as a mobile phone. Text and images tend to be too small to read, requiring users to zoom in and pan the site left and right, up and down, in order to view all the content. With mobile devices accounted for over 55% of Internet usage (CNN Money 2014), it is increasingly important to tailor your site to this ever growing user base.

THE GOOD

A mobile optimized site (responsive design) will adjust it’s layout ‘on the fly’ to fit within a variety of smaller screen widths. At most, users will only have to scroll down for content, with very little need for zooming in. The look and feel of the site should remain mostly intact. As an example, this site is optimized. View it on a smartphone, tablet and laptop/desktop to notice the difference.
Continue reading →

responsive1

Responsive Design – Multi Column Layout

Published by Kevin T.
The following is an example of an adjustable width, 3 column / 1 row layout that will respond well to smaller screens such as smartphones and tablets. If you view this code on a smartphone (portrait orientation), it will adjust to a 1 column / 3 row layout. Add or remove columns as desired. Change the percentages of the columns to use the amount of space you need for each one, without going over 100% (including padding width).
I am leaving the css in the style tag for this example, however it is recommended that you put it in a .css file and call them with the class tag.

<div style="width:100%;">

<div style="text-align:center;"> <!-- This will center the three blocks of text/images with the width of the container. -->

<div class="multi-col" style="width:30%; min-width:250px; display:inline-block; padding:3%; text-align:left; vertical-align:top;"> <!-- text-align:left will left justify the text within this particular block. -->
Continue reading →