Mobile Web Design. Isn’t Mobile a Fad? There are many more cell phones than PCs Most cellphones are now web enabled Cellphones have moved beyond calls.

Slides:

Advertisements

Similar presentations

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Advertisements

Cascading Style Sheets

Very quick intro HTML and CSS. Sample html A Web Title.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

Tutorial 4: Creating page layout with css

Murach’s ASP.NET 3.5/C#, C5© 2008, Mike Murach & Associates, Inc.Slide 1.

MSc. Publishing on WWW Tables and Style Sheets. Tables Tables are used to: Organize and display tabular data To create a layout for web pages.

A Very Simple “How To” For Designing Mobile Page Templates Warning: These are not real phones. Yup, they’re fake. :^) These screen shots are taken from.

Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.

Cascading Style Sheets Controlling the Display Of Web Content.

Cascading Style Sheets Controlling the Display Of Web Content.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/

UNIT 7 MOBILE APPLICATIONS. OBJECTIVES  CO3 Create a website that is optimized for viewing on a mobile device. 2.

Drboots presents. Web 101 Utility links | Join SWIFT | Pylons Navigation links Some place Another place Links Nothinghere Content goes here This is content…seriously.

Cascading Style Sheet Basics Pepper. Looking at the HTML See the surrounding tags See head, body, paragraph, header See the ending tags See the list.

HTML - Quiz #2 Attendance CODE:

HTML Web Authoring Tonya L. DeZarn Janice Thompson Juana Wallace.

CSS Cascading Style Sheets By Garrett Garman. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility.

Web Design I Spring 2009 Kevin Cole Gallaudet University

Web Development & Design Foundations with XHTML

Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.

Cascading Style Sheets Class 1, Lecture 1 Rachel A Ober

11 HTML5 sharing St Bonaventure College & High School 31 May 2012.

Cascading Style Sheets Tom Osman. Keep the content of a webpage separate from the formatting of the page. Structure (of content)  Headings  Sub headings.

Web Design I Spring 2009 Kevin Cole Gallaudet University

CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.

Michigan.gov - Style Sheets (CSS) Adding Style And Layout To HTML.

Cascading Style Sheets. What is CSS? Short for Cascading Style Sheets, a new feature being added to HTML that gives more control over how pages are displayed.

End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science

Style Sheets for Print and Mobile Media Types Supplemental Material.

The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.

Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

HTML - Quiz #2 Attendance CODE:

Cascading Style Sheets (CSS) Within the Enterprise Architecture Framework (EAF) Wes Ziegeler August 3, 2006.

Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.

Intro To Web Design with Adobe Dreamweaver CSS Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML,

Principles of Web Design 6 th Edition Chapter 9 – Site Navigation.

DHTML. What is it? Dynamic HTML. Not a standard unlike HTML or Java It is a term applied by both Netscape and Microsoft to a collection of technologies.

Layout with Styles Castro Chapter 11. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or.

Introduction to CSS. Why CSS? CSS Provides Efficiency in Design and Updates CSS relatively easy to use Can give you more flexibility and control Faster.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Internet Technology Dr Jing LU Updated Dr Violet Snell / Dr Kalin Penev 1 Internet Technology (week 6)  Recap: Validating HTML  Page Layout.

CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.

Cascading Style Sheets Primary readings Presentations Explain & review projects with class mates.

Web Development & Design Foundations with XHTML Chapter 6 Key Concepts.

28 Copyright © 2009, Oracle. All rights reserved. Customizing the Oracle Business Intelligence User Interface.

Style Sheets. Coding Style Sheets  Style sheets use RULES to create the style  A selector (a tag or user-defined style name)  and then declarations.

NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.

Cheryl Wolfe Web Services Administrator Tampa-Hillsborough County Public Library James Day Electronic Services Librarian Embry-Riddle Aeronautical University.

JavaScript and Ajax (JavaScript Dynamic HTML (DHTML)) Week 7 Web site:

CSS Cascading Style Sheets Prepared By

Cascading Style Sheets - CSS December 20, 2008 NTPCUG Expression Web SIG.

CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.

Cascading Style Sheets (CSS)

Web Development & Design Foundations with HTML5

Web Development & Design Foundations with HTML5 8th Edition

Styles with Cascading Style Sheets (CSS)

Web Development & Design Foundations with HTML5

>> CSS Layouts.

Web Development & Design Foundations with HTML5 7th Edition

Cascading Style Sheets

Chapter 8 More on Links, Layout, and Mobile Key Concepts

Fixed Positioning.

Basics of Web Design Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2014 Terry Ann Morris, Ed.D.

Chapter 7 Absolute/relative hyperlinks Frag id 3-column site

Web Development & Design Foundations with HTML5

Presentation transcript:

Mobile Web Design

Isn’t Mobile a Fad? There are many more cell phones than PCs Most cellphones are now web enabled Cellphones have moved beyond calls to mobile computing

Different CSS vs. Different Site Different CSS Gives users access to same content Less maintenance Not universal Supports the one web model Different Site More customized experience Different analytics Two sites to maintain Best if mobile users are your main audience Can picked up on “carrier web”

Mobile CSS Not all browsers will pick this up- guess which one can have problems… For Windows Mobile you may need to create a separate style sheet where media=Screen.

A simple Mobile Stylesheet html, body { font-family: sans-serif; font-size: 12px; line-height:15px; background: #fff; padding: 3px; color: #000; margin: 0; } * { float: none; }

Mobile CSS Reduce image size Keep headers small Get rid of redundant navigation Use conventional links No floats or sidebars NO popups

Emulators and Simulations Opera Mini T-mobile Tag Tag Emulator IPhoney Iphone Tester Mobi Forge dotMobi

A look at mobile vs. traditional sites MobileWeb

Resources W3C Mobile Web Initiative Mobile Web Best Practices Mobile Web Design Trends Minute Mobile Makeover Make your mobile site friendly Mobile Web Design Tips and Techniques