1 © NOKIA 2005 Virpi Roto Browsing on Mobile Phones Customer Focused Mobile Services Workshop in WWW 2005 conference May 10 th, 2005 Virpi Roto Senior.

Slides:



Advertisements
Similar presentations
Coding a Responsive HTML
Advertisements

WEB BASED DEVICE INDEPENDENT MOBILE MAP APPLICATIONS. THE m-CHARTIS SYSTEM John GarofalakisTheofanis – Aristofanis MichailAthanasios Plessas Nowadays people.
Webmasters Workshop Walt Howe Delphi.com Forums. Bells & Whistles?
Excel Vocabulary.
RESPONSIVE AND MOBILE DESIGN BY: CHRIS PASQUARETTE APRIL, 2013.
Chapter 11 Designing the User Interface
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based Web page using HTML.
Layouts Using Tables Web Design – Section 4-5 Part or all of this lesson was adapted from the University of Washingtons Web Design & Development I Course.
IT Accessibility Committee Accessible Tables Prepared by the NYS Forum IT Accessibility Committee
Web Page Design Using Tables Here you see three examples of how tables can be used to organize your content. We call this page layout or design. You can.
Zinio Library Patron Setup Step-By-Step September 2012.
NEW EBRARY READER OVERVIEW July The new ebrary Reader Built entirely with user input – Student researchers worked with us to perfect the Reader.
Web Design Principles 5th Edition
PRIORITIZING WEB USABILITY. Introduction  How the Book Study Was Conducted  Tested 69 users ages Broad range of job backgrounds and web experience.
HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Jon Quade | Cobalt | Performance Improvement Consultant | Get Creative With Your Content Strategy Jon Quade.
Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target.
Power Presentations CD-ROM. Overviews Using the Main Menu Navigating the Power Presentations & Images Interactives Working with the Media Gallery Accessing.
Starting and Customizing a PowerPoint Slide Show
Small Displays Nicole Arksey Information Visualization December 5, 2005 My new kitty, Erwin.
Web Content Accessibility Guidelines (WCAG) Overview Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de.
A Mobile World Wide Web Search Engine Wen-Chen Hu Department of Computer Science University of North Dakota Grand Forks, ND
Designing Your Page Step 1: Design for a Computer Medium A computer screen is not a printed page. Readability changes depending on color, layout and format.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Web Page Design ECE 3940 Megan O’Byrne 10 September 09.
SEO for Trends to stay on Top Of. The Internet is a huge factor in how marketing is performed today, and keeping up with the latest SEO trends.
RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).
Creating a Winning E-Business Second Edition Designing Your Web Site Chapter 8.
And Mobile Web Browsers
Transferring Course Materials to the Web. Creating a Web Site With a Template To create a Web site with a template 1.Start FrontPage. 2.On the File menu,
Web Browsers And Mobile Web Browsers. Guiding Questions What is a mobile Web browser? Why do Web pages look differently on different Web browsers? What.
Going Mobile with MobileMana Get a great mobile website solution today!
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
Responsive design - Bedrock to our site Responsive site templates included.
Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.
Images. The Element To place an image on our web page, we use the self-closing element: The src attribute ("source") is required and supplies the name.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Designing web pages for handheld mobile devices Improving the client experience.
A Case Study of Interaction Design. “Most people think it is a ludicrous idea to view Web pages on mobile phones because of the small screen and slow.
Forms and tables NOTE THAT FOR THE FORMS AND IFRAMED CONTENT TO BE RESPONSIVE THE CONTENT OWNER NEEDS TO MAKE THEM RESPONSIVE ACCORDING TO INTERNET RESPONSIVE.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
VISTA IMAGING RADIOLOGY VIEWER. 2 The focus of this document is on the VistA Imaging Display Radiology Viewer. Other Display changes will be discussed.
Adobe Certified Associate Objectives 1 Setting Project Requirements.
BROWSING IN MOBILES DHIVYA KHRISHNAN
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
GO MOBILE. GO RESPONSIVE. 185 mil mobile internet users in India
Lesson 6: Working with Word Basics. 2 Learning Objectives After studying this lesson, you will be able to:  Use and customize the Ribbon  Use the Quick.
 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.
Raymond Wong Design Process + Case Studies.
Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.
1 CSE 403 Web Patterns and Design These lecture slides are copyright (C) Marty Stepp, 2007, with significant content taken from slides written by Valentin.
© 2012 DigitalDay | MOBILE WEB DESIGN PRINCIPLES Best Practices Workshop 1.
© 2011 DigitalDay | MOBILE WEB INFORMATION ARCHITECTURE Best Practices Workshop 1.
PSU Web Conference '12 Erica Hollis The Future is mobile Responsive Web Design Mobile Planning JQuery in World Campus Usability Testing Gamification Making.
The Successful Website
Styling For Print From Screen to Paper
Basics of Website Development
DIGITAL CURB APPEAL Learn how to leverage on technology and utilize all your social media platforms for publicity. .l.
Responsive Design Optimizing the browsing experience
WEB BASED DEVICE INDEPENDENT MOBILE MAP APPLICATIONS.
Understanding the Features of a Web Site
Website Planning EIT, Author Gay Robertson, 2018.
Various mobile devices
Tutorial Introduction to help.ebsco.com.
17 RESPONSIVE WEB DESIGN.
Presentation transcript:

1 © NOKIA 2005 Virpi Roto Browsing on Mobile Phones Customer Focused Mobile Services Workshop in WWW 2005 conference May 10 th, 2005 Virpi Roto Senior Usability Specialist, Browsing Nokia Research Center, Finland

2 © NOKIA 2005 Virpi Roto Why this topic? Browsing on mobile phones will increase Faster connection Less expensive Better display Better interaction mechanisms Links in s Full Web access drives mobile-friendly content Use cases different from a desktop

3 © NOKIA 2005 Virpi Roto 3 layers, holistic usability

4 © NOKIA 2005 Virpi Roto Web pages on small devices Keyhole view problems: Hard to know what is on this page Hard to find the target content Wide texts unreadable on small screens

5 © NOKIA 2005 Virpi Roto Zoom out? Miniature page: +Better understanding on whats there -Text too small to read when rows fit the screen width -Zooming either requires a dedicated key or a mode -In optimal case, you should be able to zoom & scroll at the same time, which is hard on a limited device

6 © NOKIA 2005 Virpi Roto Maybe just new packaging? ;o)

7 © NOKIA 2005 Virpi Roto Narrow layout? Narrow layout: De facto Web viewing method 2005 on small screens +Wide texts readable -Wide images squeezed to tiny ones, impossible to interpret -Data tables ruined -Hard to know where the needed content is -Huge scrolling effort -Top content looks the same -> Déjà vu

8 © NOKIA 2005 Virpi Roto Similar top content problem in Narrow layout I do it again I should have scrolled down to see the change and again! Nothing seems to have changed

9 © NOKIA 2005 Virpi Roto Better information visualization methods needed for Web pages on Mobile Phones A modified original layout

10 © NOKIA 2005 Virpi Roto Guidelines for Web authors 1.Avoid large objects that need to be visible at one glance 2.Avoid using small text in images 3.Keep the pages light To keep a Web site content mobile phone friendly

11 © NOKIA 2005 Virpi Roto Thank You!