Part III: Mobile sites guidelines | Chrysa Papazoglou

Chrysa PapazoglouIT Services

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Do I need to go mobile?

Considering the usage statistics, definitelyBut, I have already built the website…

a. Check it’s status with respect to mobileb. Make any “repairs” you see fit and time-

worthy

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Website preview in mobile browser

Many options– Software: Opera Mobile Emulator

(http://www.opera.com/developer/tools/mobile/ )– Online tool: Opera Mini Simulator

http://www.opera.com/developer/tools/mini/Try it

Android SDKCannot possibly test for every platform

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Use a checker for mobile

W3C Mobile OK checkerhttp://validator.w3.org/mobile/

Try it!www.w3.org (89%)http://en.wikipedia.org (6%)http://contest.ihu.edu.gr

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

W3C Mobile OK checker

My site rated terribly…Does this mean that it will not show up OK in mobile devices?NoYou must be able to comprehend the resultsFix all you can fix

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Designing a new site in the mobile era

Responsive designvs.

Separate mobile versionvs.

Native application

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Responsive web design

The layout of the website changes according to the size of the screen it is viewed on

bostonglobe.comAdvantage: the same content is served to all clients (with changes in formatting and possibly layout)Do mobile users need different content?

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Do mobile users need different content?

A good questionMobile users are not always mobileContext is importantPrediction is hardInstead of trying to predict the behavior of your audience, try to shape itConcentrate on visitors you care about

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

m.mysite.com

Separate mobile versionAdvantages– Easier to implement for stripped down

functionalityExample– Harvard University Web site

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Design principles for the mobile version 1/2

1. CompatibilityThe site should render well in the most typical sizes. Displays are growing in size but...

The site should also be standards compliant and tested thoroughly.

2. Content should be optimizedImages should be downsized and downscaled so they can load faster, and fit in the most popular screen sizes.

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Design principles for the mobile version 2/2

3. UsabilityThe site should be usable. Many mobile sites make navigation, and finding your way around a nightmare.

4. Good DesignDesign is always important. Small screen does not mean crampingNavigation should be easy, and the site should load fast.

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Simple tips (mobile 101)

Express all sizes in percentagesBut, if necessary define minimum and maximum sizesElement widthsFont sizes (em)Avoid mouse-over triggered eventsOr use identical behavior for clickingDo not use obsolete technologies or technologies with known problems on mobile

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Principles are OK, but what do I really need to have in mind? (1/1)

Design your mobile site for maximum readability.Use one column layouts and avoid floats. Horizontal overflow can be a problem on handhelds, so make sure wide elements fit the narrow screen.Design with document order in mind.Add skip anchors. 'Skip to content' and 'Back to top' anchor links are vital when using a mobile device.

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Principles are OK, but what do I really need to have in mind? (2/2)

Be consistent. Use similar alignment, color, and layout on pages.Align content to the left.Place non-essential links and other marginal content at the bottom of the page.Set margins and padding to 0.

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Good examples of mobile versions

Digg: m.digg.comWikipedia: m.wikipedia.orgFacebookTwitter (mobile.twitter.com)– Customized error messages for mobile

….

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

How about an application instead of a site?

Why “instead”?Mobile browsers have far greater reach than native apps, but data shows that native app users are generally more engagedThe choice comes down to content and mode of interactionHaving potential revenue in mind

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

First do some research

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

OK, I’m interested

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Mobile web site vs. app cont.

Why not build both?Size of investment justified?Discussion

19/7/12 Part III: Mobile sites guidelines | Chrysa Papazoglou

Joomla! test case

Responsive web designDefault Joomla! 2.5.6 installationInstallation and usage of a responsive templateDemo of using xampp in Windows