Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile

The Box Model

Margin Property margin: (top, right, bottom, left) margin: 10px 30px 20px 5px; margin-topmargin-rightmargin-bottommargin-left

Normal Flow Two div elements vs. Nested div elements When coded separately ( … ), the two will flow from top to bottom unstacked When coded nested ( … … … ), the two will be stacked where div2 uses margins from inside div1

CSS Positioning Relative vs. Absolute position Relative inside of the normal flow Absolute specific outside the normal flow position (static, relative, absolute, fixed) left, right, top, bottom = the position of the element offset from the container element

CSS Float (no ice cream jokes) Elements that seem to float on the right or left side of either the browser window or another element are often configured using the float property float (right, left) Should be configured using margins with(out) borders #test{float: right; margin: 0 0 5px 5px; border: 1px solid #000000;} Use the ‘clear’ property to clear a float (clear:left; or clear:right;)

The overflow Property overflow (visible, hidden, auto, scroll) Visible = the content will display and overflow to the outside of the area allocated Hidden = the content is clipped to fit the area Auto = the content fills the areas and, if needed, scroll bars are added automatically Scroll = the content is fit into the area and scroll bars are present

CSS Two-Column Page Layout Two Columns with Left Navigation

CSS Two-Column Page Layout Two Columns with Top Header and Left Navigation

Hyperlinks in Unordered Lists List Markers for Ordered and Unordered Lists list-style-type (none, disc, circle, square, decimal, upper-alpha, lower-alpha, lower-roman) list-style-image (url with () surrounding URL of image) list-style-position (inside (markers are indented; text wraps under markers), outside (default) ul {list-style-type: square;}ol {list-style-type: upper-alpha;} ul {list-style-image: url(pic.jpg)}

Vertical Navigation … … … … #leftcolumn ul {list-style-type: none;} #leftcolumn a {text-decoration: none;}

Horizontal Navigation display: none, inline, block; Shown: #nav ul {list-style-type: none;} li {display: inline;} a {text-decoration: none; padding-right: 10px;}

CSS Pseudo-Classes :link, :visited, :focus, :hover, :active a:link {color: #ff0000;} a:hover {text-decoration: none; color: #000066;}

HTML5 Structural Elements Can be used in place of CSS div elements header element header element hgroup element = often used for taglines nav element nav element footer element footer element section element section element article element article element aside element aside element time element time element

Phone Links and Mobile Call Call Txt Txt Not supported by most browsers, mainly used for mobile pages

Three Column CSS Layout div’s needed for each section Code the HTML5 (index.html) index.html Code the CSS (style.css) style.css Enclose the images (plsthumb.jpg, trillium.jpg, showybg.jpg) plsthumb.jpg trillium.jpgshowybg.jpgplsthumb.jpg trillium.jpgshowybg.jpg

CSS Styling for Mobile Web You can have two domains (abc.com, abc.mobi), a subdomain (abc.com, m.abc.com), or a separate folder (abc.com, abc.com/mobile/) CSS should “restructure” the site for mobile viewers The web server should detect whether the visitor is on a PC or a mobile device and redirect them accordingly

Mobile Web Design Best Practices: Small screen size Low bandwidth Font, color, media issues Awkward controls, limited power Functionality

Typical Mobile Website Screen size min: 320 x 480 Target size min: 44 x 44 (Apple), 34 x 26 (MS), 28 x 28 (Nokia) MIT Study – average index finger width: 45-57px Average thumb width: 72px

Other Considerations Viewport Meta Tag Viewport Meta Tag Viewport Meta Tag Directives (width, height, initial- scale, minimum-scale, maximum-scale, user- scalable)

Testing Mobile Display Opera Mobile Emulator Mobilizer iPhone Emulator iPhoneyiBBDemo2.air

Mobile Madness… Mobile Site Development Assistants… jQuery Mobile with Codiqa jQTouch Turn a mobile site into a native app… Apache Cordova (formerly PhoneGap) Download mobile template and retrofit your site