Arhiva web · 90 articole

2007–2011: Mobil, HTML5 și design responsive

Telefonul inteligent, HTML5, media queries, web fonts și WebGL au extins radical suprafața designului web.

Context

Ce definea această perioadă.

Un singur canvas desktop nu mai era suficient. Touch, densități diferite, orientări variabile și conexiuni mobile au obligat designul să răspundă contextului.

Componentele trebuiau să se reașeze, imaginile să se adapteze, iar interacțiunile să funcționeze fără hover. Prototiparea în browser devenea tot mai importantă.

Păstrăm abordarea mobile-first, conținutul fluid și alegerea efectelor după capacitatea dispozitivului.

ANUL

2007

01
HTML și structură
primele schițe HTML5 și semantica aplicațiilor
02
CSS și layout
grile fixe de 960px într-un web încă desktop
03
Interacțiune și browser
interacțiuni touch fără hover
04
Performanță și livrare
CSS sprites și livrare pe conexiuni mobile
05
Accesibilitate
navigație mobilă și ținte tactile
06
Limbaj vizual
reflexii, gloss și estetica Web 2.0 târziu
07
Proces și instrumente
testare pe browsere desktop și Mobile Safari
08
CSS și layout
viewport meta și controlul paginii pe ecrane mobile
09
Interacțiune și browser
HTML5 Canvas pentru vizualizări și jocuri în browser
10
HTML și structură
schițe HTML5 pentru audio și video fără plugin
11
Interacțiune și browser
offline web applications în primele propuneri HTML5
12
Proces și instrumente
Blueprint CSS și grile reutilizabile de layout
13
Proces și instrumente
feature detection pentru browsere mobile noi
14
Performanță și livrare
imagini pentru densități diferite înainte de srcset
15
Accesibilitate
navigație Ajax și păstrarea butonului Back
16
Proces și instrumente
Firebug pentru inspectarea layoutului și rețelei
17
Performanță și livrare
gzip și concatenare în optimizarea frontend
18
HTML și structură
microformate pentru persoane, locuri și evenimente

ANUL

2008

01
HTML și structură
HTML5 Working Draft și elemente semantice noi
02
CSS și layout
media queries ca fundament pentru layout adaptiv
03
Interacțiune și browser
Canvas și grafică programată în browser
04
Performanță și livrare
V8 și așteptări noi pentru viteza JavaScript
05
Accesibilitate
WAI-ARIA și aplicații web accesibile
06
Limbaj vizual
revenirea fonturilor web prin @font-face
07
Proces și instrumente
testare odată cu apariția Google Chrome
08
Limbaj vizual
border-radius și box-shadow fără imagini decorative
09
Interacțiune și browser
Web Storage și starea păstrată în browser
10
Interacțiune și browser
Geolocation API și interfețe dependente de poziție
11
Performanță și livrare
Application Cache și primele experiențe offline
12
HTML și structură
fallback pentru audio și video HTML5
13
Accesibilitate
roluri landmark WAI-ARIA în aplicații web
14
Limbaj vizual
transformări CSS în primele implementări WebKit
15
CSS și layout
960 Grid System și consistența layouturilor desktop
16
Performanță și livrare
YSlow și reguli explicite pentru performanță
17
Proces și instrumente
GitHub și colaborarea distribuită pe cod frontend
18
Performanță și livrare
sprite-uri și data URI pentru reducerea requesturilor

ANUL

2009

01
HTML și structură
elemente HTML5 pentru structura paginii
02
CSS și layout
transformări CSS și compoziții fără imagini
03
Interacțiune și browser
interfețe JavaScript cu stări mai complexe
04
Performanță și livrare
WOFF și costul fonturilor web
05
Accesibilitate
ARIA pentru widgeturi dinamice
06
Limbaj vizual
mobile-first ca ordine de prioritizare
07
Proces și instrumente
Node.js și unelte JavaScript dincolo de browser
08
Interacțiune și browser
Canvas pentru jocuri și vizualizări interactive
09
HTML și structură
codecuri video HTML5 și strategii de fallback
10
Interacțiune și browser
localStorage pentru preferințe și stare locală
11
Accesibilitate
geolocație cu permisiune explicită a utilizatorului
12
Limbaj vizual
gradienți CSS fără imagini de fundal
13
CSS și layout
border-radius și colțuri fluide în componente
14
Limbaj vizual
animații WebKit și mișcare accelerată
15
Interacțiune și browser
jQuery UI și limbaj comun pentru widgeturi
16
Accesibilitate
progressive enhancement pentru smartphone-uri
17
Accesibilitate
anunțarea schimbărilor de stare pentru cititoare de ecran
18
Performanță și livrare
data URI și compromisuri de cache

ANUL

2010

01
HTML și structură
HTML5 video și conținut media nativ
02
CSS și layout
Responsive Web Design ca sistem de layout
03
Interacțiune și browser
tranziții CSS pentru feedback discret
04
Performanță și livrare
fonturi web și strategia de încărcare
05
Accesibilitate
touch, orientare și conținut accesibil pe mobil
06
Limbaj vizual
imagini flexibile pe ecrane cu lățimi variabile
07
Proces și instrumente
prototipare directă în browser
08
CSS și layout
viewport meta în implementări responsive mobile
09
Limbaj vizual
transformări CSS 2D și 3D pentru interfețe
10
Interacțiune și browser
Web Storage în aplicații fără sesiune permanentă pe server
11
Interacțiune și browser
Geolocation API în servicii locale
12
HTML și structură
HTML5 input types și tastaturi mobile potrivite
13
HTML și structură
elemente section, article și nav în structuri editoriale
14
Proces și instrumente
Modernizr și detectarea capabilităților browserului
15
Limbaj vizual
SVG inline pentru iconuri scalabile
16
Interacțiune și browser
touch events și gesturi pe dispozitive mobile
17
Performanță și livrare
Application Cache și modelul offline timpuriu
18
Accesibilitate
mobile-first content și prioritizarea informației

ANUL

2011

01
HTML și structură
HTML ca Living Standard
02
CSS și layout
CSS 2.1 și layout interoperabil
03
Interacțiune și browser
WebGL 1.0 și grafică 3D în browser
04
Performanță și livrare
problema imaginilor responsive
05
Accesibilitate
HTML semantic pentru regiuni și navigație
06
Limbaj vizual
animații CSS și mișcare fără plugin
07
Proces și instrumente
frameworkuri responsive și consistență de echipă
08
CSS și layout
navigație responsive pentru meniuri complexe
09
Limbaj vizual
gradienți CSS3 în sisteme vizuale fără imagini
10
Interacțiune și browser
History API și URL-uri pentru aplicații dinamice
11
Interacțiune și browser
WebSocket și feedback în timp real
12
Performanță și livrare
IndexedDB și date structurate păstrate local
13
Limbaj vizual
WOFF ca format interoperabil pentru fonturi web
14
Accesibilitate
landmark-uri ARIA și orientare în aplicații
15
Performanță și livrare
waterfall de rețea în instrumentele browserului
16
Proces și instrumente
Less și Sass în organizarea codului CSS
17
Performanță și livrare
bugete de performanță pentru conexiuni mobile
18
Proces și instrumente
feature detection în locul identificării browserului

Ce definea această perioadă.

primele schițe HTML5 și semantica aplicațiilor

grile fixe de 960px într-un web încă desktop

interacțiuni touch fără hover

CSS sprites și livrare pe conexiuni mobile

navigație mobilă și ținte tactile

reflexii, gloss și estetica Web 2.0 târziu

testare pe browsere desktop și Mobile Safari

viewport meta și controlul paginii pe ecrane mobile

HTML5 Canvas pentru vizualizări și jocuri în browser

schițe HTML5 pentru audio și video fără plugin

offline web applications în primele propuneri HTML5

Blueprint CSS și grile reutilizabile de layout

feature detection pentru browsere mobile noi

imagini pentru densități diferite înainte de srcset

navigație Ajax și păstrarea butonului Back

Firebug pentru inspectarea layoutului și rețelei

gzip și concatenare în optimizarea frontend

microformate pentru persoane, locuri și evenimente

HTML5 Working Draft și elemente semantice noi

media queries ca fundament pentru layout adaptiv

Canvas și grafică programată în browser

V8 și așteptări noi pentru viteza JavaScript

WAI-ARIA și aplicații web accesibile

revenirea fonturilor web prin @font-face

testare odată cu apariția Google Chrome

border-radius și box-shadow fără imagini decorative

Web Storage și starea păstrată în browser

Geolocation API și interfețe dependente de poziție

Application Cache și primele experiențe offline

fallback pentru audio și video HTML5

roluri landmark WAI-ARIA în aplicații web

transformări CSS în primele implementări WebKit

960 Grid System și consistența layouturilor desktop

YSlow și reguli explicite pentru performanță

GitHub și colaborarea distribuită pe cod frontend

sprite-uri și data URI pentru reducerea requesturilor

elemente HTML5 pentru structura paginii

transformări CSS și compoziții fără imagini

interfețe JavaScript cu stări mai complexe

WOFF și costul fonturilor web

ARIA pentru widgeturi dinamice

mobile-first ca ordine de prioritizare

Node.js și unelte JavaScript dincolo de browser

Canvas pentru jocuri și vizualizări interactive

codecuri video HTML5 și strategii de fallback

localStorage pentru preferințe și stare locală

geolocație cu permisiune explicită a utilizatorului

gradienți CSS fără imagini de fundal

border-radius și colțuri fluide în componente

animații WebKit și mișcare accelerată

jQuery UI și limbaj comun pentru widgeturi

progressive enhancement pentru smartphone-uri

anunțarea schimbărilor de stare pentru cititoare de ecran

data URI și compromisuri de cache

HTML5 video și conținut media nativ

Responsive Web Design ca sistem de layout

tranziții CSS pentru feedback discret

fonturi web și strategia de încărcare

touch, orientare și conținut accesibil pe mobil

imagini flexibile pe ecrane cu lățimi variabile

prototipare directă în browser

viewport meta în implementări responsive mobile

transformări CSS 2D și 3D pentru interfețe

Web Storage în aplicații fără sesiune permanentă pe server

Geolocation API în servicii locale

HTML5 input types și tastaturi mobile potrivite

elemente section, article și nav în structuri editoriale

Modernizr și detectarea capabilităților browserului

SVG inline pentru iconuri scalabile

touch events și gesturi pe dispozitive mobile

Application Cache și modelul offline timpuriu

mobile-first content și prioritizarea informației

HTML ca Living Standard

CSS 2.1 și layout interoperabil

WebGL 1.0 și grafică 3D în browser

problema imaginilor responsive

HTML semantic pentru regiuni și navigație

animații CSS și mișcare fără plugin

frameworkuri responsive și consistență de echipă