Tablets, smart phones, ipods, ultra books, touch screens and the ever-changing screen sizes of devices have caused web designers and developers headaches. For a while, the solution was creating mobile websites. However, as Mashable just put it, 2013 is the year of responsive web designWhat is responsive web design? The official definition from Wikipedia is “a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

Since the beginning of 2013, MTECH has been developing responsive websites in Colorado, which are websites that auto adjust depending on the screen size of the user. Basically, the columns collapse underneath one another. Here is an example:

responsive website design colorado

How Pagosa.com looks on a normal computer monitor.

When you change the resolution of the screen or view it on a smaller device, such as an iphone, it adjusts to look like:

pagosacommobile

As you can see, the menu adjusts to a drop down, the slideshow shrinks to fit the size of the iphone and the rest of the content folds down below. This allows a smart phone user to just scroll down to see the info instead of across and mess with expanding the window back/forth.

Why is this advantageous?

Well, first of all it allows a site to look good across a wide range of devices. Secondly, it eliminates the need to purchase a mobile site along with your full site.

How does this impact web design?

Due to how this works, it is causing web design to change from multiple layers and unique background graphics to more simple design. Lots of graphics and columns do not look good on smaller screens. In addition, it also is starting to change the columns of websites to be 1-2 columns instead of 3 or more. Since each column (starting from left to right) folds under each other, important content may be further down the page and not seen unless someone scrolls. Check out the new colorado.com site and see how it has simplified its’ design.

Do responsive designs cost more?

Yes, there is a slightly higher cost up front since there needs to be some CSS tweaking for the mobile and tablet versions. For example, some columns or elements may appear on the full screen computer site, but need to be eliminated or adjusted on the small screen.

If you already have an MTECH site and would like a quote on making it responsive, please contact us at info@mtechbd.com. Depending on how your site was originally designed, costs may range from a couple of hundred to a thousand or more depending on how the site is currently set up. If you have a site that MTECH has not designed and would like a free estimate for  responsive website, please contact us at info@mtechbd.com.