Advanced Interaction Design: foundation

1. Download Foundation CSS (recommend selecting customize foundation css). This download will provide all css and javascript files necessary for foundation frameworks to work. To apply create a responsive layout website using foundation, you will need to include all files provided by zurb.

2. To assemble a responsive layout website using foundation, create a new html document, and  replace doctype tag with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3.  After doctype tag, delete existing opening <html> tag, and insert following code below. This is required for responsive layout to work with Internet Explorer



 <html xmlns="http://www.w3.org/1999/xhtml" class="no-js" lang="en"> 

4. Add following code inside <head> tag. This is required for responsive layout to adjust in size for mobile devices


<meta name="viewport" content="width=device-width" />

5. Insert the following code inside head tag. This will attach Foundation supported stylesheets (css files must be placed in folder called "stylesheets")


<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">


<script src="javascripts/foundation/modernizr.foundation.js"></script>

6. Insert following javascript code before closing </body>


<script src="javascripts/jquery.js"></script>






<script src="javascripts/foundation.min.js"></script>


<script src="javascripts/app.js"></script>





<script>
$(window).load(function(){
$("#featured").orbit();
$('#featuredContent').orbit({ fluid: '16x6' });
});
</script>


<script src="javascripts/jquery.foundation.orbit.js"></script>

7. Explore the following resources to find code examples to integrate Foundation's grid structure, button styles, javascript add ons.

Additional Foundation Basic Setup
Foundation Components (set up grid, type styles, buttons, drop down nav, etc)
Foundation Javascripts (Orbit - slideshow)
Foundation Framework Forum (find answers to FAQ issues)

Orbit Extras

*To hide Orbit timer, add the follow CSS rule in the app.css. This will keep the slideshow self running, but will hide visibility of the timer interface

.orbit-wrapper .timer { visibility: hidden; }

*To hide and show navigation buttons (< >) on hover, add the follow CSS rule in the app.css.

.orbit-wrapper .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; }
.orbit-wrapper:hover .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }

Fixed (width) Layout
All containers on the page have defined widths (pixels). A fixed (width) layout will not move in and out when you resize your browser window.

Fixed Layout example {via Max Design}

Fluid/Liquid Layout
All containers on the page have their widths defined in percents. Containers adjust in size (shrink/expand) based on browser window size.

Fluid/Liquid Layout Example {via Twitter Bootstrap}

Responsive Liquid Layout
Content containers react like liquid layouts, but sizing is determined by device characteristics. Device figures out browser window size and changes how the page appears (re-size images and optimize layout) in relation to the dimensions of the browser.

Adaptive Liquid Layout
Content containers react like liquid layouts, but sizing is determined by device characteristics. Web server (where web documents are hosted) detect device attributes (browser window size) and loads a version of the site that is optimized for its dimensions and native features.

Device Resolution Reference {via SpireLight Media}
960 grid system (grid templates for Fireworks, Photoshop and Illustrator available}
Liquid Grids the Easy Way {via Max Design}
Responsive Web Design by Ethan Marcotte {via A List Apart}
Web Aesthetics by Paul Robert Lloyd {via A List Apart}

Foundation 3 (Responsive Design created using CSS Framework system created by ZURB)
Twitter Bootstrap (Responsive Design created using CSS Framework system created by Twitter)

Design Tutorial Resources
WebDesign Tuts (visual focused tutorials)
PSD Tuts (interface focused tutorials using Photoshop)
Vector Tuts (interface focused tutorials using Illustrator)

Monday, February 4, 2013

Foundation Basics Demo

Wednesday, January 30, 2013

Fixed, Liquid, Responsive Layout and Design