Are your websites Mobile-enabled?

2013-11-21

1. Mobile-Enabled Website

rwdHave you ever had a chance to access a website that is not mobile enabled using a smart phone? You will encounter a difficult browsing experience! To be able to read the page content, you need to scroll left and right and zoom in several times.

A mobile-enabled website is one that can work on any mobile device with a browser. The website can automatically detect the device's environment that is requesting the content and then deliver a page in the format that is optimized for that device. Typically, such a page is smaller in size than the one that is sent to the desktop's browser.

If your website is mobile-enabled, the content is reorganized so that it fits the browser window for the device used and the user has an enjoyable experience.

Once the page is about to load on a specific device, the web server queries to obtain the following information: screen resolution, orientation, browser's width and height, etc. Now we have the user's device information at hand, can't we use this information to tailor the single front-end codebase accordingly, instead of maintaining separate versions of content for different devices? There are several frameworks like Twitter Bootstrap and Foundation that address this issue. We will discuss this in detail shortly.

2. Mobile Internet is the future

More than 3 billion people use the mobile phone worldwide. Mobile devices are currently offering the cameras, media players, Wi-Fi, full-featured web browsers, and location-based services. This has fundamentally changed the way users interact with their devices and access the Internet. Mobile Internet embracing is growing eight times faster than desktop web adoption did in the 1990s.At the end of 2012, around 1.2 billion people worldwide were using the mobile applications using different mobile devices. Based on the current rate of adoption, it is forecasted to reach 4.4 billion users by the end of 2017, according to Portio Research (March 2013),

According to Gartner Research (June 2013), there is a sharp decline in the PC (desktop and notebook) sales worldwide. It is expected to total 305 million units in 2013, which means a 10.6 percent decline, when you compare it with the last year sales. On the other hand, tablet market worldwide is forecasted to grow about 68 percent, with volume of more than 201 million units in the year 2013. Mobile phone shipments are expected to grow 4.3 percent, with shipments reaching a little more than 1.8 billion units. In the next couple of years, tablets alone will account for more sales than the PC's. So the future is very much mobile. This gives us an indication on what the future of mobile application development may look like.

The sophisticated smartphones are becoming increasingly popular. Also the high speed mobile data is becoming available to the users. This has created a very huge opportunity for the development of advanced, dynamic, new mobile applications. According to the findings of the Pew Internet Project, a striking 87 percent of smartphone owners browse the Internet or check email on their smartphones. About 68% of them use smartphones to go online on a typical day.

Mobile commerce is becoming increasingly popular, with more and more transactions taking place on mobile devices every single day. According to the Digital Marketing Insights study, it was found that tablet users who do retail e-commerce spent more than 50% and 20% more per purchase than did smartphone and desktop users respectively.

The eMarketer is an independent market research company that provides insights and trends related to digital marketing and commerce. According to their study, about 25% of online sales in the US will take place on mobile devices by the year 2017.In 2013, mobile commerce transactions are expected to generate revenue of about $38.84 billion. By 2017, mobile-based online retail transactions will be worth more than $100 billion.

3. Need to target different devices and screen dimensions

Are users visiting your sites from an increasing array of platforms, devices, and browsers? Is your site mobile-friendly? Can it deliver a quality and consistent viewing experience to your users no matter how large or small their screen display size is?

New devices are being developed every day. They come in different varying resolutions and pixel densities. Some devices have portrait orientation, some other have landscape. The users can even switch from portrait to landscape or vice-versa. The users might access your website from a desktop, phone, tablet, notebook, netbook, or even Smart TVs. This means that the design and layouts of your web sites must not be device-centric and their content located at a single source should be displayed correctly on a wide array of display sizes.

If your device has a resolution, let's say, 480 by 720 pixels wide, layouts of many existing websites do not provide a pleasurable user experience due to poor display and formatting on such small screens. Although it technically works on mobile devices, it is not really usable with all the links and buttons being so small.

4. Responsive Web Design

Responsive Web Design is a web design approach aimed at creating web sites that should automatically adapt and respond uniformly to the user's ever-changing landscape of devices, browsers, screen sizes, and orientations. For example, if the user is viewing a website on a laptop and then resizes the browser or even switches to an Android smartphone whose size is smaller than a laptop screen, the website automatically makes the images resizable and the screen resolutions adjustable.

5. Responsive Web Design with Twitter Bootstrap

Twitter Bootstrap is gaining a lot of attentions nowadays. It is not just a CSS framework, but an end-to-end frontend framework that helps you quickly and easily build a user interface with a consistent look and feel across a range of devices.

It is one of the easiest CSS frameworks to use. You really don't need to be a designer. You can design a website without much of HTML and CSS knowledge. Most of your work involves writing HTML markup and put it at the correct place as per the Bootstrap specifications. There is very little work required on your part in terms of CSS. Bootstrap comes with styles for common HTML elements like forms, tables, buttons, code blocks, typography, icons, etc. Just add the appropriate .class to your html element and the beautiful style is applied to it without any effort on your part.

Our Twitter page on desktop browser:

Twitter Bootstrap comes with many JavaScript components and jQuery plugins like tooltips, popovers, modals, dropdowns, collapse, carousel, breadcrumbs, pagination, pager, thumbnails, alerts, progress bars, etc. There are a number of third-party libraries that extends Twitter Bootstrap with additional JavaScript controls. For example, one among them is Fuel UX. It includes useful plugins such as Data grid, Combo Box, Search, Spinner, etc.

Twitter Bootstrap supports cross-browser and device compatibility out-of-the-box, which trims down your testing time phenomenally.

The designers of responsive web sites no longer need to carry out a different design phase for each new device hitting the market. Twitter Bootstrap is simply great at designing such websites. It is designed to make images and layout responsive. It supports flexible grids and layouts and makes the wise use of CSS media queries.

Twitter Bootstrap supports the Fixed and Fluid Layouts. In the fixed-width Layout, the width of your web page or application is bound to a fixed number of pixels. The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container. The page content will always be contained in 940 pixels centered on the screen no matter how large the screen size is. This points to a serious limitation, namely, elements in your page cannot scale proportionately with the user's screen size.

But for fluid layouts, the grid system uses percents instead of pixels for column widths. This layout will make the page as wide as the browser. If you resize the browser window, the page will be resized. In other words, the sizes of the columns will always change to match your browser's width.

Fluid layouts are closely linked to media queries. All the modern browsers support the media queries. Their job is to apply the CSS style based on certain conditions set forth. You can use them to let your stylesheets know how to style your page for specific screen sizes. For example, you can write the code that changes the background color of a website to light blue only on devices which has a maximum width of 720px.

Our Twitter Page of Mobile Browser:

Without CSS media queries, fluid layouts would struggle to adapt to a multitude of screen sizes. Media Queries let you quickly target different devices in your CSS, mainly through the dimensions of these devices. For responsive web deign to work, you need to define different design layouts for various device size ranges in your CSS stylesheet. For example you can have a layout for a tablet, another layout for a desktop, and yet another layout for smartphones.

/* Apply the CSS when the viewing area's width is between 640px and 1600px for
 all different mediums like screen, print, etc. */
@media (min-width: 640px) and (max-width: 1600px) {
    body { font-size: 80%; }
    divttleftcolumn { display: none; }
}

/* Desktop */
@media screen and (min-width: 1024px) { 
    /* Some CSS here */ 
}

/*Smartphone Landscape */
@media screen and (min-width: 321px) {
    /* Some CSS here */    
}

/*Smartphone Portrait */ 
@media screen and (max-width: 320px) { /* Some CSS here */ }

/* iPhone 4+ Both Portrait and Landscape */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 
    /* Some CSS here */ 
}

/* iPad Portrait */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* Some CSS here */ 
}

Another great part about media queries is that as you resize the browser, you can test your variations on the fly.

6. Mobile websites must be mobile friendly

On the surface, it is easy to say that a responsive web design makes your site compatible with all kinds and sizes of devices. But mobile website development is not all about displaying text, images, and video correctly on different mobile devices, but also about making sure that website handles different scenarios ideal for mobile devices.

Last year Google carried out a survey on mobile users. 72% of them really want the mobile-friendly websites. 96% of respondents have visited a site that doesn't work well on their device. About 60% of users doing e-commerce from their mobiles indicated that they abandon a transaction if the web site is not mobile-optimized. 55% percent among them were of the opinion that an annoying experience on a website tarnishes the brand image overall.

The mobile users want sites should load in 5 seconds or less. You should provide them with big, finger-friendly buttons so that the user's finger should not overlap on to the neighboring buttons. Information should be easily accessible by mobile users in just one or two clicks. Also, you may provide access key shortcuts so that users can simply type a single numeric digit to instantly browse a link.

The users do not want too much of scrolling. Scrolling must be in one direction. Either it should be horizontal or vertical, but not both. Try to follow the convention: most web sites scroll vertically.

Consider that you own a pizza web site. If you want to encourage your customers to call your business, you provide 'Click to Call button. When a person clicks the button on her mobile device, a call is made directly to your business.

Search results generated by a website give an extra relevance when the user's current location is added into the mix. The most familiar method of ascertaining the location of a device is via the GPS sensor that smartphones today come fitted with. Your mobile-enabled website can access the user's current location and send relevant content specific to her surroundings. For instance, it can send her the list of nearby Bed & Breakfast, private rooms and hotels. This provides a richer experience to the mobile users than those that use desktop PCs.

Mobile-enabled restaurant websites, for example, are usually integrated with Google maps technology and they offer directions to their respective destinations from the user's current location.

Your website should offer cross-device consistency and continuity to the users. For instance, if you are an e-commerce store, you should allow the mobile shoppers to register, view and order the products, track the orders, etc. just as they would do using the desktop browser. You should allow them to continue viewing and managing the wishlists and shopping carts where they left off, regardless of the device they last used.

Limit input to the minimum required fields. You can use shorter alternatives. For example, you could use password voice authentication for mobile devices. Using voice biometrics technology for password entry is an elegant solution to the smartphone's small-screen problem.

During user registration, your application can auto fill city and state from zip code. The city and state information is redundant and it can be inferred from a correctly entered postal/zip code.

Allowing users to select from a drop-down list of predefined options is often faster than keying it manually. Use the default values, for instance default to the today's date. Keep track of the selections and entries that the user made during her last visit.