As a web designer a big part of the job is recognizing how changes in web use and technology will influence website viewers. Upon a last assessment it has been noted that approx. 80% of people who regularly browse the web will do so, at least in part, on some form of mobile device. No longer can a designer safely build a site for the “default” (1024×768) screen resolution, we now need to consider how a site will look in tablets of varying sizes, smart phones, and feature phones. This recognition of a need for adaptability has resulted in a significant push by designers to create “responsive” web design.
If you are still unfamiliar with responsive layout designs, the responsive layout can be created in all common scripting languages … XHTML, PHP, and HTML5. What they have in common is that they are created to target the different device resolutions and serve up a page version specifically designed for a given screen resolution. The other option is to:
1) Create multiple page versions, and then based upon the device type redirect the site visitor to a page designed for their screen resolution and device type.
The advantage of this approach is that the designer has a greater control over the layout choices than most responsive or mobile designs will allow.
The downside of multiple page versions is that it takes significant time to recreate the needed versions of each page. Every time a change is made to your site then each page version will need to be changed accordingly. Furthermore, unless a consideration of bandwidth use from scripts and images has been incorporated into the layout of the phone and many of the smaller tablet versions one runs the same issue with lags and failed connections as may happen with the typical full-featured website.
2) Create a mobile-only version that targets phone users, and let everyone else view your regular website.
The advantage is that the website owner simply has one additional website to edit when changes are needed. There is also the added benefit of using the jQuery HTML5 framework which allows for touch-enabled navigation and a variety of advanced features not available to other website scripting languages. Since the jQuery mobile framework is designed for mobile, one can be assured of compatibility.
The downside is that the mobile-only is typically created to target only mobile phone users, so those on tablets would see the full-site and a degree of horizontal scrolling would be required. Of course the smaller tablet could be targeted as well, but the end goal of the designer is to serve up the most feature rich site possible in consideration of the limitations inherent in the viewing platform.
Okay, so as noted, the current trend is to create a responsive design. A primary advantage of the responsive design is that being just “one website” there is consistent branding across viewing devices. While this is great, the concern is that mobile users and desktop users have different needs and browsing behaviors, and what works well on mobile doesn’t always work so great on a desktop.
I’ve seen hundreds of responsive designs and guess what? The all look very similar. Why? Well, there is a need to utilize a grid system so as to target the container elements, the navigation needs to be able to resize and look good in the mobile version, the jQuery slider, and other animation needs to be across device compatible, the use of graphics needs to be kept relatively low, Flash will likely cause issues, etc. This in essence stunts the creativity of the designer and often results in cookie-cutter layouts with a limited set of advanced coding options. In essence a responsive design is created with mobile in mind first and then adapted to look as good as possible on the other, larger resolution, platforms.
Research has shown that the mobile user will typically look for directions or quick product/services information, whereas the desktop user will typically take more time to explore a web site, spend time reading about a business, services, and pricing. Just imagine if you had an image gallery or portfolio of several images. On a desktop this would look great and be easy to navigate. On a mobile phone this could easily become a problem since the more content you include the more you risk slowing down or cluttering the mobile version of your site. Designing specific sites for each platform allows for a much more efficient and user-friendly version of your site in lieu of making design and content sacrifices in the responsive layout.
Another concern with the responsive design is that the coding requirements are more difficult than the typical XHTML site, and it is easy for a designer to miss a tag which results in it breaking in a given device. Desktop browsers are typically more forgiving if a closing tag is left out, often not so for mobile browsers. Of course testing is needed no matter what the approach or platform, yet more so with the responsive design.
I’ve written previous posts about the need for a “phone-only” mobile site version since most websites will load too slowly and be difficult to navigate for the average phone user. This is still my opinion as the best option for now, yet if you are just starting a new business and intend to build a simple site with little content, then sure, the responsive design may be the way to go. If you have an existing desktop site that looks good, then redesigning it to look just as good in a responsive layout will be difficult, and therefore expensive. My suggestion, just have a mobile-only version created.
On a final note, there is also the potential SEO advantage of having a mobile-only version of your site since these separate mobile pages provide unique content that will be indexed.
Now, I know some of you may be thinking that I’m a bit biased on the responsive vs. mobile debate, and the truth is I am, but i do recognize the potential of the responsive layout and in time I expect that all of my layouts will be of this type. In fact, I have created two responsive designs that are currently online, and am nearing completion of my most challenging yet, a full-featured responsive design utilizing the bootstrap framework. As I’ve noted in another post this month, Bootstrap is a great HTML5 layout framework since it was designed to provide the common HTML elements needed in a professional layout while still loading fast in mobile versions. But as noted above, it is a bit challenging since its layout must work across platforms, and since it uses CSS3 what looks great in one browser may not be supported in another since Firefox, Chrome, and IE don’t support all CSS3 code conventions yet.
As always, I will keep my eye to the weaving of the web, and as it changes, so shall I.
If you are need of web design assistance, or have questions on this post, please feel free to contact me.
https://www.ecurtisdesigns.com
