Helpful Tips For Designing Mobile Websites

1
Helpful Tips For Designing Mobile Websites

• Created by KUDOMETRICS

2
Overview

• The use of mobile device is increasing daily.
  Consumers refer to use the internet from their
  mobile device for any purpose like for social
  media, reading their favorite blogs and articles,
  or making purchases from eCommerce sites.
• Therefore, it is important to provide smooth,
  slick mobile websites that these users can
  navigate and use as much as possible.

Kudometrics.com
3
Overview

• The design and development principles that go
  into mobile design are somewhat different to
  those associated with desktop design.
• Although web design trends in 2013 are generally
  aimed at delivering cleaner, less cluttered
  websites on desktops anyway, it is still worth
  having the biggest mobile development points
  clear in your mind.

Kudometrics.com
4
Overview
Kudometrics.com
5
Below are some tips given for designing mobile
website
Kudometrics.com
6
Create m sub domain

• http//m.website.com. Easier to access and
  maintain. Easier to type on a phone.
• Keeps your brand intact.
• It is free of cost. This m domain has a higher
  adoption in the US. Companies such as Yahoo,
  Twitter, Google, YouTube, and Facebook have
  adopted this method.
• Support for multinational domains.

Kudometrics.com
7
Make it relevant for the user

• Approach mobile website development with only
  essential and relevant information you need on
  your mobile site.
• The less content there is the easier people will
  find your site to use. Remember that mobile
  browser, although some use their devices at home,
  will typically be on the move and have less time
  to look for features it is down to you to make
  the important content front and center so they
  can find it right away.

Kudometrics.com
8
Understand Browser Layout
Kudometrics.com
9
Understand Browser Layout

• Use only single column layout.
• An iPad screen might make two or standard three
  column web pages look good, or the screen on a
  Samsung Galaxy S4 might be big enough to get away
  with it, but mission here is to provide the
  easiest layout whether someone is looking at your
  site on the biggest tablet or smallest Smartphone.

Kudometrics.com
10
Create 2 versions

• Always create two versions of your mobile site.
  One is for basic phone and another is for Smart
  phones.
• Add core features to your basic phone version and
  rich UI for Smartphone version.
• Creating both the version optimize your
  customer's phone.

Kudometrics.com
11
Consider Navigation Method
Kudometrics.com
12
Consider Navigation Method

• There is no one right way to build navigation
  into your mobile site. Content-based sites might
  feature the navigation at the bottom of the page,
  so that users can access what theyre looking for
  quickly.
• For example A mobile eCommerce site will
  likely have a search bar near the top of the
  page, and category menus so that users can
  quickly find what theyre looking for.

Kudometrics.com
13
Include High resolution images

• To prevent mobile sites from looking tiny,
  include images of high resolution .
• It magnifies them by 200.
• This works great for text and vector images like
  SVG. But it's not so hot on bitmap images.

Kudometrics.com
14
Vertical scroll Down

• Keep a vertical scroll down button for navigation
  to view your information flowing down.
• Use blocks of information and optimize each block
  individually.
• Doesn't keep horizontal scroll button.

Kudometrics.com
15
Use an HTML Doc 5 type
Kudometrics.com
16
Use an HTML Doc 5 type

• Not all browsers implement HTML5 features, but
  they will still accept an HTML5 doctype.
•  lt! DOCTYPE htmlgt
•  Using this doctype declaration will allow you to
  display HTML4 elements in all browsers, and then
  add in additional functionality for the browsers
  that support HTML5.

Kudometrics.com
17
Design For touch-screen and non-touch screen phone

• It's important that your mobile site should be
  optimized for Smart phones.
• They have typically large touch screens screens
  but may have a more traditional trackball,
  joystick or directional keys.
• Therefore, it's important that your design is
  easy for both touch screen and non-touch-screen
  users.

Kudometrics.com
18
Keep a link of desktop version
Kudometrics.com
19
Keep a link of desktop version

• In mobile version always keep the link of desktop
  version.
• User might not always prefer to use the mobile
  version.
• So always keep a link at the bottom of page for
  the desktop version.

Kudometrics.com
20
Thank You

• With the use of this free template you accept the
  following use and license conditions. Not for
  commercial use.
• The template can be used freely by private
  persons. In case of questions for commercial
  usage please get in contact with us.

Kudometrics.com