SharedTutor | Tutorials For Everyone

Find your interesting tutorials in Get your tutorial about Computer, Blogging, Makemoneyonline, Games, Design, and more!

7 Tips To Better Mobile-Optimized Websites

More and more people get online through their smartphone and tablet currently. So, it is vital that we as designers and developers address how our websites are displayed on the unit. In this post we will see several components that you need to include to make your website optimized and accessible on cellular devices.

(Source: Responsive Web by Chris Bannister)

1. Meta Viewport Tag

The meta viewport is an HTML tag for specifying viewport width and controlling page scale. Using this tag, we can set the page zoom if it is first loaded, the maximum zoom allowed for that page, as well as disable zoom capability.

Below is surely an example of the way you commonly add meta viewport tag in the <head>.

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

You can also add it within your stylesheet this way:

 @-viewport  width: device-width; 

The meta viewport tag can be an indispensible tag (as well as Media Queries) if you are building a responsive website. However, you'll be able to technically set viewport meta tag for non-responsive web page design all the identical.

2. Media Queries

Media Queries let you shift the styles of your site at specified break points. Not everything from your website can properly fit with a narrow viewport height and width of a mobile device.

By using Media Queries, you are able to add specific style rules for specific viewport width. We can also apply styles in line with the screen orientation and also the screen pixel density.

You can embed Media Queries either directly inside stylesheet link:

 <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 960px), projection" href="style.css" /> 

Or code it inside the stylesheet, which is the most frequent way used by developers.

 @media screen and (max-width: 960px)  /** Style Rules here **/ 

3. Modernizr

Modenizr is a JavaScript for browser/device feature detection. Browsers vary and they also may or might not support certain features. When constructing a website for mobile you probably will use new and leading edge features of CSS3 and HTML5, which unfortunately are not supported in earlier browsers (nobody uses the newest of browsers).

Modernizr permits you to give fallback of functions and presentation at a discount capable browsers with the addition of extra HTML classes inside body tag and a set of method.

Check Out: Getting Started with Modernizr

4. TouchSwipe

TouchSwipe is often a jQuery plugin to enable touch interaction for websites (phone or tablet). It supports a pair of common gestures like Swipe, Pinch, Zoom and Scroll.

With more devices dropping physical keyboards and enabling the screen for touch, you should think about applying this plugin on your website for a better and richer consumer experience.

Read Also: A Look Into: Building Websites For Tablet Users

5. iOS Icons

The very first thing you see after unlocking your iPhone (or iPad) will be the app icon. Apart from app icons iOS will likely display icons for websites that have been added about the Home Screen.

To try this for your web site, simply add these link element within the <head> tag.

 <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" /> 

Alernatively, you may remove those link elements, but ensure that the icons are saved inside root directory, and prefixed with apple-touch-icon-* on its name.

Check out: Easily Generate Android Or IOS App Icons With MakeAppIcon

6. Splash Screen

Splash Screen will be the first image which is displayed when users start a credit application. The screen tells the users that the app is loading. It is common to use the Splash Screen as an opportunity to showcase brand identity.

To add it to your internet site, simply insert the subsequent lines on the <head>.

 <link rel="apple-touch-startup-image" href="splash-screen.png" /> 

When users open your website through the Home Screen, the look assigned with this link element is going to be displayed briefly before users understand the whole website.

Although using Splash Screen to show brand is in fact against the guideline, but as long as the the Splash Image is incredibly well designed and loads briefly, it could gives better consumer experience and adds an awesome factor to your internet site.

7. Windows 8 Pin Icon

Windows 8 and RT also have the same feature of adding icons when a website is pinned with the Home Screen. In Windows 8, this is whats called Pin Icon.

Unlike in iOS, which uses link element, Windows 8 uses meta tag to add icons. Here is definitely an example.

 <meta name="msapplication-TileColor" content="#000"/> <meta name="msapplication-TileImage" content="icon.png"/> 

The first meta is defining the Tile Color, and the second is referring the icon image. There is really a site called Build My Pinned Site that lets you generate this meta tag easily.

Final Thought

The mobile device revolution have changed the way in which we, web designers, build websites. And, at least, these factors that we have discussed above must be included in your Web document to generate your website prove well for viewing on mobile platforms, like iOS and Windows 8.

Related posts:

  1. Strikingly: Create Beautiful Mobile-Optimized Websites Without Coding

  2. Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples

  3. Design Killer Mobile App Websites: Tips And Examples

  4. UI Design: Applying CSS Based on Screen Orientation

No comments

Post a Comment