CIT 256 Mobile Web Development Dr. Beryl Hoffman.

CIT 256CIT 256Mobile Web DevelopmentMobile Web Development

Dr. Beryl HoffmanDr. Beryl Hoffman

Mobile User Statistics

►Mobile web access predicted to overtake desktop web access! It already has in China and India in 2013 (http://www.bbc.co.uk/news/technology-18900778)

►See http://www.smartinsights.com/mobile-marketing/mobile-

marketing-analytics/mobile-marketing-statistics/ for more stats.

►Companies have to be ready with mobile-friendly web sites for all sizes of devices!

Multiple Web SitesMultiple Web Sites

►When smart phones with web access When smart phones with web access first started coming out, companies first started coming out, companies started designing a mobile version of started designing a mobile version of their web sites.their web sites.

►But then tablets cameBut then tablets came

along, and now there along, and now there

are so many screen sizesare so many screen sizes

to consider!to consider!

Mobile Web Readiness

Testing mobile readiness of web pages/code with device emulators:

►http://ready.mobi ►http://testiphone.com

Responsive Web DesignResponsive Web Design

►Responsive Web Design Responsive Web Design DefinitionDefinition: designing a web site that : designing a web site that responds and adapts itself to the responds and adapts itself to the device that accesses it (especially its device that accesses it (especially its screen size)screen size)

► Coined by Ethan Marcotte, a web Coined by Ethan Marcotte, a web designer, in an article designer, in an article http://www.alistapart.com/articles/resphttp://www.alistapart.com/articles/responsive-web-design/ in 2010. onsive-web-design/ in 2010.

Responsive ExamplesResponsive Examples►http://designmodo.com/responsive-http://designmodo.com/responsive-

design-examples/ design-examples/

Dreamweaver Multiscreen Dreamweaver Multiscreen Preview PanelPreview Panel

Only works for local folder or Only works for local folder or

desktop. Not on hubble/network. desktop. Not on hubble/network.

Default SizesDefault Sizes

► iPhones, many Android phones: 320 x iPhones, many Android phones: 320 x 480px (320 is portrait and 480 is 480px (320 is portrait and 480 is landscape).landscape).

► iPads, many Android tablets, and iPads, many Android tablets, and smaller laptops: 768 x 1024smaller laptops: 768 x 1024

►Desktops: ave. 1126 px width Desktops: ave. 1126 px width

Responsive Design ToolsResponsive Design Tools

1.1. CSS Media QueriesCSS Media Queries

2.2. Adapting size of div sectionsAdapting size of div sections

3.3. Adapting number of columnsAdapting number of columns

4.4. Adapting Font sizeAdapting Font size

5.5. Adapting Image sizesAdapting Image sizes

CSS Media QueriesCSS Media Queries

►Recognize the device screen size and Recognize the device screen size and use different css style files for different use different css style files for different sizes.sizes. Desktop.cssDesktop.css Tablet.cssTablet.css Phone.cssPhone.css

Dreamweaver Media QueriesDreamweaver Media Queries► Click on the Multiscreen Preview Button and Click on the Multiscreen Preview Button and

choose Media Queries. choose Media Queries.

Media Queries cont.Media Queries cont.

► Click on This Document Click on This Document (or put links in a file)(or put links in a file)

► Click on Default Presets Click on Default Presets to get to get Phone/Tablet/Desktop Phone/Tablet/Desktop

► Type in file names, Type in file names, phone.css, tablet.css, at phone.css, tablet.css, at the bottom.the bottom.

►Hit – to remove a view if Hit – to remove a view if you already have a css you already have a css file you can use.file you can use.

Link/Media SyntaxLink/Media Syntax► Find out the width of the device:Find out the width of the device:

<meta name="viewport" <meta name="viewport" content="width=device-width, initial-scale=1"> content="width=device-width, initial-scale=1">

►Use the appropriate styles or style Use the appropriate styles or style sheet depending on width:sheet depending on width: <link href="css/<link href="css/phone.cssphone.css" rel="stylesheet" " rel="stylesheet"

type="text/css" media="only screen and type="text/css" media="only screen and (min-width: 0px) and ((min-width: 0px) and (max-width: 480pxmax-width: 480px)" >)" ><link href="css/tablet.css" rel="stylesheet" <link href="css/tablet.css" rel="stylesheet"

type="text/css" media="screen and (min-width: type="text/css" media="screen and (min-width: 321px) and (max-width: 768px)"> 321px) and (max-width: 768px)">

►Always link a basic/desktop style sheet Always link a basic/desktop style sheet first for older browsers (especially IE 8 first for older browsers (especially IE 8 which doesn’t do media queries).which doesn’t do media queries).

Fluid Adaptable LayoutFluid Adaptable Layout

The layout needs to change in:The layout needs to change in:►the width of each page element,the width of each page element,►the font size,the font size,►number of columns (multiple columns number of columns (multiple columns

to just 1 column for a phone display)to just 1 column for a phone display)

The standard centered fixed-width The standard centered fixed-width layout doesn’t work for smaller layout doesn’t work for smaller screens!screens!

Fluid/Liquid LayoutFluid/Liquid Layout

►Dreamweaver comes with some css Dreamweaver comes with some css layout files you can use layout files you can use (File/New/Blank Page).(File/New/Blank Page).

►Use liquid instead of fixed size layouts! Use liquid instead of fixed size layouts! Ex: 100% width instead of 960px. Ex: 100% width instead of 960px.

► In your own css code, use % instead In your own css code, use % instead fixed size px whenever possible. fixed size px whenever possible.

Divs in Separate CSS FilesDivs in Separate CSS Files

In each .css file, change the:In each .css file, change the:►the width of each page element div,the width of each page element div,►the font size,the font size,►number of columns (multiple columns number of columns (multiple columns

to just 1 column for a phone display)to just 1 column for a phone display)

A centered fixed-width of 700-1200px A centered fixed-width of 700-1200px layout doesn’t work for smaller layout doesn’t work for smaller screens!screens!

Changing Div RulesChanging Div Rules

Three Options:Three Options:►Copy rule from desktop.css into Copy rule from desktop.css into phone.css and double click on rule in css phone.css and double click on rule in css panel to edit it.panel to edit it.►Or Create a new rule in phone.css by Or Create a new rule in phone.css by hitting + at the bottom of CSS panel, give hitting + at the bottom of CSS panel, give it the same name as the div!it the same name as the div!►Or Create a new rule using Format/CSS Or Create a new rule using Format/CSS Styles/New.Styles/New.

Div WidthsDiv Widths

►Change the width of each div to fit the Change the width of each div to fit the appropriate screen.appropriate screen.

► If it is 100% width instead of using If it is 100% width instead of using pixels, it will automatically adjust to pixels, it will automatically adjust to the width of the device.the width of the device.

Number of ColumnsNumber of Columns

Change navigation in phone.css: Change navigation in phone.css: ►Change the number of columns to 1 in Change the number of columns to 1 in phone.css by using float: none in the phone.css by using float: none in the nav div tag.nav div tag.►Might also need to change the size of Might also need to change the size of the nav buttons and the font size.the nav buttons and the font size.

Image SizesImage Sizes►Add an id to each image (minimize Add an id to each image (minimize

number of images and crop them to number of images and crop them to minimize white space).minimize white space).

►Add a CSS rule for the image’s id.Add a CSS rule for the image’s id.►Change the image’s width and height Change the image’s width and height

property in this CSS rule. Use CSS to property in this CSS rule. Use CSS to dynamically re-size or crop images. dynamically re-size or crop images.

►Or change its src property to load Or change its src property to load different sized images in each device’s different sized images in each device’s css file.css file.

Responsive Design SummaryResponsive Design Summary

1.1. CSS Media Queries (separate css files CSS Media Queries (separate css files for phone, tablet, desktop)for phone, tablet, desktop)

2.2. Fluid Adaptable Layout Fluid Adaptable Layout

3.3. Adapting number of columnsAdapting number of columns

4.4. Flexible Font sizeFlexible Font size

5.5. Flexible Image sizeFlexible Image size