SlideShare una empresa de Scribd logo
1 de 25
Descargar para leer sin conexión
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

Más contenido relacionado

Destacado

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
 

Destacado (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 a 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 a 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...
 

Más de 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
 

Más de 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...
 

Último

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 

Último (20)

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 

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

Notas del editor

  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.