Various mobile devices

Slides:



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

MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
CSS Tips and Tricks for Designing Accessible Websites Presented by Grace Strother.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
 CSS Presentation and layout is based on the CSS Box Model.  The CSS Box Model states that every element on a page is a rectangular box.  This includes:
Week 7 Web Typography. 2 Understanding Type Design Principles.
Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.
4.02 Responsive Web Design Concepts Part 1, Part 2 & Part 3 Designing for mobile devices.
4.02 Responsive Web Design Concepts
CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 12: Building Responsive Webpages.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
‘Mobile first’ Alexander Roberts ISS Web Team Manager Swansea University.
CIT 256 Mobile Web Development Dr. Beryl Hoffman.
Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/
CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
Page Layout Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.
Looking Good Online Design and Presentation of Websites 1.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.
Responsive design - Bedrock to our site Responsive site templates included.
Understanding the Web Design Environment. External factors that affect Web design Many variables affect how Web pages appear New screen resolutions Wide-screen.
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.
Lesson 05 // Web Design, Layout & Structure 1.Web Design/Designer-Coder Relationship 2.Fixed vs Fluid Website Layouts 3.Screen Resolutions.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Html Tables Basic Table Markup. How Tables are Used For Data Display Tables were originally designed to display and organize tabular data (charts, statistics,
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.
CONTROLLING Page layout
Positioning Objects with CSS and Tables
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Textbook to be published by Pearson Ed in early Bootstrap.
Web Design Principles. Designing a Website Choice of a site color scheme. Choice of text font and size. Placeholder text. Use of white space. Location.
4.02 Responsive Web Design Concepts Designing for mobile devices.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.
Mimi Opkins.  One of the major benefits of using CSS is that you’re not forced to lay your sites out in tables.  The layout possibilities of CSS give.
And Mobile Web Browsers
Web Development & Design Foundations with HTML5
Cascading Style Sheets Layout
CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.
CNIT 131 HTML5 - Tables.
2.01 Understand Digital Raster Graphics
Web Development & Design Foundations with HTML5 8th Edition
Concepts for fluid layout
Introduction to Layouts
Tables and Frames.
Web Browsers & Mobile Web Browsers.
2.01 Understand Digital Raster Graphics
Web Development & Design Foundations with HTML5
RESPONSIVE WEB DESIGN.
Design considerations
>> CSS Layouts.
Objectives Create a media query Work with the browser viewport
CSS BEST PRACTICES.
Objectives Create a reset style sheet Explore page layout designs
Styles and the Box Model
Fixed Positioning.
Robert Kiffe Senior Customer Support Engineer
Responsive Framework.
Web Design Principles.
HTML 5 SEMANTIC ELEMENTS.
Laying out Elements with CSS
Web Development & Design Foundations with HTML5
Introduction to Layouts
Web Client Side Technologies Raneem Qaddoura
Concepts for fluid layout
And Mobile Web Browsers
And Mobile Web Browsers
17 RESPONSIVE WEB DESIGN.
Presentation transcript:

Various mobile devices

There are a wide variety of devices with Web browsers—including wearable.

Why responsive design is needed? Responsive Design – no matter what device (computer, tablet, phone) a website isn’t altered when loaded. Mobile browsing is expected to overtake desktop browsing within a few years. Websites are viewed on a variety of devices beyond traditional desktops--from smartphones to tablets to game consoles to large-screen televisions to vehicles.

Challenges Many of these devices use touch interfaces, game console buttons—things beyond the traditional mouse pointer. These devices come in a wide variety of screen resolutions and screen sizes. The size of a pixel varies according to the device. Mobile networks can be slower and most users have fixed data plans (expense) Limited memory, processor power and battery A wide variety of browsers are used on mobile devices.

Why are mobile devices popular? Portable Always connected Personal and can be personalized Location awareness One-handed device Can be used as a universal alerting device

Screen size is a challenge

so How big is a pixel? There are a wide variety of devices with varying dimensions and pixel density.

Variation in number & size of pixels

Physical size A device pixel (or physical pixel) is the tiniest physical unit in a display. Screen density or pixel density refers to the number of device pixels on a physical surface. It is often measured in pixels per inch (PPI).

Resolution  Resolution is a simple count of the number of pixels across the entire width and height of a device…Example: 160 pixels by 50 pixels The iPhone 5 resolution is 1136 x 640. Compare that to the original iPhone which is 480 x 320.

Pixel density Pixel density is a good indication of how clear the device display will be. The higher the number, the smaller the size of the pixels, so graphics are perceived as more crisp and less pixelated. 

Pixels impact appearance 3 tablets with very different renderings of a web page due to pixels

Responsive Web Design Layout changes to fit the device

Responsive Design Desktop Layout Smartphone Layout Notice the layout shift and changes in displayed content Desktop Layout Responsive Design Smartphone Layout

Fixed-width Layouts In fixed-width layouts, the width of the site is bound to a certain number of pixels. Generally, the measure chosen is 960 pixels. If a device is less than 960 pixels, the site will not display properly and scrollbars will appear. If a device is greater than 960 pixels, large amounts of white space will appear on the edges.

Why consider Fluid Layout In a fluid website layout, also referred to as a liquid layout, the majority of the components have percentage widths, and thus adjust to the user’s screen resolution.

Mobile Accessibility W3C initiative: Making websites and applications more accessible to people with disabilities when they are using mobile phones. WAI's work in this area includes people using a broad range of devices to interact with the web: phones, tablets, TVs, and more.

Mobile Web Challenges Opening files sent from other devices Transmission Delay – Bandwidth issue Inputting data – physical limitation Screen size – visually impaired

<div> defined The <div> tag defines a division (group) or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS. The <div> element is very often used together with CSS, to layout a web page

A Popular Page Layout using <div> A wrapper is an element, commonly a div, that encloses one or more other elements in the HTML markup, e.g.:

Container elements The <header> tag specifies a header for a document or section. The <header> element should be used as a container for introductory content or set of navigational links. The <footer> tag defines a footer for a document or section. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. The <nav> tag defines a set of navigation links. It is only intended for a major block of navigation links. The <table> tag is used to organize data into rows & columns

<header> <footer> <nav> are new in html5 A fairly standard layout consists of a banner near the top, navigation, and your content or display box. These are the backbone to any great website. In HTML5 there is a <header> element, as well as a <nav>, <footer> that can replace these div tags.

What is an em unit? An em is a unit of measurement in the field of typography, equal to the currently specified point size. The name of em is related to M. Originally the unit was derived from the width of the capital “M” in the given typeface.

Set Font Size with em To avoid the resizing problem with older versions of Internet Explorer, many developers use em instead of pixels. The em size unit is recommended by the W3C. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em