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