Responsive Websites

Serban Ghita

  • Senior Software Engineer
  • 11 ani - IT & eCommerce
  • 2002 - primul job oficial in IT
  • 5+ ani - Avangate
  • Website (CMS), ShoppingCart, Cpanel
  • contribui la proiecte open-source

Specialitati: PHP, MySQL, HTML/CSS, JavaScript

Avangate Tech Sessions

Agenda prezentare

  • Tools
  • Content strategy
  • Prototipare website responsive
  • Constructie website responsive de la zero
  • Twitter Bootstrap
  • Zurb Foundation
  • Mobile detection / feature detection
  • Concluzii

Tools: Unit measures

  • percent: width: 25%;
  • pixels: font-size: 12px;
  • rems (root elastic measurement): width: 40rem; CanIUse, example, calculator
  • ems (elastic measurement units cascade): padding: 1em; example
  • Altele: pt, cm, mm, in, pc, vw

References: Scalable interfaces with rem units, Golden Grid, W3C tips on fonts sizes

Tools: Unit measures

  • px este o masura "statica"
  • em si rem sunt masuri relative (fluide)
  • % este o masura fluida prin definitie

Reference: What's the deal with em and rem?

Tools

Break points

Tools: Layout breakpoints

  • 20em (320px)
  • 30em (480px)
  • 37.5em (600px)
  • 48em (768px)
  • 56.25em (900px)
  • 68.75em (1100px)
  • 81.25em (1300px)

Reference: http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/

Content strategy

Wikipedia: "Content strategy refers to the planning, development, and management of content—written or in other media. The term is particularly common in web development since the late 1990s."

Prototipare website

Mobile first, responsive, fluid.

Website de la zero

Demo live: http://goo.gl/hwQrZi

Website + Twitter Bootstrap

Demo live: http://goo.gl/XZUS8p

Website + Zurb Foundation

Demo live: http://goo.gl/FLWQLG

Mobile detection (Server-side)

mobiledetect.net

Feature detection (Client-side)

modernizr

Concluzii

  • Folositi em si rem pentru dimensiuni.
  • Folositi un layout fluid.
  • Folositi un grid.
  • Scoateti CSS-ul nefolosit din framework.
  • Faceti strategia de continut in functie de continut si nu de marimea device-urilor din piata.
  • Utilizati o solutie server-side pentru a servi pagini cat mai mici ca dimensiune.

Multumesc!

Pssst ...

http://www.avangate.com/about-us/careers/