SlideShare a Scribd company logo
1 of 25
Download to read offline
Presented by:
10 Tips for Mobile Website Design
Rajesh Lal, Nokia
2
Create m subdomain
http://m.website.com
3
Short, easy to remember
Easy to type, saves time
Directly to mobile website
Redirect to existing mobile site
4
Make it Relevant
to the User
5
Site should be User driven
User need at-a-glance Info
Minimum interaction
Select top 20% functionality
20% effort
80%
result
80/20 Rule
6
Develop for
Mobile User
7
Difficult Text Entry
Inconsistent Connectivity
Allow for one hand use
Limit to 3 level navigation
8
Understand
Browser Layout
9
Greater PPI = Better quality in display (usually)
Mobile Phone Screen size Resolution Mode PPI
Android G1 3.2 320 x 480 Portrait 180
BlackBerry 2.4 480 x 360 Landscape 165
iPhone 3.5 320 x 480 Portrait 163
Maemo N900 3.5 800 x 480 Landscape 265
Palm Pre 3.1 320 x 480 Portrait 186
S60 Nokia 2.0 240 x 320 Portrait 167
10
11
Create
Two Versions
Core features
for Basic Phone
Add Rich UI for
Smartphone
Optimize for
Your
Customer’s
Phone
12
13
Basic Version Smartphone Version
14
Optimize
Everything
15
Optimize images, css, js
Server Trips, ImageMaps
Include CSS and JS in page
Single page, hidden content
16
Make it Scroll
Vertically
17
Allow Info to flow downward
Use Blocks of Information
Optimize Individual block display
No Horizontal Scroll
18
Apply Good UX
Design Principles
19
Simple words for links, buttons
One Idea One Page
No Pop-up, mouseover, refresh
Avoid ext. links, frames, Ajax
Don’t use Use
20
Future Proof for
Landscape Layout
21
Width set at 100 %, Test portrait and landscape
22
10
Keep a Link to the
Desktop Version
23
In Smartphone version
keep a link to regular website
Get all these and 50+
other Tips
In chapter on
Mobile Web Usability
Presented by:
Thank You
rajesh.lal@nokia.com
http://smallinterface.com
Now this is not the end.
It is not even the beginning of the end.
But it is, perhaps, the end of the beginning.
- Winston Churchill

More Related Content

Viewers also liked

Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bendRaj Lal
 
Two thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalTwo thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalRaj Lal
 
Why Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanWhy Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanRaj Lal
 
Honeycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalHoneycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalRaj Lal
 
What is User Experience @iRajLal
What is User Experience @iRajLalWhat is User Experience @iRajLal
What is User Experience @iRajLalRaj Lal
 
30 important-virtualization-vmware-interview-questions-with-answers
30 important-virtualization-vmware-interview-questions-with-answers30 important-virtualization-vmware-interview-questions-with-answers
30 important-virtualization-vmware-interview-questions-with-answersLatif Siddiqui
 

Viewers also liked (6)

Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Two thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalTwo thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLal
 
Why Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanWhy Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fisherman
 
Honeycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalHoneycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLal
 
What is User Experience @iRajLal
What is User Experience @iRajLalWhat is User Experience @iRajLal
What is User Experience @iRajLal
 
30 important-virtualization-vmware-interview-questions-with-answers
30 important-virtualization-vmware-interview-questions-with-answers30 important-virtualization-vmware-interview-questions-with-answers
30 important-virtualization-vmware-interview-questions-with-answers
 

Similar to 10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal

How To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile ClientsHow To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile ClientsWoody Pewitt
 
Web In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingWeb In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingGreg SHIN
 
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalJason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalAjax Experience 2009
 
Mobile email - chasing context
Mobile email -  chasing contextMobile email -  chasing context
Mobile email - chasing contextAnna Yeaman
 
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 ...
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 ...10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 ...
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 ...Raj Lal
 
IBM Mobile portal experience
IBM Mobile portal experienceIBM Mobile portal experience
IBM Mobile portal experienceVincent Perrin
 
Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for MobilityScotty Logan
 
How To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud ChampionHow To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud ChampionChris Love
 
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5th Finger
 
Windows Phone 7: Interfacing
Windows Phone 7: InterfacingWindows Phone 7: Interfacing
Windows Phone 7: InterfacingRishu Mehra
 
Best Mobile App Development Services in India
Best Mobile App Development Services in IndiaBest Mobile App Development Services in India
Best Mobile App Development Services in IndiaSteve Verma
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email DesignAnna Yeaman
 
future of mobile web
future of mobile webfuture of mobile web
future of mobile webMihai Badita
 
Empowering Multiscreen web and mobile applications with Mobilespear
Empowering Multiscreen web and mobile applications with MobilespearEmpowering Multiscreen web and mobile applications with Mobilespear
Empowering Multiscreen web and mobile applications with MobilespearShay Rosen (שי רוזן)
 
Mobile Phone Publishing Terminalfour Presentation V3
Mobile Phone Publishing   Terminalfour Presentation V3Mobile Phone Publishing   Terminalfour Presentation V3
Mobile Phone Publishing Terminalfour Presentation V3David Miller
 
Responsive & Adaptive Design @mLearnCon15 Nick Floro
Responsive & Adaptive Design @mLearnCon15 Nick FloroResponsive & Adaptive Design @mLearnCon15 Nick Floro
Responsive & Adaptive Design @mLearnCon15 Nick FloroNick Floro
 
Windows Phone7 Development
Windows Phone7 DevelopmentWindows Phone7 Development
Windows Phone7 DevelopmentDanish Mehraj
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren
 
Whitepaper: Guidelines to-set-up-a-mobile-based-solution-for-ecommerce-shoppi...
Whitepaper: Guidelines to-set-up-a-mobile-based-solution-for-ecommerce-shoppi...Whitepaper: Guidelines to-set-up-a-mobile-based-solution-for-ecommerce-shoppi...
Whitepaper: Guidelines to-set-up-a-mobile-based-solution-for-ecommerce-shoppi...Vengat Owen
 

Similar to 10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal (20)

How To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile ClientsHow To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile Clients
 
Web In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingWeb In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross Browsing
 
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalJason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.Final
 
Mobile email - chasing context
Mobile email -  chasing contextMobile email -  chasing context
Mobile email - chasing context
 
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 ...
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 ...10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 ...
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 ...
 
IBM Mobile portal experience
IBM Mobile portal experienceIBM Mobile portal experience
IBM Mobile portal experience
 
Developing for Mobility
Developing for MobilityDeveloping for Mobility
Developing for Mobility
 
How To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud ChampionHow To Be an HTML5 Mobile Cloud Champion
How To Be an HTML5 Mobile Cloud Champion
 
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
 
Windows Phone 7: Interfacing
Windows Phone 7: InterfacingWindows Phone 7: Interfacing
Windows Phone 7: Interfacing
 
Best Mobile App Development Services in India
Best Mobile App Development Services in IndiaBest Mobile App Development Services in India
Best Mobile App Development Services in India
 
Responsive email design guide
Responsive email design guideResponsive email design guide
Responsive email design guide
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
 
future of mobile web
future of mobile webfuture of mobile web
future of mobile web
 
Empowering Multiscreen web and mobile applications with Mobilespear
Empowering Multiscreen web and mobile applications with MobilespearEmpowering Multiscreen web and mobile applications with Mobilespear
Empowering Multiscreen web and mobile applications with Mobilespear
 
Mobile Phone Publishing Terminalfour Presentation V3
Mobile Phone Publishing   Terminalfour Presentation V3Mobile Phone Publishing   Terminalfour Presentation V3
Mobile Phone Publishing Terminalfour Presentation V3
 
Responsive & Adaptive Design @mLearnCon15 Nick Floro
Responsive & Adaptive Design @mLearnCon15 Nick FloroResponsive & Adaptive Design @mLearnCon15 Nick Floro
Responsive & Adaptive Design @mLearnCon15 Nick Floro
 
Windows Phone7 Development
Windows Phone7 DevelopmentWindows Phone7 Development
Windows Phone7 Development
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
Whitepaper: Guidelines to-set-up-a-mobile-based-solution-for-ecommerce-shoppi...
Whitepaper: Guidelines to-set-up-a-mobile-based-solution-for-ecommerce-shoppi...Whitepaper: Guidelines to-set-up-a-mobile-based-solution-for-ecommerce-shoppi...
Whitepaper: Guidelines to-set-up-a-mobile-based-solution-for-ecommerce-shoppi...
 

More from Raj Lal

Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Raj Lal
 
UX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceUX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceRaj Lal
 
Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization  Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization Raj Lal
 
The art and science of website optimization
The art and science of website optimizationThe art and science of website optimization
The art and science of website optimizationRaj Lal
 
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...Raj Lal
 
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Raj Lal
 
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Raj Lal
 
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalDesigning Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalRaj Lal
 
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Raj Lal
 
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Raj Lal
 
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Raj Lal
 
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Raj Lal
 
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLalDeveloping Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLalRaj Lal
 
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York  @iRajLalUpgrade Your Website to HTML5 - VSLive Conference New York  @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLalRaj Lal
 
Fun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalFun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalRaj Lal
 
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLalAngry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLalRaj Lal
 
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...Raj Lal
 
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...Raj Lal
 
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...Raj Lal
 
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript -  - MeeGo Confere...Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript -  - MeeGo Confere...
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...Raj Lal
 

More from Raj Lal (20)

Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0
 
UX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceUX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experience
 
Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization  Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization
 
The art and science of website optimization
The art and science of website optimizationThe art and science of website optimization
The art and science of website optimization
 
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
 
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
 
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
 
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalDesigning Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
 
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
 
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
 
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
 
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
 
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLalDeveloping Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
 
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York  @iRajLalUpgrade Your Website to HTML5 - VSLive Conference New York  @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
 
Fun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalFun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLal
 
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLalAngry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
 
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
 
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
 
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @...
 
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript -  - MeeGo Confere...Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript -  - MeeGo Confere...
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
 

Recently uploaded

Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 

Recently uploaded (20)

Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 

10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal

Editor's Notes

  1. Standard practice accepted by most mobile users Use content adaptation for phones http://website.mobi http://mobile.website.com http://website.com/mobile http://website.com/m
  2. A mobile web site needs to be user-driven. Know why your user visits your web site and provide only those features in the mobile version. Be aware that mobile users need information with minimum interaction. List the set of functions from the desktop web site you want to port to the device. My suggestion is to take only the top 20 percent of useful features from the desktop web site to the mobile web. • List the most important features for which the mobile user will open the site while on the move; these should be part of the home page.
  3. Difficult Text Entry so try to avoid and keep Website "Read Only" User most likely will use Mobile with one hand Battery Powered Inconsistent Connectivity • Restrict your mobile web site to three levels of navigation. A mobile user has a very short span of time; try to get him what he is looking for as fast as possible. Standard search navigation is Search to Result to Detail page. If the user searches for a particular item, the navigation should be Search to Detail page, and at any page the search should be visible for reuse; the user should not need to go back three steps to get to the search. • Save user settings. This is very important and gives a better user experience by minimizing user interaction. Use the browser cache effectively to remember the user’s last set of configurations. • Make the functions accessible. Allow maximum interaction—even the basic mobile browser allows for access keys that map the phone keys to the navigation (see case study #4, Flickr). Use them to provide shortcut keys for navigation. minimizing user interaction. – cache Information / settings
  4. for all popular mobiles
  5. one basic version optimized for mass-market mobile device and a richer version for smartphones • Start with a basic version for older mobile phone browsers and then add extra features for the smartphone version. This helps you identify the core features of the desktop web site that need to be ported to the mobile version. Use the 80/20 rule (80 percent of the results comes from 20 percent of the features) to identify the top 20 percent of features. • Create only two mobile versions, one for the basic phone and one for smartphones, and then optimize the richer version according to your customer’s phone. If you know 80 percent of your users use Nokia phones, optimize the web site for that device and use 100-percent width, which accommodates all other similar devices. Use content adaptation for phones with similar browser capabilities but different dimensions to adapt to a particular device. There are two simple goals in mobile web design—to accommodate the maximum number of users and devices, and to do that with the least amount of effort. To achieve this, you have to start with a flexible reference design—the bare-minimum functionality you want in your mobile web page—and then use a standard layout that will work across the devices. Let’s take a closer look at those two concepts. One Basic versions of a mobile web site optimized for mass-market mobile devices One Rich Version to accommodates all the Smartphones
  6. one basic version optimized for mass-market mobile device and a richer version for smartphones • Start with a basic version for older mobile phone browsers and then add extra features for the smartphone version. This helps you identify the core features of the desktop web site that need to be ported to the mobile version. Use the 80/20 rule (80 percent of the results comes from 20 percent of the features) to identify the top 20 percent of features. • Create only two mobile versions, one for the basic phone and one for smartphones, and then optimize the richer version according to your customer’s phone. If you know 80 percent of your users use Nokia phones, optimize the web site for that device and use 100-percent width, which accommodates all other similar devices. Use content adaptation for phones with similar browser capabilities but different dimensions to adapt to a particular device. There are two simple goals in mobile web design—to accommodate the maximum number of users and devices, and to do that with the least amount of effort. To achieve this, you have to start with a flexible reference design—the bare-minimum functionality you want in your mobile web page—and then use a standard layout that will work across the devices. Let’s take a closer look at those two concepts. One Basic versions of a mobile web site optimized for mass-market mobile devices One Rich Version to accommodates all the Smartphones
  7. Both version optimized for bandwidth—plain text with optimized images. • Optimize everything. Optimize images for size; a PNG image can be a good trade-off between quality and size. CSS and JavaScript should also be optimized for size. A number of online optimization tools are available for this purpose. Don’t forget to test after optimization. If you are using JavaScript libraries, try to reduce the size by removing the functions you don’t need. • Reduce server trips by using image sprites and merging CSS and JavaScript in the same page, instead of using additional include files. Chapter 8 goes into this subject in more detail. Reduce Server Trips for better user experience Try to include optimized css and JS in the page.
  8. Standard Layout has Vertical Scroll layout allows the information to flow linearly downward, so users can scroll down for more news headlines. With blocks of information that can be individually displayed on the mobile screen Grouped into multiple categories The layout allows the information to flow linearly downward, so the user can scroll down for more news blocks, headlines, and so forth no horizontal scroll like the desktop version.
  9. Minimal or No Advertisement Standard abbreviations are accepted One Page One Idea • Avoid the following: Pop-up windows, mouse-hover menus, auto refresh, auto redirects, external links, horizontal scrolling, and frames. • Ajax functionality, or progressive enhancement, if used sparingly can give a great user experience. • Testing should be done on actual devices. There are online services like deviceanywhere.com that enable remote testing on different mobile devices. • Simplify everything. Use clear, short, simple words for links, buttons, and menus. Standard abbreviations are accepted for titles. • One idea on one page. Always focus on one idea on a mobile web page. For a news site, a category needs to have a page of its own; don’t try to accommodate everything on a single page with a large vertical scroll. • Thematic consistency. Keep some level of consistency with the original web site, like logo and color themes to keep the “feel” of the desktop web site. Don’t make drastic changes to the mobile site. If you are targeting a particular phone, use the design guidelines for the phone. • Color. When using color on a mobile web page, consider the sun, shade, contrast, and brightness a user might face on the move. Use color not only for style but also for function, such as red for alert. But don’t convey important information only by color. For example, even if an error is displayed with red, there should also be text to convey the message. • Visual aesthetic. Make the mobile web pages visually pleasing. Use visual cues instead of raw data, spaces between sections, only a few colors. One of the suggestions I give to all is to have a high noise-to-signal ratio as your guiding principle. Noise-to-signal here refers to the contrast between unimportant information (the noise) and the important information (the signal). If your color scheme is drowning your important information amidst the unimportant information, change it. Make the color scheme so that the most important information stands out of the rest. It should be clearly visible and more attractive than the rest of the page. No need for help. Although service web sites provide a simple help for beginners, a mobile web site should be intuitive enough on its own. If you must, keep the help to one page. And keep text input to a minimum, replacing them with select items on forms where possible. No need for help or one page help
  10. Keep the width of the navigation set at 100 percent to accommodate devices of different dimensions. The Smartphone version width is set to 100 percent to accommodate devices with different dimensions. • Future-proof your mobile web site. Test the site for both portrait and landscape mode, and make necessary changes to ensure the site displays nicely on both. Often, the proper use of styles (100 percent width) can solve this issue. This helps make the web site future-proof.