Getting the Max out of Your Mobile Website

It probably comes as a surprise to very few of you that between apps and browsers, mobile Internet usage has surpassed the personal computer for everything from surfing, to eCommerce, and everything in between. Smartphones still reign in popularity, tablet usage is healthy, and phablets (large-screen phones such as iPhone 6 Plus) are phasing in to replace older smartphone models – just look around your local coffee shop on a Sunday afternoon for examples. Whether your website is for business or your own personal brand (I’m looking at you, bloggers), there is no longer any doubt that it must be optimized for viewing on a variety of screens in order to give your visitors the experience they expect.

The World Wide Web can be viewed on a great range of screen sizes, from the 4.6-inch Sony Xperia Z3 Compact to a 64-inch Samsung Smart TV (not mobile, but used for Internet), and sites should ideally be designed - or even redesigned - with this in mind. There are two major methods of design currently employed for this: Responsive Web Design and Adaptive Web Design.

Responsive Web Design (RWD)

Responsive Web Design is the method of choice here at Brockett Creative Group. It makes mobile websites easy to read and navigate, which tends to make your site visitors very happy! RWD makes websites viewable and functional on devices of any screen size due to three factors:

• Fluid Grid Layouts: By creating mobile sites to use percentages, instead of fixed variables such as pixels, the site layout can expand and contract to fit any viewing screen.
• Flexible Images: Much like the grid layout, images are programmed in relative units rather than fixed ones to fit appropriately into mobile screens.
• Media Queries: This is a programming module that allows content to adapt to a screen. Its shortcoming is that it doesn’t work well in outdated browsers such as Internet Explorer 8 or below.

Only a few short years ago, we had to build two websites for our clients: their main website and their mobile site. RWD allows us to build one site that adapts to the user’s device. This means that there is more consistency for people viewing your website on multiple devices, and less development time and cost for you.

RWD is considered a best practice in the industry. If you’d like to learn more, you can actually read the book that launched a thousand RWD sites, Responsive Web Design by Ethan Marcotte. 

Adaptive Web Design (AWD)

AWD is also used for mobile website design. The major difference between this and RWD is that Adaptive Web Design requires more than one site be built. The mobile sites are much leaner than their desktop counterparts, with fewer pictures and elements such as Java and Flash.

The sites are built with specific screen-size ranges in mind, and when a mobile device attempts to access the site, the server takes the information it receives and determines which version to send based on the screen size. When new screen sizes come into the market, an AWD website will need to be revisited for a new design to accommodate the new screen.

The benefit of this method to the user is that the site uses less data, so it could benefit mobile budgets.

Designers and programmers may have other preferences, but we at Brockett prefer RWD because of its flexibility and consistency among viewing devices. The techies over at Fast Co. Design put together an informative and fun collection of gifs that demonstrate the differences between Responsive and Adaptive web design.

Not sure if your site is mobile-friendly or not? Google has a Mobile-Friendly Test for that.  

If your website isn’t making the grade, email us or call (315) 797-5088 and we’ll help you get the max out of your mobile website.