Page Layout

1
Page Layout Mobile Web

• Using columns, grid systems, etc to layout sites
  for desktops and mobile

2
The Box Model
Top
Margin
Border
Left
Right
Padding
Content
Bottom
3
Margin Property

• margin (top, right, bottom, left) margin 10px
  30px 20px 5px
• margin-top
• margin-right
• margin-bottom
• margin-left

4
Normal Flow

• Two div elements vs. Nested div elements
• When coded separately (ltdiv classdiv1gtlt/divgt
  ltdiv classdiv2gtlt/divgt), the two will flow from
  top to bottom unstacked
• When coded nested (ltdiv classdiv1gtltdiv
  classdiv2gtlt/divgtlt/divgt), the two will be
  stacked where div2 uses margins from inside div1

5
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

6
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
• testfloat right margin 0 0 5px 5px border
  1px solid 000000
• Use the clear property to clear a float
  (clearleft or clearright)

7
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

8
CSS Two-Column Page Layout

• Two Columns with Left Navigation
• ltdiv idwrappergt ltdiv idleftcolumngt lt/divgt
  ltdiv idrightcolumngt ltdiv idheadergt lt/di
  vgt ltdiv idcontentgt lt/divgt ltdiv
  idfootergt lt/divgt lt/divgtlt/divgt

wrapper
leftcolumn
rightcolumn
header
content
footer
9
CSS Two-Column Page Layout

• Two Columns with Top Header and Left Navigation
• ltdiv idwrappergt ltdiv idheadergt lt/divgt ltdi
  v idleftcolumngt lt/divgt ltdiv
  idrightcolumngt ltdiv idcontentgt lt/divgt
  ltdiv idfootergt lt/divgt lt/divgtlt/divgt

wrapper
header
leftcolumn
rightcolumn
content
footer
10
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)

11
Vertical Navigation

• Home
• Menu
• Contact

• ltulgtltligtlt/ligtltligtlt/ligtltligtlt/ligtlt/ulgt
• leftcolumn ul list-style-type none
• leftcolumn a text-decoration none

Home Menu Contact
Home Menu Contact
12
Horizontal Navigation

• display none, inline, block
• Shownnav ul list-style-type none li
  display inline a text-decoration none
  padding-right 10px

Home Menu Directions Contact
13
CSS Pseudo-Classes

• link, visited, focus, hover, active
• alink color ff0000ahover
  text-decoration none color 000066

14
HTML5 Structural Elements

• Can be used in place of CSS div elements
• header element ltheadergtlt/headergt
• hgroup element lth1.h6gtlt/h1.h6gt often used for
  taglines
• nav element ltnavgtlt/navgt
• footer element ltfootergtlt/footergt
• section element ltsectiongtlt/sectiongt
• article element ltarticlegtlt/articlegt
• aside element ltasidegtlt/asidegt
• time element lttimegtlt/timegt

15
Phone Links and Mobile

• lta hreftel888-555-5555gtCall 888-555-5555lt/agt
• lta hrefsms888-555-5555gtTxt 888-555-5555lt/agt
• Not supported by most browsers, mainly used for
  mobile pages

16
Three Column CSS Layout

• divs needed for each section
• Code the HTML5 (index.html)
• Code the CSS (style.css)
• Enclose the images (plsthumb.jpg,trillium.jpg,
  showybg.jpg)

17
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

18
Mobile Web Design

• Best Practices
• Small screen size
• Low bandwidth
• Font, color, media issues
• Awkward controls, limited power
• Functionality

19
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

20
Other Considerations

• Viewport Meta Tagltmeta nameviewport
  contentwidthdevice-width, initial-scale1.0gt
• Viewport Meta Tag Directives (width, height,
  initial-scale, minimum-scale, maximum-scale,
  user-scalable)

21
Testing Mobile Display

• Opera Mobile Emulator
• Mobilizer
• iPhone Emulator
• iPhoney
• iBBDemo2.air

22
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