STYLING TABLES

STYLING TABLES

• Give cells plenty of padding
• Shade alternate rows
• Align content using the text-align property

Style for readablility

STYLING TABLES

• width
• padding
• text-transform
• letter spacing/font-size
• borders
• text-align
• background-color
• :hover
• empty-cells (show, hide inherit)
• border-collapse
• border-spacing
• separate

Properties that can used on tables

STYLING TABLES

References: 

http://zurb.com/playground/responsive-tables

http://designshack.net/articles/css/15-tips-for-designing-terrific-tables/

http://codepen.io/collection/nhowz/

STYLING FORMS

STYLING FORMS

• text inputs and text areas
• submit buttons
• labels

Target to improve the design and readability

• checkboxes
• radio inputs
• select/dropdown box

Difficult to style

STYLING FORMS

• font-size
• color
• background-color
• border
• border-radius
• :focus

Properties to use

STYLING FORMS

• color
• text-shadow
• border
• background-color
• :hover

Submit buttons

STYLING FORMS

cursor: (auto, crosshair, default, pointer, move text, wait, help)

Cursor styles

Embedding video

Embedding video

• Easiest way is to embed  from youtube or vimeo
• HTML5 video tag <video> but it doesn't work on lower videos

Embedding video

• Need to convert the video to H264 (IE and safari) AND WebM (Andrioid, Chrome, Firefox, Opera)
• You can't style the controls. They vary from browser to browser

<video> tag

Embedding video

<video src="video/myvideo.mp4"

poster="images/puppy.jpg"

width="400" height="100"

preload

controls

loop>

</video>

<video> tag

Embedding video

<video poster="images/puppy.jpg"

width="400" height="100">

<source src="videos/video.mp4" type='video/mp4;codecs="avc1.42E01E. mp4a.40.2"'/>

<source src="videos/video.webm" type='video/webm;codecs="vp8.vorbis"'/>

</video>

<video> tag

Embedding video

http://easyhtml5video.com/

https://html5backgroundvideos.com/converter/

http://www.mirovideoconverter.com/

Resources for embedding multiple files

ADDING AUDIO

<audio>

<audio src="audio/mysound.ogg" controls autoplay>

• preload
• loop
• souce

MP3- Safari 5+, Chrome6+, IE9

Ogg- Firefox 3.6, Chrome 6, Opera 1.5

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN

Steps:

1. Set the viewport using the meta tag in the head tag:

<meta name="viewport" content="device-width, initial-scale=1">

2. Create a "fluid" layout in CSS. Use ems for font-size

3. Add media queries in your CSS doc to add "break-points"

RESPONSIVE WEB DESIGN

Common breakpoints

320px

480px

600px

768px

1024px

http://tangledindesign.com/deciding-what-responsive-breakpoints-to-use/

RESPONSIVE WEB DESIGN

Media query:

@media (max-width: 480px) {

   h1{

     font-size:.75em;

    }

}

RESPONSIVE WEB DESIGN

Media query:

@media (min-width: 768px) and (max-width: 979px) {

   h1{

     }

}

Text