Web Design Strategies

Graceful Degradation

Graceful degradation focuses on building the website for the most advanced/capable browsers.
Under this paradigm, older browsers are expected to have a poor, but passable experience.

Graceful Degradation

Praktiskt exempel


.box-with-opacity{
  opacity: 0.5;
}

Graceful Degradation

just fan.


.box-with-opacity{
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);
}

Progressive Enhancement

Progressive enhancement focuses on the content.
The goal of Web design is not merely to dazzle, but to deliver information to the widest audience possible.
universal access to a website’s content irrespective of a person’s physical abilities or technological capabilities.

Broad version: start with a baseline of functionality, enhance upwards based on capabilities.

Narrow version: start with HTML, then add CSS, then add JavaScript.


.box-with-opacity{
    background: rgb(0,0,0);
    background: rgba(0,0,0, 0.5);
}

Browsers som stödjer alpha-kanal får det, de andra får nöja sig utan alpha-kanal

dowebsitesneed tobeexperienced exactlythesame ineverybrowser

Läs mer:

A List Apart: Understanding Progressive Enhancement

Mobile First vs. Desktop First

http://gs.statcounter.com
  • Ska vi anpassa för alla tänkbara besökare eller enbart vår målgrupp?
  • Måste vi anpassa oss till exakt alla enheter som finns? Är det OK att sidan ser annorlunda ut på vissa enheter och browsers?
  • Måste vi verkligen ha fallbacks eller fixes för webbläsare som 1% av befolkningen använder?
Inta en roll: den ena tycker att det ska se likadant ut på alla enheter och browsers. Den andra tycker att vi ska strunta i minoriteterna (exempelvis folk som använder IE eller äldre telefoner)

Responsiva mått

em unit

Equal to the computed value of the font-size property of the element on which it is used.
W3C CSS Spec ~ Relative Lenghts

em unit


/* default font-size: 16px */
p{
  font-size: 2em;
}
.box{
  font-size: 2em;
}
          



  
Please download me

rem unit

Equal to the computed value of font-size on the root element.

W3C CSS Spec

R.E.M Unit

R.E.M

rem unit


/* default font-size: 16px */
p{
  font-size: 2rem;
}
.box{
  font-size: 2em;
}
          



  
Please download me

vh & vw

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger


p{

  font-size: 10vw;

}

10% av skärmens storlek, ändras om vi minskar browser-fönstret