additional information

favicon

  • it’s that tiny icon in the tab of the browser
  • To make it, create a 64x64px png image, then convert to .ico: search in your browser for “convert to ico”
  • add it with the following code in the head of your html:<link rel=”shortcut icon” href=”/favicon.ico” />

typically, use one css file per site

  • It’s easier
    Make a change once and it effects the whole website. If you want to change a font, a color, or a position, change it once in css and it can be reflected in the whole site.
  • One css file insures consistency from page to page
    As we build a site, we brand with fonts, text formatting, colors, backgrounds, navigation, headers, footer and much more. 1) Consistency from page to page lets the user know that they have not left the site. 2) Consistent navigation  with the same buttons in the same location makes navigating the site easier. 3) Consistent placement of elements is good design.
  • a conventional name for your style sheet is “styles.css“.

index.html

  • if a browser is directed to a folder, it will automatically go to the index.html file
  • your home page should be called index.html

pdf

  • pdf = portable document format
  • with an InDesign file, if the user doesn’t have your images or fonts, they won’t display correctly
  • a pdf will embed the fonts and images so they view correctly
  • to save as a pdf in InDesign, go to
    file -> Adobe PDF Presets  and see options from “high quality print” to  “smallest file size”
    for this class, “smallest file size” is appropriate

converting fonts from pixels to ems

Most browsers, by default use 16px for <p>. We have been changing the size of <p> in our css:
p {font-size: 14px;}

We have also defined the size of H1, H2, etc.
h1 {font-size: 42px;}
h2 {font-size: 21px;}

You could use ems to define the size of your fonts rather than px.

 if body   { font-size: 14px;  }

p {font-size: 1em;} .   ———–>14px
h1 {font-size: 3m;}    ———–>36px
h2 {font-size: 1.5m;} .   ———–>21px

font-size: 16px; —————————–>font-size: 1 em;
line-height: 24px; ————————–>line-height: 1.5em;

So why use ems?
pixels give absolute control.
ems are scalable.   If you set up your whole site with ems, and change the initial setting, everything else will change proportionately.

fixed, flexible 

fixed:

  • the site width is defined by px:    body (width: 1028px;)
  • design is very easy to control, because the container is a set size

flexible:

  • the site width is defined by percentages:    body (width: 80%;)
  • design is not as easy to control, because the container is going to adapt to the window size, potentially causing the contents to change size or position.
  • margins and paddings can also be defined by percentages, causing elements to scale.

body {
width: 80%
}

section {
width: 70%;
margin-right: 5%;
}

aside {
float: left;
width: 25%;
}

So the section and aside combined =100%, filling the body.

images by percentage
The following css will set the image’s width to 100% of the parent element. height: auto will keep it in proportion.

img { max-width: 100%;
height: auto:
}

adaptive, responsive

adaptive: 

  • You are designing for specific viewports.
  • You have more control over design.
  • Consider your users when deciding how many viewports you design for.
  • Generally, there are three viewports to design for: mobile, tablet and desktop

responsive:

  • Instead of defining viewports, you manually resize your browser until the layout breaks. Then you create a media query for that breaking point.

** You can combine fixed, flexible, adaptive and responsive.

media queries

Media queries provide different sets of css for different devices based on width, color or resolution.

The css can be in a separate, linked css file:
<link rel=”stylesheet” media=”(max-width: 800px)” href=”example.css” />

or multiple sets of css can be in one file:
/* mobile styles*/
@media only screen and (max-width: 480px)  { }

/* tablet styles*/
@media only screen and (min-width: 481px) and (max-width:768px) { }

/* desktop styles*/
@media only screen and (min-width: 769px) { }

viewport

Viewport is the open window. Setting a viewport tells the browser how content should fit on the device’s screen.

Adding this content to the head section of your page tells the browser to set the viewport to the width of the device with the initial-scale of 1.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

content/design modifications

As a site is scaled down from desktop to mobile, the following changes need to be considered:
images: Are they important enough to download on a mobile device?
text: Is the formatting set up for desktop legible on mobile? Does it need adjustments?
design: How will margins and vertical spacing change to get more in a smaller space?
nav: How will the mobile version accommodate touch navigation?

exercise

  • Create mobile versions of your designs in InDesign. (pages->create alternate Layout->custom
  • Save a backup copy of index.html. (Could be saved with a date as index1021.html)
  • Working on index.html, create a media query.
  • Add media query code.
  • Copy css for a mobile set.
  • Set the viewport for your page.
  • Working on the mobile set of css:
    convert type pixels to ems, convert divs, margins, padding, and images from pixels to percentages or ems, and view on a mobile device adjusting as needed.

examples:

 

adaptive vs. responsive examples:

http://mediaqueri.es/
http://muumilaakso.tampere.fi/