Download - Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile
Page Layout Page Layout & Mobile & Mobile WebWeb
Using columns, grid systems, etc… to Using columns, grid systems, etc… to layout sites for desktops and mobilelayout sites for desktops and mobile
Margin PropertyMargin Property
margin: (top, right, bottom, left)margin: (top, right, bottom, left)margin: 10px 30px 20px 5px;margin: 10px 30px 20px 5px;
margin-topmargin-top
margin-rightmargin-right
margin-bottommargin-bottom
margin-leftmargin-left
Normal FlowNormal Flow
Two div elements vs. Nested div elementsTwo div elements vs. Nested div elements
When coded separately When coded separately (<div (<div class=“div1”></div> … <div class=“div2”></div>), class=“div1”></div> … <div class=“div2”></div>),
the two will flow from top to bottom the two will flow from top to bottom unstackedunstacked
When coded nested When coded nested (<div class=“div1>…(<div class=“div1>…
<div class=“div2”>…</div>…</div>)<div class=“div2”>…</div>…</div>), the two will , the two will be stacked where div2 uses margins from be stacked where div2 uses margins from inside div1inside div1
CSS PositioningCSS Positioning
Relative vs. Absolute positionRelative vs. Absolute position
Relative inside of the normal flowRelative inside of the normal flow
Absolute specific outside the normal flowAbsolute specific outside the normal flow
position (static, relative, absolute, fixed)position (static, relative, absolute, fixed)
left, right, top, bottom = the position of the left, right, top, bottom = the position of the element offset from the container elementelement offset from the container element
CSS Float (no ice cream CSS Float (no ice cream jokes)jokes)
Elements that seem to float on the right or left side Elements that seem to float on the right or left side of either the browser window or another element are of either the browser window or another element are often configured using the float propertyoften configured using the float property
float (right, left)float (right, left)
Should be configured using margins with(out) Should be configured using margins with(out) bordersborders
#test{float: right; margin: 0 0 5px 5px; border: 1px solid #000000;}#test{float: right; margin: 0 0 5px 5px; border: 1px solid #000000;}
Use the ‘clear’ property to clear a float (clear:left; or Use the ‘clear’ property to clear a float (clear:left; or clear:right;)clear:right;)
The overflow PropertyThe overflow Property
overflow (visible, hidden, auto, scroll)overflow (visible, hidden, auto, scroll)
Visible = the content will display and overflow Visible = the content will display and overflow to the outside of the area allocatedto the outside of the area allocated
Hidden = the content is clipped to fit the areaHidden = the content is clipped to fit the area
Auto = the content fills the areas and, if Auto = the content fills the areas and, if needed, scroll bars are added automaticallyneeded, scroll bars are added automatically
Scroll = the content is fit into the area and Scroll = the content is fit into the area and scroll bars are presentscroll bars are present
CSS Two-Column Page CSS Two-Column Page LayoutLayout
Two Columns with Left NavigationTwo Columns with Left Navigation
<div id=“wrapper”><div id=“wrapper”><div id=“leftcolumn”><div id=“leftcolumn”></div></div><div id=“rightcolumn”><div id=“rightcolumn”>
<div id=“header”><div id=“header”></div></div><div id=“content”><div id=“content”></div></div><div id=“footer”><div id=“footer”></div></div>
</div></div></div></div>
CSS Two-Column Page CSS Two-Column Page LayoutLayout
Two Columns with Top Header and Left Two Columns with Top Header and Left NavigationNavigation
<div id=“wrapper”><div id=“wrapper”><div id=“header”><div id=“header”></div></div><div id=“leftcolumn”><div id=“leftcolumn”></div></div><div id=“rightcolumn”><div id=“rightcolumn”>
<div id=“content”><div id=“content”></div></div><div id=“footer”><div id=“footer”></div></div>
</div></div></div></div>
Hyperlinks in Unordered Hyperlinks in Unordered ListsLists
List Markers for Ordered and Unordered ListsList Markers for Ordered and Unordered Lists
list-style-type (none, disc, circle, square, decimal, upper-list-style-type (none, disc, circle, square, decimal, upper-alpha, lower-alpha, lower-roman)alpha, lower-alpha, lower-roman)
list-style-image (url with () surrounding URL of image)list-style-image (url with () surrounding URL of image)
list-style-position (inside (markers are indented; text list-style-position (inside (markers are indented; text wraps under markers), outside (default)wraps under markers), outside (default)
ul {list-style-type: square;}ul {list-style-type: square;} ol {list-style-type: ol {list-style-type: upper-alpha;}upper-alpha;}
ul {list-style-image: url(pic.jpg)}ul {list-style-image: url(pic.jpg)}
Vertical NavigationVertical Navigation
<ul><li></li>…<li></li>…<ul><li></li>…<li></li>…<li></li></ul><li></li></ul>
#leftcolumn ul {list-style-type: #leftcolumn ul {list-style-type: none;}none;}
#leftcolumn a {text-decoration: #leftcolumn a {text-decoration: none;}none;}
Horizontal NavigationHorizontal Navigation
display: none, inline, block;display: none, inline, block;
Shown:Shown:#nav #nav ul {list-style-type: none;}ul {list-style-type: none;}
li {display: inline;}li {display: inline;}a {text-decoration: none; padding-a {text-decoration: none; padding-
right: 10px;}right: 10px;}
CSS Pseudo-ClassesCSS Pseudo-Classes
:link, :visited, :focus, :hover, :active:link, :visited, :focus, :hover, :active
a:link {color: #ff0000;}a:link {color: #ff0000;}a:hover {text-decoration: none; color: a:hover {text-decoration: none; color: #000066;}#000066;}
HTML5 Structural HTML5 Structural ElementsElements
Can be used in place of CSS div elementsCan be used in place of CSS div elements
header element <header></header>header element <header></header>
hgroup element <h1….h6></h1….h6> = often used for taglineshgroup element <h1….h6></h1….h6> = often used for taglines
nav element <nav></nav>nav element <nav></nav>
footer element <footer></footer>footer element <footer></footer>
section element <section></section>section element <section></section>
article element <article></article>article element <article></article>
aside element <aside></aside>aside element <aside></aside>
time element <time></time>time element <time></time>
Phone Links and MobilePhone Links and Mobile
<a href=“tel:888-555-5555”>Call 888-555-<a href=“tel:888-555-5555”>Call 888-555-5555</a>5555</a>
<a href=“sms:888-555-5555”>Txt 888-555-<a href=“sms:888-555-5555”>Txt 888-555-5555</a>5555</a>
Not supported by most browsers, mainly used Not supported by most browsers, mainly used for mobile pagesfor mobile pages
Three Column CSS Three Column CSS LayoutLayout
div’s needed for each sectiondiv’s needed for each section
Code the HTML5 (Code the HTML5 (index.html))
Code the CSS (Code the CSS (style.css))
Enclose the images (Enclose the images (plsthumb.jpg,,trillium.jpg, , showybg.jpg))
CSS Styling for Mobile CSS Styling for Mobile WebWeb
You can have two domains (abc.com, You can have two domains (abc.com, abc.mobi), a subdomain (abc.com, abc.mobi), a subdomain (abc.com, m.abc.com), or a separate folder (abc.com, m.abc.com), or a separate folder (abc.com, abc.com/mobile/)abc.com/mobile/)
CSS should “restructure” the site for mobile CSS should “restructure” the site for mobile viewersviewers
The web server should detect whether the The web server should detect whether the visitor is on a PC or a mobile device and visitor is on a PC or a mobile device and redirect them accordinglyredirect them accordingly
Mobile Web DesignMobile Web Design
Best Practices:Best Practices:
Small screen sizeSmall screen size
Low bandwidthLow bandwidth
Font, color, media issuesFont, color, media issues
Awkward controls, limited powerAwkward controls, limited power
Functionality Functionality
Typical Mobile WebsiteTypical Mobile Website
Screen size min: 320 x 480Screen size min: 320 x 480
Target size min: 44 x 44 (Apple),Target size min: 44 x 44 (Apple),34 x 26 (MS), 28 x 28 (Nokia)34 x 26 (MS), 28 x 28 (Nokia)
MIT Study – average index finger MIT Study – average index finger width: 45-57pxwidth: 45-57px
Average thumb width: 72pxAverage thumb width: 72px
Other ConsiderationsOther Considerations
Viewport Meta TagViewport Meta Tag<meta name=“viewport” content=“width=device-width, initial-<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>scale=1.0”>
Viewport Meta Tag Directives (width, height, Viewport Meta Tag Directives (width, height, initial-scale, minimum-scale, maximum-scale, initial-scale, minimum-scale, maximum-scale, user-scalable)user-scalable)
Testing Mobile DisplayTesting Mobile Display
Opera Mobile EmulatorOpera Mobile Emulator
MobilizerMobilizer
iPhone EmulatoriPhone Emulator
iPhoneyiPhoney
iBBDemo2.airiBBDemo2.air
Mobile Madness…Mobile Madness…
Mobile Site Development Assistants…Mobile Site Development Assistants…
jQuery Mobile with CodiqajQuery Mobile with Codiqa
jQTouchjQTouch
Turn a mobile site into a native app…Turn a mobile site into a native app…
Apache Cordova (formerly PhoneGap)Apache Cordova (formerly PhoneGap)
Download mobile template and retrofit your Download mobile template and retrofit your sitesite