Responsividade e HTMLAlexandre Magno

Quem sou eu?

FISLFront ins

QCon

Desenvolvedor Web

Livro

● Como escrever sites responsivos com o Bootstrap usando Mobile First

● O que o Bootstrap ganhou sendo Mobile First

● Processo de construção de um site Mobile First com o Bootstrap

● Exemplo real de como pensar Mobile First

Responsividade?Porquê?

1/3 de usuários de internet nos EUA usam o celular como primeiro dispositivo de acesso a internet

Recomendações do Google

Responsividade● Responsividade

○ Técnicas que não fisicamente aumentam a habilidade da sua app de responder

○ Não temos controle da velocidade de conexão do usuário

● Responsividade (Responsive web design)○ Se adaptar as diferentes telas

Responsividade - percepção

Responsividade - adaptação

RWD ::: Fluid ::: Mobile First

Além da responsividade

Mobile First

RWDPE

Conteúdo e disposição

?

content first

codigo desktop first vs mobile first

backend

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

<?if($device->isIphone()) {

$html->render(‘Im a phone!’);

} ?>

BREAKPOINTS

Modularidade

Atomic Design

Bootstrap

responsividade não é só design...

apps híbridas x html5

Por que Web?

A internet é feita de links

E links levam para browsers

Por que nativo?

O celular é nossa extensão

Mas...

Muito conteúdo

Não faça isto!

Como ser multiplataforma?

Trello

API e Device API

Device API

HTML5

<p>To make a booking, call<a href="tel:+13174562564">

317-456-2564</a>

</p>

Solução simples e elegante

GEOLOCATION

navigator.geolocation.getCurrentPosition(function(position) {

do_something(position.coords.latitude, position.coords.

longitude);

});

var battery = navigator.battery || navigator.mozBattery ||

navigator.webkitBattery;

function updateBatteryStatus() {

console.log("Status da bateria: " + battery.level * 100 + "

%");

if (battery.charging) {

console.log("A bateria está carregando");

}

}

battery.addEventListener("chargingchange", updateBatteryStatus);

battery.addEventListener("levelchange", updateBatteryStatus);

updateBatteryStatus();

Upload API localStorage Acelerômetro

E mais...

content everywhere

venha trabalhar

na Globo.com

venha

trabalhar

na Globo.

com

@alexanmtz

alexandre.zimerer

alexandremagno.net

github.com/alexanmtz