Browsing all articles from January, 2016
Jan
26

How to Optimize Your Website for Mobile

 

Desktop, Smartphone, Tablet . . . Oh My!

It is important to keep in mind all of the important features that a mobile website should include in order to engage viewers such as accessibility, structure, video and images. Everything needs to be placed just right to keep visitors there longer, and keep them coming back. How can you do this without changing everything that you’ve built for your brand? We’ll tell you…

Mobile Web Development

Until about 2012, most businesses created a different mobile version of their website. This was a smaller, easy to navigate version of the desktop site, often using a different domain, such as: http://m.website.com. The preceding “m.” indicated that the user was on a site designed specifically for mobile. When consumers came to the domain from a mobile device, they were directed to the site that was exclusively made for the smaller screen of the mobile phone.Mobile Web Development

Then, things began to change for the lowly mobile-only website. Google Best Practices announced that a business really should be using the same domain for desktop and mobile users. The SEO community began endorsing responsive design as the best way to obtain high search engine rankings on both desktop and mobile. Hence, Google’s announcement caused the near death of the m-dot mobile website. Today, sites are rarely designed using a different URL for mobile phones.

 Choosing the Right Technology for a Mobile Website

To provide a great web experience across multiple devices, marketers basically have two options: build a website using responsive design or create device-specific versions of the website using adaptive design. Technically, however, there are five potential solutions to designing a mobile website:

  • Unique Mobile Site – An m-dot website or a unique site solely for mobile users, although this technique is virtually non-existent in modern web design.
  • Responsive Web Design (RWD) – A responsive website that fluidly changes to any screen or device size.
  • Responsive Web Design with Server Side Components (RESS)—A site that uses device detection to maximize the efficiency of responsive design.
  • Adaptive Web Design (AWD) – A site where the elements change to fit a predetermined set of screen and device sizes.

A unique mobile site is old-school and most likely not the way to go in over 99 percent of mobile designs. If your business is almost exclusively mobile, perhaps there is a reason to have a unique m-dot mobile site, but it is going to be a very rare instance indeed.

Responsive web design, most commonly designed with HTML5 code, is going to be the likely choice in nearly all new mobile web builds. It can also be designed using CSS3 and JavaScript. Responsive design has the striking advantage of being highly flexible, as it fluidly changes to accommodate any device. RWD works by sending the same code, regardless of device, and then rearranging it on the client side, thus allowing the same webpage to be displayed on any device. It serves the same HTML code on the same URL, whether the user’s device is a desktop, tablet, phablet, smartphone, feature phone, or wearable. It can also respond differently based on the screen size of the site. Developers can decide which graphics and content will be used for mobile and tablet users. Text and images can be adjusted based on any browser or screen size. When new devices are added, there is no additional programming required. Most importantly, however, responsive design is Google’s recommended design pattern. For many websites, RWD achieves a reasonable balance between mobile-friendliness and ease of implementation.

There are several key design considerations that will make a website look and operate at its best with responsive design:

  • Header—The header and masthead should be simple so as to not take away from the key selling points. The logo is the key brand image; an overly horizontal logo may not look great on smaller vertical screens.
  • Navigation—Navigation is much trickier on a small screen. Often, designers will use a navigation button shown by three horizontal lines, usually in the upper right of the site. This is called a “hamburger menu,” because it looks like a burger surrounded by the bun. Some sites use a left side navigation that can expand outwardly to cover most of the screen.
  • Images—It is impossible to include too many images on the mobile screen. Therefore, designers often use image carousels that allow users to swipe through multiple product images instead.
  • Footer—A footer doesn’t take up valuable space like the header, but it’s just as important because it is a consumer’s last stop on your site. Consumers are used to using the footer as a navigation tool. It should also include the very important “Contact Us” link.

One of the challenges of responsive design is the tablet. The tablet, although technically a mobile device, is most often used more like a desktop computer than a smartphone. With responsive design, developers need to build the code to execute on three primary devices (desktop, tablet, smartphone). The tablet often straddles both of the other devices in its user intent. An admirable trend in responsive design techniques that combats the tablet struggle is to again use a mobile-first approach. In this way, designers create sites with the smallest screens in mind first and then add features and content for larger ones. It is a lot easier to add value to a site when going from smallest to largest screen size than to decide what elements to take away when going from desktop to mobile. Focusing on mobile first means the site will be clean and won’t have the bulkiness that often slows a mobile version down.

The main problem with RWD is that, by default, all devices are sent the same size graphics, regardless of screen size. Therefore, low-resolution screens are sent the same images as those sent to high-resolution screens. This is problematic in that the smaller screens cannot show the images at their native resolution and have to “shrink” them to fit. This method can be inefficient and can take up additional data that should be unnecessary. Responsive web design with server side components is a web development technique that takes RWD to the next level. RESS combines traditional responsive design with server-side detection that allows RWD to further optimize graphics to fit device specifics. RESS can also enhance the mobile website in other ways. If bandwidth is at a premium, RESS can limit data usage by only serving the most important images. In the same manner, mobile video can only be served if there is a fast connection available. And, RESS can avoid Flash on devices that do not support it.

RESS seems to be an obvious enhancement to RWD, so why doesn’t everybody use it? The negative to RESS is that feature detection is often difficult. The feature detection code on the site needs to be updated every time a new browser or device hits the market and that is difficult to keep up with. There are some third-party services that will do this for you, but nevertheless, it’s a limiting additional hassle for RESS. If your site uses RESS, it’s never going to be completely done and there is always going to be additional costs.

Mobile Device Screen Sizes

There are, however, limitations to responsive design and reflowing the same content on every device. Certainly, there are advantages to offering a unique and customized experience for every device user. This is especially true in the case of e-commerce sites where making the sale is paramount to the existence of the business, hence the need for adaptive design.

Adaptive design employs dynamic serving that uses the same URL regardless of device, but it generates a different version of HTML based on the server recognizing information about the user’s browser. With AWD, a specific experience is sent depending on the type of device. In this case, web developers can customize specific content and adapt it to the device itself. AWD allows for developers to design lighter versions of a site so it will load faster since extraneous items will never make it to the end user. It also allows developers to take advantage of the different unique features of certain smartphones and tablets. Adaptive design is not all about the designing for the device itself. If a user is on a slow or fast connection, a site could serve different resolutions of its images. They are not necessarily custom to each device, but to the bandwidth levels available to the user. An example might be a wide shot of the crowd at the President’s speech that is served to a desktop user and a close up of the President’s face that is served to a smartphone user.

The common thought process is that the obvious choice is always going to be responsive design, but that is not the case. There are instances where adaptive design makes sense as the preferred design method. Because adaptive design is created for the exact specifications of a particular mobile device, it does provide a better overall user experience. This is especially apparent in the case of load times since content used is formatted specifically for the intended screen size. An example of a company that would likely be apt to use adaptive design is an airline or travel site. For a travel-related business, sites need to be highly interactive, engaging, and have multiple options since it is a high ticket item where closing each deal is paramount to success. With its exciting graphics and complex interactivity, an online casino site is another type of site that needs to use adaptive design. With offerings ranging from table games to slot machines and bingo, it is easy to see why extra care must be given to ensure precise compatibility with all devices. Players are there for entertainment and adaptive design provides the best possible user experience regardless of the device used.

On the other side of the debate, the biggest concern with adaptive design is that it is very expensive to develop, since some brands may choose a custom development for every desktop and mobile device. Moreover, when new devices are introduced, the programming could start all over again to accommodate the new entries. An additional concern with adaptive design is that some older devices may still be in the market and they may not be supported by the original design. Because of these concerns, and the ongoing commitment to updating, adaptive design is never going to be the solution for everybody.

Finally, there is the issue of Google’s preferred method. You need not be concerned of lost rankings if you use adaptive design instead of responsive. If an AWD site maintains canonical links to desktop content, it shouldn’t be a problem for a site’s organic rankings. (A canonical link element is supplemental HTML code that helps webmasters prevent duplicate content issues. Duplicate content is a negative for search engine optimization, and a canonical link works to indicate the “preferred” version of a web page.)

Have you seen a website that you like, and are wondering what design style they used? Here’s how to determine if the site has used responsive design or adaptive design. With responsive design, the web design does not respond to the device itself, because in most cases it simply doesn’t care about the device type. Instead, responsive design responds to the screen resolution itself. To test this, look at a site on a desktop and change the size of the window by grabbing one of the corners and expanding or contracting the overall size. When the window size is changed, the website will also change its size and shape to fit the smaller or larger screen of the desktop browser. Some of the elements of the site may shift to accommodate the larger or smaller screen size, but all of the elements will remain on the screen regardless. This is an example of a responsive design site.

An adaptive design site will act differently. Go to a travel site such as Southwest.com and do the same thing. Grab the site in the corner and drag it to the middle to shrink the screen size. Instead of seeing the elements of the site moving around based on the new site, you will see some of the images simply being covered up. If this is the case, it is an adaptive design site.

The technology used for a website design is going to vary based on the specific needs of the brand. Choosing the right method is important, because the site is going to remain active until the next overhaul of the site. Regardless of which approach is best for your particular needs, the important thing is that you provide an improved mobile user experience and gain the search engine rankings, and sales, that your business deserves.

Follow us on Twitter! Follow us on Twitter!
Follow ATS Mobile on Twitter

Recent Posts

Recent Comments

Archives

Categories

Meta

Social Widgets powered by AB-WebLog.com.