CISC 474: Advanced Web Technologies

HTML5 & CSS3, & Responsive Design

HTML Head Elements

• Title & Meta– Important for SEO

• Link & Style– Call Style sheets– CSS in head

• Scripts• Template

– Load template via JavaScript

NEW HTML5 Embed Elements

• Video• Audio• Source

– Alternative media depending on browser

• SVG (vectorial image)• Math (formulas)• Canvas

– Graphs, game graphics, visual images on the fly

NEW HTML5 Section Elements

• Replaces generic “div”• Allows for cleaner layout

and “labeled” sections – Nav, Header, Section, Footer

• Label Page Content– Article– Address

• Most Important Content– Main (only one per doc)

Basics of CSS Box-Model

• Width = width + padding-left + padding-right + border-left + border-right

• Height = height + padding-top + padding-bottom + border-top + border-bottom

Undeclared values (padding and border) are set to zero (css reset) or a browser default (which probably won’t be zero).

Undeclared width of block-level elements will be 100%. Floated & Absolute element widths will be only as wide as the content inside them.

Basics of CSS Layout

• CSS Reset– Resets all browser-specific

defaults– http://meyerweb.com/eric/tools/css/reset/

• Fluid v. Fixed– Percentages vs. Fixed Pixel

• All Floating Elements• Floating + Block Elements• All Block Elements

Popular CSS3 Styles & Tricks

• Randy Jensen’s CSS3 Generator– Shows Example & Creates Code– Rounded Corners– Drop Shadow– Text Shadow– Gradients– Transform

• Scale, Rotate, Translate, Skew– Transition

• Background, • Color, Height, Width, Outline

http://css3generator.com/

Popular CSS3 Pseudo-classes

• Gives control over dynamically created content without adding class or id– :hover, :active, :visited ex. links– :first-child, :last-child ex. Add a top or bottom border– :nth-child(odd), :nth-child(even) ex. Table striping– :enabled, :disabled, :checked

Responsive Design

• Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.

• The goal of responsive design is to build web pages that detect the visitor's screen size and orientation and change the layout accordingly.

CSS3 Media Queries

• Extra small devices (phones, up to 480px) • Small devices (tablets, 768px and up) • Medium devices (big landscape tablets, laptops, and desktops, 992px

and up) • Large devices (large desktops, 1200px and up)

• Allows content rendering to adapt to conditions such as screen resolution. It became a W3C recommended standard in June 2012 and is a cornerstone technology of Responsive Web Design.

2 Popular Responsive Design Frameworks

Twitter Bootstrap

• Utilizes LESSS CSS & compiled via Node• behave great in the latest desktop

browsers (as well as IE7!), tablet and smartphone browsers.

Skeleton

• A small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Bootstrap Responsive Frameworks

12-column responsive grid

• As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

• EX: .span4 + .span8 = 12 total columns.

Includes Base CSS, JavaScript Plugins & Form Controls

Bootstrap Responsive Break Points

Skeleton Responsive Frameworks

Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phone.

<!-- Give column value in word form (one, two..., twelve) -->

<div class=”twelve columns"><h1>Full Width Column</h1>

</div>

Skeleton is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.

Skeleton Responsive Break Points

2014 Web Design Trends

• “The frontend curious continue to push the bounds of the modern interface this year, combining HTML5/CSS and JavaScript.”

• “Parallax scrolling websites - The mouse, tablet, touch, and pinch will be the future for how we experience things.”

• “With Flash going extinct, JavaScript is bleeding into both front and back-end now. Frameworks will continue to pop out of the woodworks - If something can be built in JavaScript, it will be.”

11 web design trends I'd like to see in 2014Pete Sena, 2/14/14 CreativeBloq.com