Links to Linda.com web design videos

You need to sign into lynda.com through the newschool portal for these links to work. Please sign on to lynda.com

  • Click on the library button in my newschool.edu.
  • Select databases and search for Lynda.com or go to the L tab and it is the last entry. You will see a link to Lynda.com.
  • Create a profile or enter your name and password if you have not yet done so, or sign in.
  • You can then click on these links, and they will take you to the video tutorial.

468 courses 9/13

release date (newest first)


  • Discover how to use Joomla! to build a website from scratch—all without a single line of code.

    Jen Kramer
    9h 41m
    Beginner
    Captions



  • Learn to use JavaScript events to respond to clicks, form input, and touch gestures in your web applications.

    Ray Villalobos
    2h 10m
    Intermediate



  • Learn to set up and configure the new Twenty Thirteen WordPress theme, and get the most of the new post format options.

    Morten Rand-Hendriksen
    32m 25s
    Beginner



  • Five-minute workflow improvements for creative pros, covering Photoshop, Illustrator, WordPress, and other tools designers commonly use.

    Justin Seeley
    23m 8s
    Beginner
    Captions



  • Drive more visitors to your WordPress site by performing search engine optimization, or SEO, with the help of two powerful plugins.

    Morten Rand-Hendriksen
    1h 14m
    Beginner
    Captions



  • Learn to create multiple, optimized web graphics from a single Photoshop or Illustrator file with the powerful and versatile Slice tool.

    Chris Converse
    26m 45s
    Beginner
    Captions



  • Leverage Smart Objects, clipping masks, and slices, in Photoshop and make graphics that will look razor sharp on any screen size.

    Chris Converse
    16m 37s
    Beginner
    Captions



  • Find out how to set up an online store with Shopify, the simple, secure solution for selling your physical and digital products.

    Morten Rand-Hendriksen
    2h 50m
    Beginner
    Captions



  • Build slideshows that harness the full power of the web with reveal.js.

    Ray Villalobos
    2h 2m
    Intermediate
    Captions



  • Shows how to get the most out of the self-hosted version of WordPress 3.x and create feature-rich blogs and websites.

    Morten Rand-Hendriksen
    6h 48m
    Beginner
    Captions



  • Find out whether Creative Cloud is right for you. Learn about installing and updating the app, working with cloud storage, and using CC on the go.

    Justin Seeley
    1h 5m
    Appropriate for all
    Captions



  • Design a responsive HTML email that will adapt to varying screen sizes and render correctly in over 30 different email clients, including Gmail, Outlook, and Yahoo.

    Chris Converse
    1h 21m
    Beginner
    Captions



  • Learn how to incorporate principles of design such as contrast, unity, and balance in specific ways that improve your website.

    Sue Jenkins
    2h 5m
    Beginner
    Captions



  • Discover prototyping, the tool for quickly and inexpensively exploring multiple iterations of designs and testing their performance.

    James Williamson
    1h 39m
    Beginner
    Captions



  • Build a to-do list widget with an editable field so users can easily create tasks and delete them as they are completed, and a drag-and-drop version that allows for quick and easy sorting.

    Joseph Lowery
    45m 50s
    Intermediate
    Captions



  • Describes how to install and configure Apache, MySQL, and PHP, known as the AMP stack, on a local development computer.

    David Gassner
    2h 49m
    Intermediate
    Captions



  • Store simple data without a database using web storage solutions like XML, JSON, YAML, and HTML5.

    Joseph Lowery
    2h 21m
    Intermediate
    Captions



  • Learn to build a scalable backend with Azure Mobile Services and connect it to an existing app, add user profiles and roles, store data in the cloud, and set up an API service.

    David Isbitski
    2h 17m
    Intermediate
    Captions



  • Shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Photoshop, InDesign, or Illustrator.

    James Fritz
    6h 1m
    Beginner
    Captions



  • Generate an interactive website from scratch with Bootstrap.

    Ray Villalobos
    3h 20m
    Intermediate
    Captions



  • Shows how to create full-featured, object-oriented web applications with the latest version of the Ruby on Rails framework.

    Kevin Skoglund
    12h 27m
    Beginner
    Captions



  • Create custom animated GIFs for your websites, mobile applications, and other interactive projects in Photoshop.

    Chris Converse
    26m 10s
    Beginner
    Captions



  • Learn about the new CSS classes, mobile-first approach, and other enhancements in Bootstrap 3.

    Ray Villalobos
    46m 57s
    Intermediate
    Captions



  • Learn to use Emmet’s abbreviated shortcuts to write full-fledged HTML, XML, CSS, and code faster and more efficiently.

    Ray Villalobos
    53m 12s
    Intermediate
    Captions



  • Find how your users think about the world, and transition those lessons to your product’s navigation, content classification, and layout.

    Chris Nodder
    1h 57m
    Beginner
    Captions



  • Takes you through the history of video on the web, and shows you how to move forward with HTML5.

    Tom Green
    1h 50m
    Beginner
    Captions



  • Learn to create an engaging, interactive, and animated timeline with HTML and jQuery.

    Chris Converse
    1h 7m
    Intermediate
    Captions



  • Learn techniques in this Photoshop tutorial to make sprite sheet creation fast and versatile.

    Chris Converse
    20m 49s
    Beginner
    Captions



  • Create and publish a complete portfolio website with Adobe Muse—without writing any code.

    Steve Harris
    2h 55m
    Intermediate
    Captions



  • Extend HTML through the rich JavaScript framework AngularJS.

    Joseph LeBlanc
    1h 9m
    Intermediate
    Captions



  • Learn how to set up a food blog using WordPress and work with two different themes and a plugin that result in three completely different looks.

    Morten Rand-Hendriksen
    1h 24m
    Beginner
    Captions



  • A hands-on approach to improving a website’s navigation, screen layout, interactive content, and forms to create a more satisfying user experience.

    David Hogue
    1h 49m
    Beginner
    Captions



  • Optimize your videos for search engines and convert the traffic to achieve your business goals.

    Ian Lurie
    1h 20m
    Beginner
    Captions



  • Use open technologies (HTML5, jQuery, and CSS) to create a slideshow that responds to mobile and desktop layouts, and learn to customize the slideshow to fit your next project.

    Justin Putney
    1h 25m
    Intermediate
    Captions



  • Learn to spiff up your HTML5 slideshows with automatic playback, integrated audio and video, and more.

    Justin Putney
    1h 15m
    Advanced
    Captions



  • Explore Flexbox, the Flexible Box Layout model, how it compares to other CSS layout techniques, and why it’s an important part of the evolution of CSS layout.

    James Williamson
    2h 3m
    Beginner
    Captions



  • Learn the concepts, tools, and techniques you’ll need to create your own animations, web experiences, and mobile applications with Flash CC.

    Anastasia McCune
    3h 56m
    Beginner
    Captions



  • Find out how to build standards-compliant websites from the ground up with Dreamweaver CC.

    James Williamson
    8h 7m
    Beginner
    Captions



  • Learn to modify the DOM (Document Object Model), one of the core components of every HTML page, with JavaScript.

    Ray Villalobos
    2h 3m
    Intermediate
    Captions



  • A primer for anyone tasked with starting a blog for a business.

    Morten Rand-Hendriksen
    1h 27m
    Appropriate for all
    Captions



  • Run your own basic usability study to find out just what your users need from your website, application, or device.

    Chris Nodder
    1h 29m
    Beginner
    Captions



  • Engage your website visitors with a unique 3D survey built with HTML5, CSS, and JavaScript.

    Joseph Lowery
    1h 12m
    Intermediate
    Captions



  • Discover how to use the complete Edge Animate toolset to lay out and animate motion graphics for your website, mobile devices, digital magazine, iBooks, and more

    Chris Converse
    3h 52m
    Beginner
    Captions



  • Learn to develop a content strategy to analyze and shape the tone, voice, and visual style for your brand.

    Patrick Nichols
    46m 23s
    Beginner
    Captions



  • Teaches how to use jQuery to build web pages that today’s users (and clients) are looking for, from complex animation effects to professional user interface controls.

    Joe Marini
    4h 52m
    Beginner
    Captions



  • Spice up dry data presentations with an interactive, visually engaging bar chart drawn with the HTML5 Canvas element.

    Joseph Lowery
    1h 7m
    Intermediate
    Captions



  • Introduces this web design framework and provides a quick overview of all of the goodies in Foundation.

    Jen Kramer
    3h 7m
    Beginner
    Captions



  • Add interactive elements like a thumbnail gallery, dropdown menus, or a contact form using Bootstrap and a simple text editor.

    Jen Kramer
    1h 25m
    Beginner
    Captions



  • Join Grant Skinner at work and at play, designing cutting-edge interactive experiences, games, applications, and frameworks with technologies like HTML5 and Flash.

    Grant Skinner
    31m 35s
    Appropriate for all
    Captions



  • Learn what Dreamweaver CC has to offer you, including the new, intuitive CSS Designer pane, a new streamlined interface, updated HTML5 and jQuery integration, and more.

    Paul Trani
    59m 13s
    Intermediate
    Captions



  • Learn about the interface changes and performance improvements that come with the latest release of Flash Professional CC.

    Anastasia McCune
    1h 11m
    Intermediate
    Captions



  • Create an HTML form with CSS and JavaScript that allows users to submit captions for photo cards.

    Joseph Lowery
    1h 11m
    Intermediate
    Captions



  • Build an online store for digital products like music, ebooks, and more using WordPress and the Easy Digital Downloads plugin.

    Morten Rand-Hendriksen
    1h 32m
    Beginner
    Captions



  • Tell a more compelling story in Edge Animate with an animated infographic.

    Chris Converse
    36m 3s
    Beginner
    Captions



  • Build an online store using WordPress and the WooCommerce plugin.

    Morten Rand-Hendriksen
    2h 57m
    Beginner
    Captions



  • Learn how to ensure the data submitted to your web forms is complete, accurate, and nonmalicious with HTML5, JavaScript, jQuery, and PHP form processing and validation.

    Ray Villalobos
    2h 51m
    Intermediate
    Captions



  • Simulate the look of anti-aliased fonts in your next website mockup with this Photoshop tutorial.

    Chris Converse
    12m 25s
    Beginner
    Captions



  • Find out what you need to build an online store and decide if WordPress is the right solution for you.

    Morten Rand-Hendriksen
    1h 3m
    Beginner
    Captions



  • Separate DOM manipulation from the data powering your web application with Backbone.js.

    Joseph LeBlanc
    1h 33m
    Beginner
    Captions



  • Learn to edit video and add custom graphics and animations to your projects in Photoshop CS6 with this Photoshop tutorial.

    Chris Converse
    24m 44s
    Beginner
    Captions



  • Put HTML5, CSS3, and recent JavaScript API technologies to work and provide an enhanced brand opportunity for your clients with custom video bumpers.

    Joseph Lowery
    31m 36s
    Intermediate
    Captions



  • Implement and customize a sortable photo gallery with jQuery.

    Chris Converse
    1h 50m
    Intermediate
    Captions



  • Explore the emerging workflow between the Adobe Creative Cloud applications and Edge Animate through a series of hands-on projects.

    Tom Green
    1h 43m
    Beginner
    Captions



  • Learn to style lists, tables, charts, and graphs with CSS, HTML5, and JavaScript.

    Joseph Lowery
    1h 37m
    Intermediate
    Captions



  • Explore how the JavaScript Object Notation (JSON) format works and how you can use it to read and share data in your web projects.

    Ray Villalobos
    1h 12m
    Intermediate
    Captions



  • Learn to speed up your design and production time in this Photoshop tutorial with the use of Smart Objects.

    Chris Converse
    29m 2s
    Beginner
    Captions



  • Use Edge Animate and HTML5, jQuery, and CSS to create a custom, interactive homepage marquee.

    Chris Converse
    1h 8m
    Intermediate
    Captions



  • Real-world responsive design strategies to control the appearance and behavior of your website across multiple screen sizes and devices.

    James Williamson
    6h 1m
    Intermediate
    Captions



  • Discover how to combine advanced HTML5 form elements to gather personal details from your site visitors and deliver a better user experience.

    Joseph Lowery
    1h 11m
    Intermediate
    Captions



  • Shows developers how to write their first Windows Store app with HTML5, JavaScript, and CSS.

    David Isbitski
    2h 16m
    Intermediate
    Captions



  • Build and package native device applications using PhoneGap and web technologies such as HTML, CSS, and JavaScript.

    Ryan Stewart
    1h 57m
    Beginner
    Captions



  • Discover CSS gradients, and add depth and texture to your web designs while reducing load times.

    Justin Seeley
    1h 13m
    Beginner
    Captions



  • Presents a short series of CSS animation techniques, such as looping, playing, pausing, and more, and puts them together in a small project: an animated infographic.

    Val Head
    1h 56m
    Intermediate
    Captions



  • Take advantage of the HTML5 geolocation feature by using the recently released Google Store Locator Utility Library, and include directions and feature filtering in your web apps.

    Joseph Lowery
    43m 51s
    Intermediate
    Captions



  • Learn to build and deploy a dynamic website using ASP.NET.

    David Gassner
    6h 24m
    Beginner
    Captions



  • Set up a video blog using WordPress and three different free themes—Twenty Twelve, Origami, and Sundance—and get three completely different looks for your site.

    Morten Rand-Hendriksen
    58m 39s
    Beginner
    Captions



  • Take a tour of a workflow that optimizes CSS code for easier navigation, organization, and readability.

    Justin Seeley
    1h 11m
    Beginner
    Captions



  • Discover how to use Photoshop layer comps to storyboard your interaction designs.

    Chris Converse
    20m 51s
    Intermediate
    Captions



  • Learn to install and configure WordPress locally on Windows with BitNami, the multiplatform, open-source server/database/scripting language and WordPress combo for Windows and Mac.

    Morten Rand-Hendriksen
    59m 31s
    Beginner
    Captions



  • Learn to install and configure WordPress locally on Windows with Microsoft WebMatrix, the free server/database/scripting language combo that sets the stage for more serious WordPress development.

    Morten Rand-Hendriksen
    43m 11s
    Beginner
    Captions



  • Discover some of the basic, not-so-basic, and downright hidden features of the Sublime Text 2 code editor, and become a more productive developer.

    Kevin Yank
    1h 40m
    Beginner
    Captions



  • Learn to install and configure WordPress locally on a Mac with MAMP, the open-source server/database/scripting language combo that sets the stage for more serious WordPress development.

    Morten Rand-Hendriksen
    45m 39s
    Beginner
    Captions



  • Learn to install and configure WordPress locally on Windows with WAMP, the open-source server/database/scripting language combo that sets the stage for more serious WordPress development.

    Morten Rand-Hendriksen
    47m 59s
    Beginner
    Captions



  • Shows you how to use clipping masks to create interesting design effects in Photoshop, while leaving the original images unharmed and ready for further edits.

    Chris Converse
    17m 29s
    Beginner
    Captions



  • Explores CSS frameworks and grids, and helps you determine when a framework is right for you.

    James Williamson
    3h 27m
    Beginner
    Captions



  • Go beyond the basics of Adobe Muse.

    Ted LoCascio
    4h 25m
    Intermediate
    Captions



  • Explore how to load dynamic content from JavaScript and jQuery using AJAX methods.

    Ray Villalobos
    1h 12m
    Intermediate
    Captions



  • Learn the basics of building complex, data-driven applications with the Facebook PHP SDK and MySQL.

    Ray Villalobos
    1h 45m
    Intermediate
    Captions



  • Takes you through the process of making a Drupal website that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices.

    Chaz Chumley
    2h 38m
    Intermediate
    Captions



  • Build a custom Joomla! 3 template that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices, leveraging Bootstrap, which ships with Joomla! 3.

    Jen Kramer
    5h 8m
    Intermediate
    Captions



  • Create rich, high-fidelity website layouts without having to delve into HTML and CSS code.

    Jim Babbage
    4h 28m
    Beginner
    Captions



  • Discover how to create a user experience that embodies utility, ease of use, and efficiency by identifying what people want from websites, how they search for information, and how to structure your content to take advantage of this.

    Chris Nodder
    1h 47m
    Beginner
    Captions



  • Establish a web presence quickly and easily with WordPress.com, without having to download any software or set up web hosting.

    Morten Rand-Hendriksen
    5h 3m
    Beginner
    Captions



  • Manage your Drupal sites even more efficiently with Drush, the shell interface for managing and scripting Drupal site development.

    Jon Peck
    1h 22m
    Intermediate
    Captions



  • Create a randomized animation with just a few lines of JavaScript and Edge Animate.

    Chris Converse
    42m 6s
    Appropriate for all
    Captions



  • Create a child theme based on an existing parent theme in WordPress and change the functionality, presentation, or styling of a site.

    Morten Rand-Hendriksen
    3h 11m
    Intermediate
    Captions



  • Set up an online magazine using WordPress and three different themes that result in three completely different looks—Max Magazine, Path, and Oxygen.

    Morten Rand-Hendriksen
    1h 18m
    Beginner
    Captions



  • Gain an understanding of variables, types, objects, arrays, operators, control structures, loops, and functions, then work through a series of hands-on examples that put these ideas into action.

    Joe Chellman
    2h 54m
    Beginner
    Captions



  • Use CSS to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively.

    James Williamson
    5h 14m
    Beginner
    Captions



  • Walks you through the process of analyzing, planning, and managing different types of content—from blog posts to videos—so you can develop a content strategy for any website.

    Janine Warner
    1h 54m
    Appropriate for all
    Captions



  • Build features that allow visitors to your online store to filter their selections interactively via sliders, drag items onto wish lists, and automatically save them locally.

    Joseph Lowery
    37m 29s
    Intermediate
    Captions



  • Evolve your current workflow to incorporate responsive design and collaboration practices, without adding too much complexity or overhead.

    Justin Putney
    1h 20m
    Beginner
    Captions



  • Introduces the LESS and Sass tools—dynamic CSS style sheet preprocessors that add features like variables, conditionals, and functions to the CSS language and can accelerate complex CSS implementations.

    Joe Marini
    1h 57m
    Intermediate
    Captions



  • Build an online application for creating personalized photo cards with user-uploaded imagery and text.

    Joseph Lowery
    44m 20s
    Intermediate
    Captions



  • Introduces the concepts behind responsive design, covering concepts like screen density, fluid grids, and responsive images, as well as actual design strategies that guide you from mock-up to testing.

    James Williamson
    2h 15m
    Beginner
    Captions



  • Shows aspiring web designers how to quickly create webpage prototypes with text and object styles, modular layouts, and interactivity.

    Michael Murphy
    5h 7m
    Intermediate
    Captions



  • Shows how to combine the utility of WordPress and the power of Dreamweaver to transition existing websites to the WordPress platform.

    Joseph Lowery
    5h 44m
    Intermediate
    Captions



  • Leads you through the process of building an HTML website, from creating a new page to building links and tables, using simple, repeatable steps.

    James Williamson
    4h 32m
    Beginner
    Captions



  • Extend your Drupal 7 sites with custom modules, which allow you to create everything from admin interfaces to forms.

    Jon Peck
    2h 57m
    Advanced
    Captions



  • Walks step-by-step through the process of reviewing the content and markup of a web site to improve its ranking in search engine results.

    Peter Kent
    1h 43m
    Intermediate
    Captions



  • Discover Bootstrap, a free web development tool from Twitter that, with a little bit of CSS and JavaScript experience, makes building websites quick, intuitive, and fun.

    Jen Kramer
    2h 38m
    Beginner
    Captions



  • Build a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, jQuery, and the tools in Dreamweaver.

    Chris Converse
    1h 6m
    Intermediate
    Captions



  • Build a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, and jQuery.

    Chris Converse
    58m 25s
    Intermediate
    Captions



  • Discover how to use the robust set of Magento Go tools to create a shopping cart and create, manage, and grow your online business.

    Justin Seeley
    1h 57m
    Beginner
    Captions



  • Make your website more readable and efficient to download with Chris Converse’s responsive website techniques.

    Chris Converse
    1h 31m
    Beginner
    Captions



  • Introduces the EaselJS framework and the HTML5 Canvas element, and shows how to create interactive web content with this open web standard.

    Ray Villalobos
    1h 28m
    Beginner
    Captions



  • Explains the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages, and provides an introduction to HTML5 and CSS.

    Bill Weinman
    5h 34m
    Beginner
    Captions



  • Create a web site that works across multiple browsers and devices with Adobe Dreamweaver CS6.

    Paul Trani
    2h 48m
    Beginner
    Captions



  • Shows how to convert text or graphics into a mouse-sensitive tooltip with HTML and jQuery.

    Chris Converse
    54m 23s
    Intermediate
    Captions



  • Shows how to convert text or graphics into a mouse-sensitive tooltip with jQuery and Dreamweaver.

    Chris Converse
    54m 15s
    Intermediate
    Captions



  • Learn how to use media queries and the new Fluid Grid Layout feature in Dreamweaver to create a single web site that delivers different layouts to desktops, tablets, and other mobile devices.

    Joseph Lowery
    2h 6m
    Appropriate for all
    Captions



  • Demonstrates different design strategies, best practices, and actual code examples for creating a web site that can adapt to multiple devices, screen sizes, and browsers.

    Morten Rand-Hendriksen
    2h 55m
    Intermediate
    Captions



  • Take a first look at Node.js, a software system that makes it possible to write full web applications entirely in JavaScript.

    Joseph LeBlanc
    2h 10m
    Beginner
    Captions



  • Create a mobile-ready version of an existing WordPress web site by leveraging plugins.

    Morten Rand-Hendriksen
    44m 26s
    Beginner
    Captions



  • Find out how to add stylized dropdown menus in Dreamweaver using HTML, CSS, JavaScript.

    Chris Converse
    25m 49s
    Intermediate
    Captions



  • Find out how to add stylized dropdown menus to your web site using HTML, CSS, and JavaScript.

    Chris Converse
    24m 1s
    Intermediate
    Captions



  • Learn how to install and configure a local Linux server optimized for web application development with the LAMP (Linux/Apache/MySQL/PHP) software stack.

    Jon Peck
    1h 17m
    Beginner
    Captions



  • Understand where Fireworks fits into the workflow for digital media projects ranging from simple web page prototyping to interface design for rich Internet applications.

    Tom Green
    6h 51m
    Beginner
    Captions



  • Discover how to set up a portfolio of your work using WordPress and three free themes that result in three unique looks for your site—all without writing code!

    Morten Rand-Hendriksen
    1h 3m
    Beginner
    Captions



  • Create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator.

    Justin Seeley
    5h 27m
    Appropriate for all
    Captions



  • Covers the major workflow elements of creating mobile web applications with jQuery Mobile, from building the components of a basic app to extending it with themes and data feeds.

    Ray Villalobos
    3h 13m
    Intermediate
    Captions



  • Reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Photoshop with navigation bars and buttons.

    Justin Seeley
    4h 53m
    Appropriate for all
    Captions



  • Explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences.

    Joseph Lowery
    2h 25m
    Intermediate
    Captions



  • A project-style course that teaches how to build a Flash-based game with Flash Builder 4.6, Flash Player 11, and the Starling framework.

    Lee Brimelow
    2h 57m
    Intermediate
    Captions



  • Focuses on the theories behind web fonts: showing what makes a good font, why different fonts look the way they do, and how they affect the look of your web page.

    Laura Franz
    6h 52m
    Appropriate for all
    Captions



  • Shows how to install the latest version of PHP, the popular web application server, and reviews the performance enhancements and language improvements in the 5.4 release.

    Drew Falkman
    1h 1m
    Intermediate
    Captions



  • Combines the use of Adobe InDesign and Digital Publishing Suite to add an interactive web experience to your digital magazine.

    Chris Converse
    16m 43s
    Intermediate
    Captions



  • Introduces developers and designers who are already familiar with HTML and JavaScript to Facebook app development.

    Ray Villalobos
    3h 0m
    Intermediate
    Captions



  • Add dynamic data to a PHP-enabled web site in Dreamweaver CS5 and CS6.

    David Gassner
    4h 55m
    Intermediate
    Captions



  • Discover how to create an app-like experience for iPad with HTML, CSS, and jQuery, while bypassing the need for Objective-C or the App Store.

    Chris Converse
    1h 27m
    Beginner
    Captions



  • Take a first look at Edge, a new tool from Adobe for creating interactive motion graphics, which utilizes the latest web standards including HTML5, JavaScript, and jQuery.

    Ray Villalobos
    1h 56m
    Beginner
    Captions



  • Integrate video into an EPUB destined for the Apple iBookstore or a web site.

    Chris Converse
    11m 22s
    Intermediate
    Captions



  • Shows Flash developers how to create dynamic content in the browser using HTML5, CSS, and other related technologies.

    Lee Brimelow
    3h 16m
    Beginner
    Captions



  • Enhance your Joomla! site by adding advanced functionality through extensions, plugins, and templates.

    Laura Gordon
    3h 37m
    Beginner
    Captions



  • Covers advanced HTML5 topics like geolocation, mobile development, web sockets, Web SQL, and web workers.

    Andy Olsen
    3h 9m
    Intermediate
    Captions



  • Ten-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more.

    Ray Villalobos
    2h 10m
    Intermediate
    Captions



  • Learn CSS positioning concepts like the CSS box model, floats, and clears and gain a deeper understanding of how HTML and CSS work together to create the look of your web page.

    Candyce Mairs
    3h 57m
    Beginner
    Captions



  • Shows Flash designers how to incorporate ActionScript code into projects and create interactive presentations and applications.

    Todd Perkins
    7h 8m
    Beginner
    Captions



  • Add a wraparound effect to your homepage marquee with a concise bit of jQuery code.

    Chris Converse
    35m 51s
    Intermediate
    Captions



  • Add a wraparound effect to your homepage marquee with Dreamweaver and a concise bit of jQuery code.

    Chris Converse
    41m 46s
    Intermediate
    Captions



  • Learn intermediate Flash techniques by constructing a site entirely in Flash.

    Shane Rebenschied
    16h 3m
    Beginner



  • Tips, techniques, and features include accessibility, site management, rollovers, forms, frames, and how to get your site online.

    Garo Green
    6h 35m
    Beginner



  • ActionScript in Flash MX features include dot syntax, events, pathing, variables, loading external content, preloaders, functions, logic, and Boolean.

    Chris Byerley
    3h 55m
    Intermediate



  • Covers working with text, creating links, tables, frames, cascading style sheets, forms, and JavaScript actions.

    Shane Rebenschied
    14h 54m
    Beginner



  • Walks through the essential features of Flash MX, including drawing tools, importing bitmaps and vectors, animation, masking, and ActionScripting basics.

    Shane Rebenschied
    15h 36m
    Beginner



  • Covers the essential features of Flash for new users: the authoring tool, drawing tools, importing, and more.

    Garo Green
    6h 17m
    Beginner



  • Over three hours of instruction on basic authoring and getting up to speed with Dreamweaver 4.

    Lynda Weinman
    3h 22m
    Beginner



  • Develop your power-user skills with professional tips and techniques including table coding, layers, CSS, and building DHTML menus.

    Donna Casey
    8h 45m
    Intermediate



  • Learn the secrets of Flash 5 mastery, including tips on site design strategy and workflow.

    Shane Rebenschied
    11h 9m
    Intermediate



  • Create highly interactive and fast-loading web content; learn workflow, file size, and performance optimization.

    Shane Rebenschied
    1h 46m
    Intermediate



  • Focuses on skills for common web graphics, such as buttons, slicing, rollovers, optimization tools, animation, and image maps.

    Donna Casey
    4h 59m
    Beginner



  • Teaches the fundamentals of object-oriented programming inside of Flash.

    Josh Ulm
    6h 18m
    Advanced



  • Shows integral features of Photoshop 6 and ImageReady 3 for the web.

    Bruce Heavin
    7h 23m
    Beginner



  • Shows how to optimize images; create JavaScript rollovers, slices, and animation; and integrate Fireworks with Dreamweaver.

    Garo Green
    5h 40m
    Beginner



  • Covers the underlying principles of animation and how to add and apply them to Flash work.

    Chris Casady
    1h 45m
    Appropriate for all



  • Topics include site management, linking, rollovers, image maps, behaviors, DHTML, CSS, and HTML styles.

    Lynda Weinman
    6h 2m
    Beginner



  • Shows Dreamweaver users how to utilize UltraDev to create database-driven web sites.

    Simon Allardice
    3h 25m
    Beginner



  • Get a firm grasp of the Director interface, as well as a basic understanding of Director’s scripting language, Lingo.

    Vince Parker
    13h 41m
    Beginner


04 CSS3 Layout

CSS3 provides several new ways to do horizontal (and vertical) layout. The easiest is multiple columns within a box. The more flex box can arrange multiple child boxes horizontally or vertically within a parent box.

Some CSS3 properties require vendor prefixes, as explained in Browser Design Strategies.

Multiple Columns

It’s easy to create multi-column layouts using the new CSS3 multiple columns property. The document flow can create more columns inside a box than is visually pleasing, so change it to one, two, three or four columns, depending on the size of the screen. A good use of this would be in media queries, where small screens get one column, tablets get two and computer monitors get three or more columns.

Multi-Columns Interactive

CSS Code View

Live Demo

What is “Fun?”

“I’ll know it when I see it.”

As designers, we get a lot of similarly elusive adjectives from clients, as they tell us what they want their sites to be: “The site needs to be ‘cool,’” “It should be ‘exciting,’” “I want it to ‘pop.’” When we ask them to clarify, the answer we get back sounds a lot like “I can’t tell you what it is, but I’ll know it when I see it.”

“Fun” is a particularly difficult concept to define. And we’re starting to hear it a lot more from clients as we design for different contexts of use.

So what’s a designer to do?

Flex Layout

Flex Layout provides a more efficient way to lay out,distribute and align both the elements and the space in a parent container, even if the parent or children’s size is unknown or dynamic. The child items’ width, height and order can be set to best fill the space that they take up.

Flex Layout is a module, meaning that there are a number of properties that make flex work. It has its own terminology, and the following diagram will help explain it.

flex layout description images from W3
An illustration of the various directions and sizing terms as applied to a row flex container.

The first thing to do is to initiate the flex container.

The container can be a block display: flex;or inline display: inline-flex .

The flex container has a main axis, the primary direction along with flex items are laid out. Use flex-direction: horizontal; or flex-direction: horizontal-reverse; to specify the main direction as horizontal, from left to right or right to left. Use flex-direction: vertical; or flex-direction: vertical-reverse; to specify the main direction as vertical, from left to right or right to left.

See the numbers reverse in the demo when the direction is reversed.

The content is justified by setting the justify-content: to flex-start, center, flex-end, space-between and space-around.

Space between collapses the padding between the flex container and the first and last item

Flex Box Container

CSS Code View

Live Demo

1
2
3

Flex-Wrap

Flex does not automatically wrap its children into multiple lines within the container. If there are too many flex-items, the they extend beyond the flex container’s boundary. Wrapping the flex items will wrap them into multiple lines below (or above with wrap-reverse). The demonstration below takes the setting from the previous demo.

CSS Code View

Live Demo

1
2
3
4
5
6
7
8
9

Flex Item Align and Order and Proportion

Then there is a cross axis, perpendicular to the main axis along which flex items can be aligned. Watch the boxes align according to the cross axis, or have them stretch so that they are all the same. Unlike the previous boxes, the height is not specified, but driven by the content.

Align

Align flex item can be applied to any element, and here the third flex-item is flex-end , where the others are flex-start . Put them all on stretch, and you have the perfect equally long shaded columns that is the aim of the Holy Grail Layout below.

Order

The order of the boxes is changed by specifying how many items forward or backward the box should move.

Proportion

Width of the boxes is determined proportionally, and specified for each flex-item by the flexproperty.

CSS Code View

Live Demo

Different amount of texts in these boxes shows how the cross-axis align function works as there is control of how the boxes align or stretch to all be the same hight no matter how little content. The flex value for this box is 1
When there is not much text, but more than in the last row. The flex value for this box is 1.5.
The flex value for this box is 1, and is self-aligned.

Flex Grow Shrink and Basis

Rather than specify a fixed ratio, it can be given parameters by the Flex Layout Algorithm and dynamically determine the fit of the flex-items to the remaining space, or lack of space, using grow, shrink and basis controls.

Grow

The Flex layout Algorithm defines the ability for a flex item to grow, starting from the basis number, if the content requires it. It calculates the proportion for each flex item inside the flex container. Flex growth is the amount a flex item can grow in proportion to the other flex items. If all items have flex-grow set to 1, every child will have an equal potential to expand if their content requires it. If one of the children has a value of 2, that child would take up twice the growth as the others.

Shrink

Flex-shrink does the opposite, with a higher number defining how much greater the shrinkage of an item. See what happens when you cut the width of the parent flex box by 50%. The box with the highest Flex-shrink number shrinks the most.

Basis

Flex-basis is the starting or default size of an element before the remaining space is distributed. It’s default is auto.

Align

Align flex item can be applied to just one flex-item, and the last one is stretch, where the others are flex-start.

Order

Flex-item number 2 has been moved one place to the front with a flex-order: -1.

CSS Code View

Live Demo

Different amount of texts in these boxes shows how the cross-axis align function works as there is control of how the boxes align or stretch to all be the same hight no matter how little content. The flex value for this box is 1 0 8rem.
When there is not much text, but more than in the last row. The flex value for this box is 1 0 6rem.
The flex value for this box is 1.5 0 5rem.

Page Layout Demonstration

Once upon a time, a very long time ago, there was a Holy Grail Layout with a three column body, a header and footer. This was accomplished without tables. Can you imagine that? This was long before mobile changed everything, so it was not very friendly to a change in viewport. Times have changed, and so has the technology. A perfectly good Holly Grail that is responsive, so if you shrink the screen down, you will see the three columns become a stack of boxes.

CSS Code View

Live Demo

Holly Grail Layout

Many articles have been written about the Holy Grail layout, and several good templates exist. However, all the existing solutions involve sacrifices: proper source order, full-width footers, and lean markup are often compromised in the pursuit of this elusive layout.

A recent project has brought my personal grail quest to an end. The technique I’ll describe will allow you to deploy the Holy Grail layout without compromising your code or your flexibility

Navigation
Side Column

Read the full article by MATTHEW LEVINE from January 30, 2006, but know that his advice belongs to a previous era.

Usage

High profile usage is just starting to happen (2015) and here are a few examples that use Flex to power their grids.

Know that there still are issues, but they will be smoothed over with time. Here are a few workarounds.

04 CSS Layout Strategies

Week 4
9/24

CSS layout strategies. Various layout strategies including block vs inline, relative and absolute positioning, floats and floating layouts and the z-index property. Overview of layout strategies currently used to build pages in web design. Activity: Translate Photoshop Comp into HTML/CSS using different layout strategies.

Homework

Use different layout strategies to build your website. Read chapter 11. Due: The following week. First Quarter Assessment: Have your landing page, first two assignments and a good stab at coding the last and this assignments up by Wednesday Night so I can grade them by the following Friday.

Materials

Additional materials for this unit can be found by following these links (52 pages):

Goals

The goals of this unit are to:

  • Understand how the native document flow works, and how to alter the normal flow for layout purposes.
  • Investigate several layout strategies beginning with floats, which are so ubiquitous that they often eclipse the other strategies that we present.
  • Know how to effectively use absolute positioning.
  • Be comfortable in applying these various options to solve the layout.
  • Use grids systems when appropriate.

Outcomes

At the end of this unit, students will have:

  • Come to understand how to position elements in CSS
  • Become familiar with how to use the ubiquitous float property to create multicolumn layouts.
  • Be familiar with the other layout properties used to create documents on the web.

Step-by-Step

15 Review homework and answer questions.
30 Box Model, Floats and Positioning
45 Floating Layouts, Layout Grids based on Floats and Beyond Floats
10 break
10 Demonstration: Layout Strategies
20 Demonstration: Learning to use Floats
10 Practice: non-float layout strategies
20 Demonstration: Layout Demonstration

Talking Points

Topics covered in the reading:

Chapter 11: Layout with Styles

  1. Considerations When Beginning a Layout 276
  2. Structuring Your Pages 279
  3. Styling HTML5 Elements in Older Browsers 286
  4. Resetting or Normalizing Default Styles 290
  5. The Box Model 292
  6. Changing the Background 294
  7. Setting the Height or Width for an Element 298
  8. Setting the Margins around an Element 302
  9. Adding Padding around an Element 304
  10. Making Elements Float 306
  11. Controlling Where Elements Float 308
  12. Setting the Border 311
  13. Offsetting Elements in the Natural Flow 314
  14. Positioning Elements Absolutely 316
  15. Positioning Elements in 3D 318
  16. Determining How to Treat Overflow 320
  17. Aligning Elements Vertically 322
  18. Changing the Cursor 323
  19. Displaying and Hiding Elements 324

Current Practices

Photography and Illustration portfolio sites to mull over:

  • Open Society
  • Brent Stirton – flash
  • John Stuart
  • Jill Greenberg
  • Paulo Boccardi
  • Don Friesen

    News and External Resources

    Cheat Sheets that list all of the different HTML5 and CSS3 tags you can use. Print them out, use them. Explore and get to know them. You can use these during the quiz next week:

    1. HTML5 Cheat Sheet all of the different tags and the attributes they can have.
    2. CSS3 Cheat Sheet all of the different properties and all possible values or value types they take.

    Install these Plug-ins if you use Firefox or Chrome. They will facilitate your web development. Do not forget to activate the Show Developer menu in menu bar under the Advanced tab in Safari’s Preferences. Detailed help pages are available for Safari Web Developer are available.

    1. Firebug Plug in for Firefox and Chrome.
    2. Web Developer Plug in for Firefox and Chrome.
    3. Safari Web Developer Help Pages.

    Resources that will aid your understanding of HTML and CSS.

    1. Google University: HTML, CSS and Javascript from the Ground Up.
    2. Can I use this CSS?Updated list of browser support.
    3. Dive Into HTML5Book on HTML5.
    4. W3.org Status of CSS level 3 specifications Keeper of the standards specifications used to create CSS support in the browsers.

    CSS Prefabs

    There are many frameworks that allow you to build your websites using preexisting CSS. They arose because layout in CSS is neither intuitive nor easy, and go from simple grids to complete font-end frameworks.

    Simple Grids

    1. Twitter Blueprint
    2. 960 Grid System
    3. UnSemantic
    4. Frameless and Golden Grid System

    Complete Front End Frameworks featuring HTML5, CSS3 and Javascript building blocks for rapid website production.

    1. Twitter Bootstrap
    2. Create JS
    3. Foundation
    4. HTML5 Boilerplate
    5. Skeleton
    6. KickStart

    CSS Authoring Frameworks

    1. Compass

    CSS Extention Languages

    1. Less
    2. Sass
    3. Stylus

    Modding Prefabs

    There are many services that allow you to build your own websites, and you can use the HTML and CSS skills you learn here to modify them. This can give you the best of both worlds, for you can use their platform and templates, but modified so that they look unique in ways that goes beyond template options.

    build your own

    1. WordPress Build your own with lots of templates to choose from.
    2. Joomla For more complicated websites.
    3. Drupal For more the most complicated websites.

    Or use a pre-made platform. Note that there are limitations imposed, like Wix depends on absolute positioning to give it flexibility in designing the site, but that end up curtailing the flexibility in other ways.

    1. Tumbler Customize the experience with HTML and CSS.
    2. Cargo Collective
    3. Coroflot
    4. Indexhibit
    5. Wix
    6. Square Space

    Lynda.com is a resource for instructional videos. She has been at it for a long time, and there are a lot of videos on HTML (34) and CSS (36). They can be a great resource, and in addition to my performance in class, the class notes and portal, the good and the web itself, there are no reason for not knowing. That said, there are too many titles to intuitively know what to do, and this section will appear whenever there are supporting videos at Lynda.com

    Signing on to lynda.com

    • Click on the library button in my newschool.edu.
    • Select databases and search for Lynda.com or go to the L tab and it is the last entry. You will see a link to Lynda.com.
    • Create a profile or enter your name and password.

    Lynda.com Web Video Tutorials

    As of 9/13.

    Definitions

    These are the terms that participants should be familiar with during this unit:

    box model

    CSS (Cascading Style Sheets) describes the rendering of documents on various media. When textual documents (e.g., HTML) are laid out on visual media (e.g., screen or print), CSS models the document as a hierarchy of boxes containing words, lines, paragraphs, tables, etc. each with properties such as size, color and font.

    This module describes the basic types of boxes, with their padding and margin, and the normal “flow” (i.e., the sequence of blocks of text with margins in-between). It also defines “floating” boxes, but other kinds of layout, such as tables, absolute positioning, ruby annotations, grid layouts, columns and numbered pages, are described by other modules. Also, the layout of text inside each line (including the handling of left-to-right and right-to-left scripts) is defined elsewhere.

    Boxes may contain either horizontal or vertical lines of text. Boxes of different orientations may be mixed in one flow. (This is a level 3 feature.)

    Inline Text Effects

    This CSS3 module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, text decoration and text transformation.

    Positioning Schemes

    In CSS 2.1, a box may be laid out according to three positioning
    schemes:

    1. Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
    2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
    3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
    CSS3 Floating Boxes

    A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is a (non-normative) introduction to float positioning and content flow; the exact rules governing float positioning are given in the next section.

    A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the top of the floated box is aligned with the top of the current line box.

    If there isn’t enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

    Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist. However, line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Any content in the current line before a floated box is re-flowed in the first available line on the other side of the float. In other words, if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.

    Floats and Positioning Level 3

    (This is a more advanced development of floats to exploit their wide usage in layout. It is one of the layout strategies coming out of the W3.org) CSS Floats and Positioning Level 3 allows authors to have text and other inline content wrap around specified elements, thereby allowing for the creation of more intricate layouts than is currently possible with existing CSS floaters. Specifically, CSS 3 Floats, also known as “positioned floats”, can be absolutely positioned on a web document, while still affecting the document flow. Authors can individually specify whether intersected block elements surrounding a positioned float (e.g. paragraphs, divs, etc.) overlap with the positioned float, and if so how they overlap with it. Positioned float can also be styled with a wrap-shape property, which specifies both how text within the positioned float is laid out and how content outside the positioned float wraps around the positioned float. It is also possible to define a shape based on transparency values within an image.

    Grids

    A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.
  • 04 Homework

    1. Watch the last video in the Don’t Fear the Internet series on layout:
    2. Don’t Fear the Layout

        

          
    3. The last part of the video touches on material that we will cover in Week 8: Responsive Design.
    4. The week 2 article on designing for the web had 7 steps, the last is a photoshop comp of what you want your website to look like. Last week’s assignment was to try and build that comp, but your skill level did not allow you to realize that assignment.
    5. Using what you have learned about Layout Strategies, build your photoshop comp using HTML and CSS.
    6. Many of you may not have caught the intermediate step that was due last week, to test all of your selectors, making sure that you can target each of the elements.
    7. Just target the elements and color the background.
    8. The first two sections of the lynda.com video by Chris Coyer of CSS Tricks on Creating a WordPress Template covers turning a photoshop comp to a HTML/CSS web page.
    9. CSS Tricks is a website by Chris Coyer with lots of good information. He has a video on positioning, where he covers static, relative, absolute and fixed values, if you would like one additional resource:

    Grading Criteria

    I am looking to see how well you can juggle these boxes, and it takes a while to move them around through the document flow.

    It is a lot like when you were a kid, playing with blocks, only here that world is upside-down, as you start on top, and build your way down. You will get the hang of it by doing it.

    Validating your work often is a good technique to keep you on the strait and narrow path. Once you get better, you need not check so often, but right now, check every few lines of code.

    I will be grading you on levels of confidence, consistency, creativity, innovation, precision, accuracy, efficiency and the ingenuity as you manipulate the elements in the document flow to build your page.

    04 Layout Demonstration

    Going over how everything works does not mean you understand it. This demonstration will help you understand how to lay out a page. It explains step by step how to lay out a page using no floats, and then explains how to use floats to create the same page. It assumes familiarity with the information contained in these other pages in this section, and with the previous sections:

    The Document’s Default Behavior

    In the first homework assignment you marked up content using heads <h1><h6> and paragraphs <p>, added links <a> and images<img>, and grouped certain content together using the generic <div> or the more semantic HTML5 tags like <header>, <nav>, <section>, <article>, <figure> and <figcaption>.

    At this time you did not nest too many tags inside of other tags, but know that every tag you created was already nested as a child of the body tag. As you develop the layout, you will increasingly nest tags inside of one another, usually to define and group an area of the layout, like the header, right column, main content, navigation or footer.

    When you look at the first assignment, you see the browser’s default style at work. The content vertically lines up, one below another, while the text flows left to right.

    To better understand this structure, change the embedded style included in the HTML5 template, which looks like this:

    <style type="text/css">
    .example {
    }
    </style>
    

    To an embedded style that puts an outline or border on all elements, like this:

    <style type="text/css">
    	body, section, header, nav, article, p, h1, h2, footer, nav, figure, figcaption {
    	outline: 2px solid red;
    }
    a, img, span, strong {
    	border: 2px solid green;
    }
    </style>
    

    A red outline is put on the elements that are displayed according to the block mode and a green border is put on the elements that are displayed according to the inline mode.
    example with borders

    Each element of the assignment now has an outline or border.

    Take a moment and explore the way the red outlined block elements stack below one another. Each element’s width extends all the way out to the parent by default.

    Inline elements with green borders styles the content (type) in block elements, flowing from insertion point to the end of the box. It then start over on the next line. Not all languages flow horizontally or left to right, though english does, so we can say that type starts left and flows horizontally.

    The other display modes besides block and inline are tables, which are not to be used for layout purposes, and the absolute display mode, which completely removes elements from the document flow.

    Styling the Elements

    I use an embedded style sheet for this example, but you should use an external style sheet. Because the rules act at a distance, you need selectors placed in front of the rules to target the elements.

    The best selectors to use are type selectors, that select the element by its type, i.e. p for selecting all paragraphs. You can combine them to get more specific, like article div p, which targets only those paragraphs in the div in the article. If that doesn’t work, you can use the pseudo class selectors like :nth-child(N) or use class selectors if you want to target certain elements, but avoid using ids, as they are much stronger than classes and tend to dominate the cascade hierarchy.

    Select each of the elements in the document and change the background color to know that you have successfully targeted that element with a CSS rule.

    Altering the Default Layout Order

    The block elements are like a child stacking playing blocks one on top of the other, only upside down, starting from the top with one box below the other. This is the normal document flow mode, and it is similar to how a word processor works. The difficulty of laying out a document using the normal document flow is that you have to build your way to every part of the document. The benefit is that if one thing changes, everything else adapts, if it’s done right.

    Most Design students layout their documents using Indesign (Illustrator, or even Photoshop). The activity of creating and moving design elements where you want them is what layout is all about. Forget the normal document flow! The absolute display mode is similar to the layout mode of Indesign, but be careful. The web is a much more flexible environment than print, and the layout has to accommodate that. You need to be judicious in the way you use absolute positioning.

    The flexibility of the web as a medium means the layout is much more likely to be determined by the normal document flow, whose default behavior we’ve just looked at, than the rigid absolute positioning used for print. This means that you can’t just pick up any item and move it to where it looks best. Instead, you have to figure out how to best position it where you want, using all of the previous elements in the normal document flow. This is possible with planning. That’s why the emphasis on the creative process with thumbnails, mood boards, wireframes and a Photoshop comp before starting to code the layout.
    wireframe

    Yes, there is not much spontaneity in coding the layout, but then, there is little spontaneity in prepping an Indesign document for print. The creativity and spontaneity of web design happens in the early planning stages. After that it’s mostly creative problem solving as you try to execute the layout. You are ahead of the game if you can see this as a puzzle to be solved.

    Homework Assignment Not Using Floats

    The following step by step tutorial is meant to explain the homework assignment and uses the techniques explained in the Beyond Floats article.

    You start by opening up an HTML5 template and pasting into a blank document. Paste in the CSS reset at the beginning of the style tags in the head. This prepares your document for coding.

    Setting Up the Page

    While we want the page to center in the window, if the window becomes too wide, it looks kind of funny, so we put in a wrapper div with a max-width: 1300px to keep the page from centering when the window gets wider than that. It’s tradition to call that first div “wrapper,” though you could just as easily select it with the selector body>div, which selects any immediate child div tags of the body tag.

    <div class="wrapper">
    

    with the style being:

    .wrapper {
    	max-width: 1300px;
    }
    

    If some of your pages have enough content on them that they force a scroll bar, the entire content shifts 8 pixels to the left. The web site then moves to the left as you move from a page that does not require a scroll bar to one that does and vice versa. If that annoys you, force a vertical scroll bar to appear by making the page 1 pixel more than the height of the window:

    html {
    	min-height: 100%;
    	margin-bottom: 1px;
    }
    

    This page is long enough to force a vertical scroll bar, so it’s not an issue, but if you were to use this technique on your web site, it very well might be an issue.

    Next comes section tag to create the actual page for us. We want to center the page inside of the wrapper div, so we need to specify its width (960px) and set the left and right margins to auto. I set the background color for the page to middle grey, create a margin on top to push the header element down 70px, and finally, set the positioning to relative, so that any absolute positioning will be in relation to the page and not the body.

    section {
    	width: 960px;
    	margin: 0 auto;
    	background: #888;
    	padding-top: 90px;
    	position: relative;
    }
    

    The first element is the header. This is the bar with the name and picture on it. The position of the bar is taken care of by the padding-top (90px) of the section element. The width is a little tricky. I want to put a shadow on the header element (shadow 1), but do not want the shadow to bleed out over the right edge of the page. The solution is to shorten the header to just 930px so that the shadow looks good. Had I not restricted the width of the element it would have expand to 100% of the parent window, and the shadow would have fallen outside of the header, and the page as well.

    Nested inside the header is div that is given a width (848px) plus padding-left (112px) that equals 960px, the same width as the page. Because the div comes after the header in the way the computer reads the page, it is drawn on top. The HTML5 code for the header is:

    <header class="shadow_1">
    	<div class="">
    		<h1>Piet Mondrian</h1>
    		<figure class="shadow_2">
    			<img src="images/Mondrian.jpg" alt="Portrait of Piet Mondriaan" />
    		</figure>
    	</div>
    </header>
    

    The CSS for the header and div is:

    header {
    	width: 930px;
    }
    header div {
    	height: 90px;
    	width: 848px;
    	background: #eee;
    	outline: 1px solid black;
    	padding: 20px 0 0 112px;
    	position: relative;
    }
    

    Horizontal Layout Strategies: Absolute Position

    Since the vertical relation between boxes is pretty much taken care of, most of the strategies concern how to place boxes horizontally next to one another. The relation between name and the picture provide us with an opportunity for using one of these strategies. I could choose to float the name to the left. That would put the picture on the right next to the name. I could also change the display from the block to inline, and vertically center the two, but I use absolute positioning instead.

    The h1 element falls into place because of the padding added to the parent. As you can see, the header div has 20px of padding added to the top and 120px of padding added to the left padding: 20px 0 0 112px;.

    I then apply absolute positioning to the figure that holds the picture. The figure no longer occupies any space in the document flow and floats above that layer by default. I’m free to move the figure up 70px, which is specified as top: −70px, and either 640px to the left or 40px to the right of the parent element. (640px + 280px (width of the figure) + 40px = 960px). It does not matter whether I go from the left or right side of the parent element since its width is fixed.

    header h1 {
    	color: #000;
    	font-family: 'Anton', serif;
    	font-size: 48px;
    	font-style: normal;
    	font-weight: 400;
    	letter-spacing: 0.108em;
    	word-spacing: 0em;
    	line-height: 1.2;
    }
    header figure {
    	position: absolute;
    	height: 260px;
    	width: 280px;
    	top: -70px;
    	left: 640px;
    }
    

    Judicious use of Absolute Position

    I’ll also use absolute positioning to horizontally layout the aside, and nav elements. The potential problem this creates is a lack of flexibility, so I have to be careful, and be prepared to adjust things manually if there are changes. Some problems are avoided by using it only for horizontal placement, but I still need to be careful. Additional links would require a larger image or more space to push down the text box, for example, otherwise the navigation would overlap. This is the HTML with the content removed:

    <nav>
    	<h2 class="shadow_2">WORK
    	</h2>
    	<ul>
    		<li><a href="#">… </a></li>
    		<li><a href="#">…</a></li> 	<li><a href="#"> …</a></li>
    		<li><a href="#">…</a></li>
    	</ul>
    </nav>
    <aside>
    	<figure>…</figure>
    	<figure>…</figure>
    	<figure>…</figure>
    	<figure>…</figure>
    </aside>
    

    The nav is positioned absolutely to the right (0px) with a top margin of 130px and a right margin of 80px. This removes it from the document flow and positions it below the picture. Adding padding moves it down and over to the left, correctly placing it according to the comp. I could just as well have positioned it from the left side of the document. Flexibility is increased by not invoking absolute positioning for vertical positioning (by using top:), leaving that up to the document flow. That would have locked in the vertical position of the navigation to the page, causing a problem if I were to change the height of the header.

    The navigation is targeted by three classes, first the anchor itself, which is made to act like a block so it will act like a box, the second is a:hover, which changes the style when you roll over, and lastly a:active, which changes the style when you click on the button.

    nav {
    	position: absolute;
    	right: 0px;
    	width: 120px;
    	height: 140px;
    	padding: 40px;
    	margin: 130px 80px 0 0;
    	background: #bbb;
    }
    nav a {
    	display: block;
    	width: 100px;
    	height: 25px;
    	text-decoration: none;
    	background: #ccc;
    	padding: 5px 10px;
    	margin: 3px 0;
    	color: #333;
    }
    nav a:hover {
    	text-decoration: none;
    	background: #eee;
    	color: #000;
    }
    nav a:active {
    	text-decoration: none;
    	background: #fcc;
    	color: #000;
    }
    

    Though the aside has no width, the figure that make up its content is 200px in total (160px for the figure and 40px for the left margin). Giving the article a left margin of 200px and a padding of 40px creates a place in the layout for the article.

    The article content has a width of 960px −80px −200px, or 680px. Because the navigation is absolutely placed you have be aware of keeping content out of its way. This is the downside of absolute positioning, but it’s taken care of in this layout by the large picture in the figure tag.

    <article>
    	<figure>…</figure>
    	<div>
    		<div class="column1">
    			<h2 class="shadow_2">EXPERIENCE</h2>
    			<p>…</p>
    		</div>
    		<div class="column2">
    			<p>…</p>
    			<p>…</p>
    			<p>…</p>
    		</div>
    	</div>
    </article>
    

    The CSS for these elements is:

    aside {
    	position: absolute;
    }
    aside figure {
    	width: 160px;
    	height: 145px;
    	margin: 40px 0 40px 40px;
    }
    article {
    	padding: 40px;
    	margin-left: 200px;
    }
    article > figure{
    	width: 360px;
    	height: 310px;
    }
    

    Horizontal Layout Strategies: Table-Cell

    There is no need to go over absolute positioning once again, and so I use table-cell to position the columns. The enclosing div has a 40px margin on top that separates it from the figure above and a background of #ccc. The two columns are layer out horizontally by divs whose display has been changed from the default block to table-cell. Here is the CSS:

    article div{
    	margin-top: 50px;
    	text-align: left;
    	width: 680px;
    	background: #ccc;
    }
    #column1 {
    	line-height: 1.2;
    	display: table-cell;
    	Width: 240px;
    	padding: 40px 40px 40px 60px;
    }
    #column2 {
    	line-height: 1.2;
    	display: table-cell;
    	Width: 240px;
    	padding: 40px 60px 40px 40px;
    }

    Horizontal Layout Strategies: Relative Positioning

    The headline on the navigation and the article use relative positioning, but with a trick. Relative positioning leaves a space in the document flow. By creating a negative margin, its possible to erase that space, which makes it possible to insert an element in the document flow without it taking up its normal space. This is the case with the headline, which is located above the insertion point by 60px. I set it for the navigation, but that turned out to be slightly off for the column, so I had to adjust that with two declarations. This is a useful trick if you want to include an aside that stays with the main text while you are editing it, for example.

    nav h2, article h2{
    	position: relative;
    	top: -60px;
    	left: -30px;
    	height: 30px;
    	width: 140px;
    	margin-bottom: -40px;
    	padding: 8px 10px 10px;
    	font-family: 'Anton', serif;
    	font-size: 24px;
    	font-style: normal;
    	font-weight: 400;
    	letter-spacing: 0.108em;
    	background: #ddd;
    }
    article h2 {
    	margin-bottom: -30px;
    }

    The Footer

    The footer only contains a link to the validator. The width is specified as 100%, which is the fill size of the section. The HTML is:

    <footer>
    		<a href="http://validator.w3.org/check?uri=referer"> Validate your page.</a>
    </footer>
    

    and the CSS is:

    footer a{
    display: block;
    width: 100%;
    padding: 5px 0;
    text-decoration: none;
    text-align: center;
    color: #444;
    background: #ddd;
    }
    footer a:hover{
    background: #222;
    color: #ddd
    }
    

    CSS3 Finishing Touches

    Two shadows styles are added to any element that includes the following classes:

    /*css3 effects*/
    .shadow_1 {
    	box-shadow: 14px 14px 26px #000000;
    }
    .shadow_2 {
    	box-shadow: 0px 14px 26px #000;
    }
    

    You can look up the finished file.

    Homework Assignment Using Floats

    Floats are used to put boxes side by side which does not happen in either the header or the footer, so we only change everything in between. The page is divided into three columns: the aside, the article and the nav and the main content has two columns. Relative positioning is no longer need and is removed from the section and it gets overflow: auto; instead, to force the parent to recognize its floated children, a trick discussed in floating Layouts.

    If you look at the HTML, you can see a few changes. The nav is now inside of the article and the h2 is now before the first column in the div.

    <aside></aside>
    <article>
    	<nav> </nav>
    	<figure></figure>
    	<div>
    		<h2 class="shadow_2"></h2>
    		<div class="column1"></div>
    		<div class="column2"></div>
    	</div>
    </article>
    

    The aside and the article are floated left. This places the article to the right of the aside. There is no need for the 200px left margin on the article. As there is no need to change the figure in the aside and article, I do not list them in the CSS below:

    aside {
    	float: left;
    }
    article {
    	padding: 40px;
    }
    nav {
    	float: right;
    	right: 0px;
    	width: 120px;
    	padding: 30px 40px 20px;
    	margin: 95px 40px 0 0;
    	background: #bbb;
    }
    

    The nav and the picture are children of the article. Floating the nav to the right places the picture to the left of the article. The margins and padding of the nav are updated to place it in the same place.

    As long as the combined total width does not exceed the width of the containers, the elements will float next to one another: 200px for the aside, the plus the 550px of the article (260px for the figure (plus 80px margin) and 120px (plus 50px padding and 40px margin) for the nav) equals 750px, far less than the 960px of the section.

    The div that follows the is given a clear: right, forcing it to position itself under the nav. That way it will be responsive and move down if additional links are added. This was not possible using the absolute positioning method. Chances are, however, that the layout would require fixing if that were to happen, so the difference is not so great from the work required to facilitate the absolutely positioned layout.

    The Challenge with Floats

    I also want to float the two columns, but ran into a problem with the h2 header. It got clipped by the floated column, but when I moved it to the div, it still got cut off because of the overflow: auto;. For that reason, an older solution to the problem was used to force the parent to recognize the floated children, using the pseudo object div:after to create an object after the last column that can be cleared using CSS alone. Clearing the last child forces the parent to recognize all of the children. Here is the CSS:

    article div:after {
    	content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    

    What this pseudo element does is place a period after the article div. It then forces the period to display like a block element instead of the inline element that it is, and gives it height: 0; so it does not actually change the document flow. It then clears the floating children, which is the reason we are doing all of this. That is another way that the parent element can recognize its children. The final declaration makes sure that the period’s visibility remains hidden. OK, that’s a lot to comprehend for a technique that has been superseded by the overflow: auto; method, but its good to know that it’s still useful when overflow does not work. The rest of the CSS looks like this:

    article div{
    	clear: right;
    	margin-top: 50px;
    	text-align: left;
    	line-height: 1.2;
    	width: 680px;
    	background: #ccc;
    }
    #column1 {
    	float: left;
    	Width: 240px;
    	padding: 0px 40px 40px 60px;
    }
    #column2 {
    	Width: 240px;
    	padding: 0px 60px 40px 40px;
    }
    

    The first column is floated to the left and the second column appears to the right of it. All that’s left to do is to align the h2 header for both the nav and the div. Because both of them are in the selector of the h2 in the div selector has to be further specified as article div h2{}.

    nav h2, article h2{
    	position: relative;
    	top: -55px;
    	left: -30px;
    	height: 30px;
    	width: 140px;
    	margin-bottom: -40px;
    	padding: 8px 10px 10px;
    	font-family: 'Anton', serif;
    	font-size: 24px;
    	font-style: normal;
    	font-weight: 400;
    	letter-spacing: 0.108em;
    	background: #ddd;
    }
    article div h2 {
    	top: -25px;
    	left: 30px;
    	width: 140px;
    }
    

    The footer and the shadows are the same. You can look up the finished file.

    04 The Layout Modes

     

    CSS 2.1 has four layout modes that can be strategically used, in addition to the ubiquitous floats. I will introduce all of them here, and add two more just introduced by CSS3 that are usable right now.

    There are several other layout strategies being baked in the W3.org oven, like Positioned Floats, Exclusions, Grid Alignment/Grid Layout, Template Layout Module and Regions, which has recently been proposed by Adobe. I’m sure these new CSS modules will significantly change the Layout and Design landscape for the better, but you will have to wait before whatever final standards are cooked enough to be supported by all browsers.

    Many layouts require multiple strategies at once. This means you have to understand all of these strategies. By the time you are ready to start the final, that will hopefully be the case.

    Overview

    The box model is central to understanding the layout modes, so we start with that.

    We then take a look at the four layout modes that determine the size and position of boxes, and their relationships with their sibling and ancestor boxes. There is:

    1) block layout, designed for laying out documents and is used to lay things out vertically,

    2) inline layout, designed for laying out text, and is used to lay things out horizontally

    3) table layout, designed for laying out information in a tabular format, and

    4) positioned layout, designed for very explicit positioning without much regard for other elements in the document. Add to that the ability to

    5) float an element to the right or left side of the parent box, and you are pretty well equipped to create every web layout you currently see out there.

    For additional layout options, there are multiple columns and the Flexible Box Layout Module introduced with CSS3.

     

    The Box Model

    box model

    The box model is central to understanding how to do layout with CSS. Every element is a content box with specific properties; padding, border and margin, in addition to all the other layout properties, like position, width, height, display, and so on.

    The default setting for the box properties is zero, with the width set at 100% of the parent box. By default, all children boxes are the same width as their parent. Any box that has the body element as parent is the width of the window.

    Generally speaking, When you specify the width and hight of the box, that only specifies the width and height of the content. Padding, the border and margins are in addition to specified height and width, so the actual size of the box in the layout is the content plus twice the margin, border and padding. A box that is 400px wide, with 20 px padding, 2 px border and 10px margins would take up 444 pixels.

    Negative margins can be used to subtract from the space that the content takes up in the document flow. If the content is height: 300px, and has a margin-bottom: -150px, the next element down will start midway the box, because the negative margin does not effect the size of the content. Change the second box’s top and bottom margins to -75px; You will see the second box move up 75 points over the first box and the containing box’s size is reduced by 150px.

    Box Model Interactive

    CSS Code View

    BOX 1: The margin is set for 20px auto, meaning that the box has 20 pixels of margin on top and bottom, and the left and right margins are automatically adjusted to center the box, possible only because the box has a declared width

    BOX 2: Notice that even though both boxes have a 20px margin, that margin collapses between the boxes. If you play around with the numbers, you will see that it collapses the smaller margin into the larger margin.

     

    The Layout Modes

    The layout modes determine the layout of boxes in the document flow. Boxes act either as block layout, like inline layout, like table layout or like positioned layout in which absolute and fixed positioning , which disregards the document flow.

    The analogy that should resinate with most of you is to compare the document flow to the flow of a word processor, which starts at the top of the document and proceeds downward. Paragraphs are like block elements, meaning that if you give a style to a paragraph, it applies to the entire paragraph, even if you only selected part of it. When you apply a style to characters, on the other hand, only those characters selected receive the style.

    Contrast this document flow with InDesign‘s ability to draw the box anywhere on the page. Each box, of course, initiates its own internal inline flow, but the box itself is not connected to the document flow at all. That is how absolute and fixed positioning work.

    This can warm design students to using the absolute positioning as the layout mode of choice, but be forewarned. Web pages are not like printed pages, and as we shall see, it’s generally not a good idea to use absolute positioning as your main layout strategy.

    That is because the elements are taken out of the document flow and no longer relate to one another. It may work for elements that do not change, but if you are working with text, instead of pushing the remaining content down, it runs into it.

    Tables, the forth layout mode, are in their own world, and wile they are great for tabular data, should not be used for layout purposes, as that violates the separation of church and state, eh, no, I mean, form and content.
     

    Block Display

    The block layout mode displays the boxes just described by the box model, in default configuration, as vertically , coming one after another down the page in the direction of the document flow. Each box, by default, is 100% the width of its parent. Even if the box is not 100% the width of its parent, block elements still start on a new line, by default, starting with the top left and corner of the <body> tag. Some HTML elements follow the block model by default, like headers <h1>, paragraphs <p> and list items<li>, and the generic block element, the <div>, though as we will see, their display quality can be changed to inline or table modes using the display property.
     

    Inline Display

    Inline tags enclose inline content elements. There are actually two kinds of inline content, replaced and non replaced elements. A character is an example of a non-replaced inline element, and a picture is an example of a replaced inline element. The box properties like margins, padding and border properties are applied differently to these elements.

    Both of these kinds of inline elements flow one after one, till they reach the width of the containing box. The line then returns to the next line, just like this text. This inline flow, unlike the document flow, is language specific, and in the English language, the inline flow goes from left to right, repeating from top to bottom. In the Japanese language, the inline flow goes from top to bottom, repeating this from right to left.

    Other elements whose default display is inline are the <img> tag, the Hyperlink <a> tag and the emphasis<strong>. The generic inline element is <span>, and you can use it to select any number of characters within the same parent container. The default inline display can be changed to block or table using the display property.
     

    Tables

    Tables themselves by default act like block elements, but the layout mode of the table is different from the document flow. They used to be used for layout in the early days by programs like Dreamweaver created, but they are not to be used for layout purposes anymore. Did I already say that?

    The following example provides both the HTML used to build the table and the CSS used to style it. I have included the HTML code so that you can see their structure. The basic structure is a <table> element followed by a table row <tr>element in which table data <td> elements make up the columns. It is possible to nest tables, shown here by nesting the same table in two of the table data cells.

    If you want to style the table, its best to create as many hooks in it as possible, and this table is loaded up with column descriptions, a table header, a table footer and multiple table bodies, all used in styling the table. The code and an explanation of how the table layout works is reproduced below:

    CSS Code View

    The Caption Holds the Title of the Table
    Head 1 Head 2 Head 3
    table data table data table data
    table data table data table data
    table data table data table data
    table data table data table data
    table data table data table data
    1 2 3
    td td td
    td td td
    td td td
    td td td
    td td td
    td td td
    td td td
    td td td
    Footer
    table data
    1 2 3
    td td td
    td td td
    td td td
    td td td
    td td td
    td td td
    td td td
    td td td
    Footer
    table data table data table data
    table data table data table data
    The Footer is a Place for Information About the Table.
    <table id="table">
    <caption>The Caption Holds the Title of the Table
    </caption>
    <col><col><col>
    <thead>
    <tr><th>Head 1</th><th>Head 2</th><th>Head 3</th></tr>
    </thead>
    <tbody>
    <tr> <td> table data </td>  <td> table data </td>  <td> table data </td></tr>
    <tr> <td> table data </td>  <td> table data </td>  <td> table data </td></tr>
    <tr> <td> table data </td>  <td> table data </td>  <td> table data </td></tr>
    <tr> <td> table data </td> <td> table data </td> <td> table data </td></tr>
    </tbody>
    <tbody>
    <tr> <td> table data </td>  <td> table data </td>  <td> table data </td></tr>
    <tr> <td> TABLE </td>  <td> table data </td>  <td> TABLE </td></tr>
    <tr> <td> table data </td>  <td> table data </td>  <td> table data </td></tr>
    <tr> <td> table data </td> <td> table data </td> <td> table data </td></tr>
    </tbody>
    <tfoot>
    <tr><td colspan="3">
    	The Footer is a Place for Information About the Table.
    </td></tr>
    </tfoot>
    </table>
    

    For demonstration purposes, I included the table within itself, which is just a repeat of the code placed in a table data. The ability to put tables inside of tables for layout purposes was much abused in the early days of the web.

    The HTML code for the table can be divided into parts, and each can be styled separately. There are table headings, footers, data cells and captions and rows, all of which can be styled. The even and odd table rows are styled using pseudo selectors. If you look at the code, you can see that the table caption comes first, then the table header, two table bodies that contain the table rows and the table data cells and finally a table footer. The row tags allow the three rows to be styled individually, though that too could be handled by pseudo selectors.
     

    Positioning the Document Flow

    All of the objects can be positioned in (or out of) the document flow, which stacks the content together like building blocks, only in reverse of gravity; starting at the top, the elements build their way down. W3.org talks of the way the elements flow on the page as the visual formatting model. These are the primary tools that you will have to comprehend to create your layout.
     

    Normal Flow

    In the normal flow, boxes are like blocks that follow the document flow as they stack. Each of these boxes can hold other boxes, inline content, or both.

    Boxes are described as stacked paragraphs blocks, whereas inline elements are said to be “distributed in lines”.

    Boxes can become inline elements when they are floated, and then act just like a character does in a line of text. Pictures act like inline content items as well, but the boxes found in tables are another animal altogether, and follow the table construction rules.

    The default normal flow of the boxes is like a word-processor, in which each box takes up space in the document flow. If top and bottom margins meet, they collapsed to the larger of the two margins as demonstrated above. Left and right margins never collapse, and auto margins suspend a child element horizontally centered in the containing element, also demonstrated above.
     

    Relative Positioning

    Relative positioning keeps the normal flow. The horizontal and vertical distance is shifted in relation to the position that the box has in the normal flow, and the space it occupied does not collapse. You can specify positive and negative distance from the top, left, bottom or right edges of the parent box. Boxes can and will overlap, and you use z-index to adjust which box is on top if you have specified a position. If the relative position distance is 0, there is no change from the static position. Notice that I have given the parent element a position of relative flow without deviation. Had I not done that, if I were to change the relative flow to absolute, the paragraphs would have ended up at the top of the page, rather than the top of the containing <div id="norm">Relative and Normal Position Interactive

    CSS Code View

    Normal Flow

    The body also takes block elements. Block elements are those that create a box that can contain inline content.

    Block elements expand to the width of the parent, and follow one another like paragraphs down the page.

    The boxes determine the relation to adjacent boxes through margins, and determine the relation to the child elements and inline content through padding.

    In between the margins and the padding is the border, which can be set to show or hide for each side.

    Static Position

    Static position is the same as the normal flow, which is similar to relative positioning if nothing is shifted. You can see that in these paragraphs: some have no position and take the normal flow by default, some have relative position, and some have the position of static.

    Relative Flow

    Relative flow is a subcategory of normal flow, for the element’s position still takes up place in the normal flow, but it has been shifted in the top, right, bottom or left directions. You can shift the box to be well out of its parent, they way that this one has been shifted our of it’s containing div.

     

    Floated boxes

    Floated boxes are part of the normal flow. When boxes are floated, they behave as inline elements. That means that they go from being in the document flow to being in the inline content flow of a parent box.

    A box is either floated to the right or floated to the left, and it shifts the box to the right or left edge of the parent containing box at the line that the box is on. The remaining content then continues to flow around that box until it runs past the floated element or is cleared.

    Floated boxes are central to multi-column page layouts, though that was not immediately apparent as they were first used to flow text around pictures. Nesting floats in one another is the basis for multi-column layouts. Nest one box inside of a floated box, and you have two columns, nest that box again inside another floated box, and you have three, and so on.

    Floating Boxes Interactive

    CSS Code View

    Live Demo

    Box A:

    Box B:

    Box C:

    Box D:

    Two of the floating properties have been disabled. Enable them and see how the boxes jump into position. Once you do, you will notice that Box D also has the clear right property, which pushes it below Box C. Delete the clear property and see what happens.

    Floating Three Column Layout Interactive

    These boxes become a three column grid when you remove the three commented out lines ( /* */ ) that keep the floats from working. Remove them and see the three columns jump into place. Next remove the commented out ( /* */ ) from the background of #cd #wrap and remove the backgrounds from #cd aside and you will have a bulletproof three column layout. Work-arounds like this will no longer be necessary with the FlexBox Property.

    CSS Code View

    Live Demo

    HEADER

    CONTENT
    You will see that the columns fit the content, and that they do not all go to the bottom. This is a problem if you want to have columns with different backgrounds. The solution is to use an image that repeats vertically all the way to the bottom, which I have all ready for you to uncomment. You then have to comment-out the background colors of the columns themselves before you can see it.

    FOOTER

    HTML markup for the example

    <div id="cd-wrap">
    <header>
    HEADER
    </header>
    <div id="cd-container">
    <aside>
    SIDE A
    </aside>
    <article>
    CONTENT
    </article>
    <aside id="side-b">
    SIDE B
    </aside>
    </div>
    <footer>
    FOOTER
    </footer>
    </div>
    </div>
    

     

    Absolute Positioning

    Absolute positioning is the forth layout mode, and it takes the box out of the normal document flow, except for a placeholder, the point of origin on which the absolute positioned box is aligned, and positions it in a layer above it in relation to the containing box’s coordinates, as long as that parent has been given a position in the document flow. If not, it continues on down the ancestry till it find an element that has been given a position, or the body tag, which often happens, and which places the absolute value relative to the upper left hand corner of the window or viewport. To avoid this problem, remember to give the parent of the box you want to move absolutely a position: relative; without actually moving it from its place in the document flow.

    There is an attraction for students to use absolute positioning as the main layout system since it follows the paradigm set up in print with programs like indesign. The problem is that the web is not like print, and such layouts quickly get into trouble. While it is fine to use absolute positioning for the very simplest of layouts, it breaks down for anything remotely more complicated, where it is a better idea to layout the document manipulating the document flow through margins, padding, floats and relative positioning.

    These warnings aside, absolute positioning can be very useful in placing elements exactly where you need them, and can allow for some nifty layout calisthenics, as the demo shows, where objects are distributed by manipulating percentages in relation to the parent. If you change the position to fixed, the squares float in relation to the viewport. If you change the position to relative, and negate the object’s place in the normal document flow by adding negative margins, the objects will behave somewhat similar to the absolute positioned objects.

    It is possible to manipulate elements like this because they can have more than one class as long as they are separated by a space: <div class="one box a">. Each box has three classes determining them: <div class="one box a"><p>1
    </div>

    Absolute Positioning Interactive

    CSS Code View

    Live Demo

    1

    2

    3

    4

    5

    6

    7

    8

    9

     

    Fixed Positioning

    Fixed position is a subcategory of absolute positioning. The difference being that the container box is the viewport. The viewport is the window, so it is absolutely fixed to the window, regardless of the scrolling contents in the window. This can be used for menus like the one to the right, that stays in place while the user scrolls up and down the page. You can see this if you change the position of the boxes above to fixed, and they will float in the relation to the viewport.
     

    Z-Index Property

    Once an element has been positioned, it’s overlap on the z-axis can be manipulated by the index property. This can be thought of as having multiple layers, much like an Illustrator File. The normal flow happens at level 0, and you can put elements above and below the normal flow by giving them a number for −100 to 100.

    Set the z-index of the following boxes to negative to read when using z-index can be useful. Play with the stacking order, and remember, the element you want to position in another layer other than the document flow has to be positioned first. Try giving the all the boxes a z-index of -3 and watch them move behind the text. Reverse the order of the boxes by changing the first box to -1, second to -2, third to -3 and the last box to -4.

    Z-Index Property Interactive

    CSS Code View

    Live Demo

    Box A:

    Box B:

    Box C:

    Box D:

    Making the z-index negative and watch the boxes go below the parent. Z-index can be especially useful if one element accidentally cover up a menu item, which is then no longer responds. By changing the z-index, you can move the menu above whatever is obstructing it.

     

    Display Property

    The ability to change the display of an element is a very powerful feature of CSS, and its ability to function as a layout strategy has been overlooked, as the Beyond Floats Article shows.

    It is possible to change a block element to an inline element, to a list item to a table, table cell, etc. This is very useful for changing the basic behavior of an element exploited in the Beyond Floats Article.

    Be aware that an inline object is content and does not have volume beyond that, so you need to use the inline-block value to change a block behavior into inline behavior.

    Another important display values is display: none. That allows the element to be hidden from view till it is called up by a pseudo class like hover. This is one way to make CSS drop menus with multiple levels that pop out, for example. We will not get into that, as no one here will build a website so complicated as to need such a menu, though I do demonstrate how to built one. There is another property, visibility, that turns the visibility of objects on or off, but that differs from display: none; in that the element still takes up room in the document flow.

    Display Property Interactive

    CSS Code View

    Live Demo

    Box A:

    Box B:

    Box C:

    Box D:

     

    Overflow Property

    Unless otherwise specified, each box will span the entire width of the parent and accommodate whatever content. If you specify a width, text will just wrap within that width, but if a replaced element, like a picture or a video file, is larger than the specified width, it could overflow the box boundaries, it could be clipped at the box boundaries or it could be accommodated by specifying horizontal overflow, in which case a scrollbar would provide access to the otherwise clipped content.

    If you specify a height, its possible that both pictures and text could force the content out of the box. You can control this though the overflow property, which allows you to control whether or not content remains visible, hidden or if scroll bars appear to facilitate the extra content. You can also specify which axis overflows. Take away the comments from overflow-x: hidden; and you will see the horizontal scroll bar disappear.

    If a web site has both short and long documents, in which case the vertical scroll bar can appear and disappear from page to page, with the result that the web site re-centers and the jump is both undesirable and quite noticeable. Telling the HTML element to not scroll in the y axis solves that problem.

    Overflow Property Interactive

    CSS Code View

    The overflow property controls how content is clipped, and it creates horizontal or vertical scroll bars to accommodate the extra content.

     

    CSS3 Multi-Column Property

    It is easy to create multi-column layouts using the new CSS3 multiple columns property. The document flow can create more columns inside a box than is visually pleasing, so change it to one, two, three or four columns, depending on the size of the screen. A good use of this would be in media queries, where small screens get one column, tablets get two and computer monitors get three or more columns.

    Multi-Columns Interactive

    CSS Code View

    Live Demo

    What is “Fun?”

    “I’ll know it when I see it.”

    As designers, we get a lot of similarly elusive adjectives from clients, as they tell us what they want their sites to be: “The site needs to be ‘cool,’” “It should be ‘exciting,’” “I want it to ‘pop.’” When we ask them to clarify, the answer we get back sounds a lot like “I can’t tell you what it is, but I’ll know it when I see it.”

    “Fun” is a particularly difficult concept to define. And we’re starting to hear it a lot more from clients as we design for different contexts of use.

    So what’s a designer to do?

     

    CSS3 FlexBox Property

    The Flexible Box Layout Module is designed solve a layout problem where the extra space is automatically divided between flexed siblings. It can align its contents horizontally or vertically, can have the order of the columns swapped dynamically, and can automatically “flex” the size of each columns to fit the available space.

    Using Flexbox: Mixing Old and New for the Best Browser Support

    04 Floating Layouts

    float picture demo

    Page Layouts in CSS are not as straight forward as one might expect, but then, tables were not exactly straight forward either.

    As layouts became more complex, a mix between tables and CSS was used, and by about 2007, the bugs had been removed enough that the New York Times, a standard-bearer, could go to a table-less layout based on floats. That broke the ice and after that almost everyone migrated to an all CSS layout

    CSS Tricks on Floats

    A float is easy enough, and it was introduced by Netscape Navigator 1.1. There is also a clear, to clear the float. It was originally intended to float pictures. The code that floats this example is <img style="float: right; padding: 0 0 10px 10px;" src="http://a.parsons.edu/~dejongo/12-fall/stuff/images/mondrian2.jpg" alt="clear float picture demo">
    float picture demo

    The next paragraph has clear applied to it. That forces the next element to clear the float. The second paragraph above, for example, does not clear, and continues to flow to the side of the picture.

    There are a number of methods to achieve the same goal, but most of these build on the ability to float elements to the right or the left of the containing box. The problem using this method is getting the parent containing element to expand to hold the floated children, as the children can become unruly, and stick out below the parent box (see below for an example).

    To prevent that, all kinds of fixes were created, like floating the parent container or the .clearfix method to push the parent box below its floated children. There is a faux column solution that uses a background element to give the impression that all the columns are the same size, and a method called the one true layout that uses margins to push the content into columns, which is similar to one called the holy grail, but they have mostly been supplanted by the overflow: auto method detailed below. For more information and links to tutorials, you can go to CSS tricks or smashing magazine.

    Floating Columns

    width: 140px; height: 140px; border: 1px solid black; float: right; margin: 0 0 10px 10px; background-color: #bbb;
    width: 140px; height: 140px; border: 1px solid black; float: right; margin: 0 0 10px 10px; padding: 5px; color: white; background-color: #999;
    width: 140px; height: 140px; border: 1px solid black; float: right; margin: 0 0 10px 10px; padding: 5px; background-color: #ddd; clear: right;

    When you apply float to an element, you make a box, take it out of the normal document flow, and shift it to the right or left of the containing box. The remaining content flows around the floated element. The floating elements always needs an explicit width. The #bbb and #999 boxes demonstrate what happens when you float boxes to the right, and they are handled as if they were inline elements so that the boxes float next to one another till there is no more space. To stop an element from flowing around the floated element, you have to clear it, as in clear: right;. That way the boxes can float under one another, as demonstrated by the #ddd box. The problem with building a complicated layout with floats lies in browser incompatibility, for it is possible that the page does not degrade properly. To not invite any more problems than necessary, make sure you reset the CSS.

    Unruly Children

    width: 140px; height: 140px; border: 1px solid black; float: left; margin: 0 0 10px 10px; background-color: #bbb;
    width: 60px; height: 302px; border: 1px solid black; float: left; margin: 0 10px 10px 0; padding: 5px; color: white; back ground-color: #999;
    width: 140px; height: 140px; border: 1px solid black; float: right; margin: 0 0 10px 10px; padding: 5px; background-color: #ddd; clear: right;

    So floats can be used to create columns, but there is another issue to consider.

    A containing box will not expand unless there is content. For some reason, when you float a child element, the containing element fails to keep track of it. This becomes unsightly when there is a border or background color on the containing box, and the floating box extends below the border like this.

    As you can see, this is not acceptable. The W3 recommends that you put in additional markup and clear: both;, but that is a bit of a hack and requires additional markup introducing an unwanted element at bottom. All kinds of clever solutions were found to create a CSS only solution to that problem, which I need not go into as someone discovered that adding overflow: auto; to the containing box did the trick.

    A 3 Column Layout that Works

    width: 140px; height: 140px; border: 1px solid black; float: left; margin: 0 0 10px 10px; background-color: #bbb;
    width: 60px; height: 302px; border: 1px solid black; float: left; margin: 0 10px 10px 0; padding: 5px; color: white; back ground-color: #999;
    width: 140px; height: 140px; border: 1px solid black; float: right; margin: 0 0 10px 10px; padding: 5px; background-color: #ddd; clear: right;

    It appears that all is well in CSS multiple column land. If you want more columns, you can make the floated child a parent to another floating child, so nesting floated children inside of floated children.

    3 Column Float Demonstration

    CSS Code View

    HEADER

    You will see that the columns fit the content, and that they do not all go to the bottom. This is a problem if you want to have columns with different backgrounds. The solution is to use an image that repeats vertically all the way to the bottom, which I have all ready for you to uncomment. You then have to comment-out the background colors of the columns themselves before you can see it.

    FOOTER

    HTML markup for the example

    <div id="cd-wrap">
    <div id="cd-header">
    HEADER
    </div>
    <div id="cd-container">
    <div id="cd-side-a">
    SIDE A
    </div>
    <div id="cd-content">
    CONTENT
    </div>
    <div id="cd-side-b">
    SIDE B
    </div>
    </div>
    <div id="cd-footer">
    FOOTER
    </div>
    </div>
    </div>
    

    04 Beyond Floats

    Sitepoint released a spot on article, Give Floats the Flick in CSS Layouts that goes over alternate strategies to lay out a page, mostly relying on the display property to change the display of an element from a list item to an inline-block, for example.

    Possible display modes are: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none and inherit.

    The markup for these examples look like this except as noted:

    <nav>
    	<ul>
    		<li><a href="#">menu 1</a>
    		<li><a href="#">menu 2</a>
    		<li><a href="#">menu 3</a>
    		<li><a href="#">menu 4</a>
    		<li><a href="#">menu 5</a>
    	</ul>
    </nav>
    

    Display Inline-Block

    Inline-block displays block level elements into inline level elements with block attributes like margins, padding, width, height, and vertical-align, attributes that inline elements do not have. It’s incredibly useful in any situation where you want to align block elements horizontally in rows, as they can be aligned by the top, middle or bottom.

    CSS Code View

    Each line items can be more than just a menu item, which is what this property is often asked to do. The boxes can be aligned from the top, center or bottom, and can contain all kinds of objects to serve as a layout strategy. If your page were designed to contain a number of columns, this is one way to lay out that page.

    Using Margins to Space Columns

    By using a large margin to move the main body copy to the right, and using absolute positioning to place the content of the first column, you have a two columns page layout.

    The markup for the 2 column layout looks like this:

    <article>
    	<p>… main content here
    </article>
    <nav>
    	<ul>
    		<li><a href="#">menu 1</a>
    		<li><a href="#">menu 2</a>
    		<li><a href="#">menu 3</a>
    		<li><a href="#">menu 4</a>
    		<li><a href="#">menu 5</a>
    	</ul>
    <nav>
    

    CSS Code View

    … main content here.

    Display Tables

    Without using tables, of course. Apply the layout behavior of tables, rows and cells to any HTML element. For alignment into columns or rows, these display values are a quick and easy solution, harkening back when tables were the ubiquitous layout strategy, but unlike tables, this is legal.

    CSS Code View

    This can be used to create multiple column layouts.

    CSS Code View

    • Bubble bath

      A wet foam—such as that on a cappuccino—and a trough of plastic beads are both made up of nearly spherical, close-packed objects, but do these two types of materials, which are neither fully liquid or solid like, have anything in common? Experiments presented in Physical Review Letters suggest similarities between foams and granular matter that may lead to a more unified theory for describing the two materials.

    • In a tight spot, spin and charge separate

      Strange things happen when there is a shortage of space. The Pauli exclusion principle is well known for its effect on fermions, but bosons (for instance, photons) also behave interestingly when pressed for space. For this reason, researchers are very interested in schemes that create this kind of environment, in search of new physics and new technologies.

    • Reading a single spin in silicon

      The holy grail of research in quantum computing is to simultaneously meet the DiVincenzo criteria—five obstacles that must be overcome to transform a quantum system into a scalable quantum computer [1]. Overcoming the first two, namely to have well-characterized qubits and long decoherence times can be a simple matter: Nature provides a variety of long-lived quantum systems.

    Vertically Centering a Box

    It is almost impossible to vertically center an object unless you turn it into a table cell and assign it a vertical alignment of center. It could just as well be top or bottom, of course:

    The markup for the centered example looks like this:

    <div id="centered">
    	<div>
    <div>
    	

    Vertically and horizontally centered </div> </div> </div>

    CSS Code View

    Vertically and horizontally centered

    These page layout solutions do not rely on the ubiquitous float. The time will come when the W3 Grid Layout module is adopted, and the landscape changes, but these techniques will not go away. Instead, use them where they fit, anywhere you need to layout out your document.

    04 Layout Grids

    Grids have an established history in print design. Grid systems were developed as a flexible system able to help designers achieve coherency in organizing the page.

    Chances are that you used a grid when created your mockup. That is one way to use a grid system in developing your layout. For those students who stare at a blank screen, arbitrarily placing elements, a grid would help facilitate the design process, and some of you need that.

    What is a Grid?

    A grid, or grid system, serves as the framework for page layout. It divides the page horizontally and vertically into columns and rows which work to order the elements of the design. The text and images used on the page fit into place and align with one another according to the grid. The lines of the grid themselves are not necessarily visible (though the grid in web based grid systems can be brought up easily enough) and are used by designers to determine the proper width and height of the content so that everything aligns.

    A layout’s coherence is its unity, and unity in design is when all the elements are in dynamic agreement. Static agreement is better than something arbitrary or chaotic, but the ideal layout has an active plastic dimension. This dynamic plasticity should aid the communication.

    The design itself should make the content compelling, visually organizing the communication in a systematically constructed rhythmically determined experience. The cadence of that rhythm should extend beyond the boundaries of the page to the work as a whole, so that the entire experience of the web site resonates with the same rhythmic clarity.

    History of Grids on the Web

    Two people that did much to put the grids on the web are Khoi Vinh who designed the New York Times online presence, and Mark Boulton, whose articles on the use of grids inspired BluePrint, 960, and others.

    Blueprint came first and was quite popular. Created by Olav Frihagen Bjørkøy who became inspired by the Frameworks for Designers article on A List Apart. The 960 Grid System followed to capitalize on the way that number divides the pixels evenly in so many ways.

    Navigating the Pixel Grid

    The window is a grid of pixels that the designer has to navigate. Think pixels! You cannot divide pixels. Unless you work in numbers that can be evenly divided, you become stuck with a lot of odd numbers. It is a lot easier to work in multiples of some even number than to calculate a odd numbers together. Make your life easy and follow the grid!

    Students are often perplexed the first few weeks of the class, before they learn to think in pixels. If the web page is 960 pixels wide, you can divide by 3, 4, 5, 6, 8, 10, 12, 15, and 16 — making it an ideal width for grids because you can divide it up into so many columns and mix and match the different grids at the same time. Add gutters, and it is possible to create even more divisions. To make this a visual process, use Gridulator. It will provide you with all the options for any number of grid and gutter combinations.

    Which Grid System to Use?

    Blueprint was the first CSS grid system and was the most popular in the beginning, but the 960 Grid System followed soon after, and it is currently the most popular Grid System, being adopted by a number of Content Management Systems. But the 960 Grid System is not immune from critique, and in the 978 Grid System, Nick La added 18 more pixels of white space to make type look better, while still fitting in the pixel dimensions of most all standard displays out there. It’s got a great demo that’s adapts to responsive web design, covering 300, 748, 978, 1218 and 1378px spread ready for use out of the box.

    In the week on media queries, the template will introduce another grid system called Less Framework that uses a simplified frameless grid through all of the dimensions of 480, 600, 768, 992 and 1382px. Make sure you check out the demo’s and change the window size to see media queries at work.

    There are a lot of resources changing all the time, so check out the Grid System website for updated articles, tools, books, templates and examples.

    01 Visual Literacy

    The web is a design language, and more of you are not Parsons’ students, it become clear that some students need to know something about principles of design.

    Much visual literacy on the web is standardized, so you can copy your way, without knowing exactly what you are copying.

    Visual literacy goes beyond how something looks. It makes communication more effective.

    Visual literacy is used to solve problems in communication. This is a lot like structuring an argument in the academic essay, where reason supplants opinion. Instead of finding causes and reasons why, or a genealogy, bringing visually literate structuring to the communication makes the message more engaging, apparent and clear.

    To that end, I’ve assembled a number of links to help develop visual literacy.

    Fundamentals

    design notes:

    1. color
    2. concept
    3. form
    4. content
    5. figure & ground
    6. balance
    7. proportion
    8. unity
    9. elements

    Inspiration

    Use the following resources to explore your site design. Be inspired — copy, borrow, steal — but make sure that whatever you take, you make your own. The top priority is to effectively communicate the content.

    1. Design Inspiration
    2. Inspirational Sites
    3. Design History
    4. Rijks Studio
    5. Visual Literacy
    6. WookMark images
    7. Fonts in Use

    Type

    The last frontier of web design has been typography. Typography remains elusive for many, so I’ve gleaned useful links to explain the basics in the following typographic resource.