Debugování responzivních webů

•

0 likes•328 views

Martin Michálek

Demo z Frontendisti.cz. Video bude lepší. Bude k dispozici na frontendisti.cz.

Debugování
responzivních
webů
Martin Michálek
@machal
23. června 2016
{F}

Tři fáze ladění 
 
1) DevTools
2) Browserstack
3) Zařízení & Browsersync

DevTools
Device Toolbar v Chrome DevTools. Tady trávím
většinu času. Odladím vzhled pro všechna rozlišení.

Browserstack
Používám namísto emulátorů a simulátorů.
Stojí asi 500 Kč na měsíc.

Browsersync
Nakonec testuji na fyzických zařízeních.  
Browsersync s nimi lze propojit i napříč platformami.

Děkuji!
@machal
facebook.com/VzhuruDolu
martin@vzhurudolu.cz

More Related Content

Viewers also liked

Exhibition "Digital Design:Behind the Pixels" - UX Camp Europe 2016

Exhibition "Digital Design:Behind the Pixels" - UX Camp Europe 2016

Exhibition "Digital Design:Behind the Pixels" - UX Camp Europe 2016Lukas Marvan

Pohroma jménem optimalizace pro mobilní zařízení (WebTop100 2013)

Pohroma jménem optimalizace pro mobilní zařízení (WebTop100 2013)

Pohroma jménem optimalizace pro mobilní zařízení (WebTop100 2013)Martin Michálek

Přístupnost prakticky 2.0

Přístupnost prakticky 2.0

Přístupnost prakticky 2.0Lukas Marvan

Přístupnost na mobilních zařízeních

Přístupnost na mobilních zařízeních

Přístupnost na mobilních zařízeníchRadek Pavlíček

Responzivní webdesign (pro MS Fest)

Responzivní webdesign (pro MS Fest)

Responzivní webdesign (pro MS Fest)Martin Michálek

Výstava o digitálním designu

Výstava o digitálním designu

Výstava o digitálním designuLukas Marvan

Mobile First v praxi

Mobile First v praxi

Mobile First v praxiMartin Michálek

Qu'est-ce que la communication digitale (numerique)

Qu'est-ce que la communication digitale (numerique)

Qu'est-ce que la communication digitale (numerique)Fadhila BRAHIMI

Design webů v prohlížeči

Design webů v prohlížeči

Design webů v prohlížečiMartin Michálek

Technology as a Cultural Practice - UX Australia

Technology as a Cultural Practice - UX Australia

Technology as a Cultural Practice - UX AustraliaRachel Hinman

Dalibor Pulkert: Mobilní Džungle

Dalibor Pulkert: Mobilní Džungle

Dalibor Pulkert: Mobilní DžungleEtnetera

Final virtual seminar_mobile_frontier

Final virtual seminar_mobile_frontier

Final virtual seminar_mobile_frontierRachel Hinman

The Mobile Frontier

The Mobile Frontier

The Mobile FrontierRachel Hinman

Testování použitelnosti prakticky

Testování použitelnosti prakticky

Testování použitelnosti praktickyLukas Marvan

Mobile Prototyping Essentials Workshop: Part 1

Mobile Prototyping Essentials Workshop: Part 1

Mobile Prototyping Essentials Workshop: Part 1Rachel Hinman

Mobile Prototyping Essentials Workshop: Part 2

Mobile Prototyping Essentials Workshop: Part 2

Mobile Prototyping Essentials Workshop: Part 2Rachel Hinman

Viewers also liked (16)

Exhibition "Digital Design:Behind the Pixels" - UX Camp Europe 2016

Exhibition "Digital Design:Behind the Pixels" - UX Camp Europe 2016

Exhibition "Digital Design:Behind the Pixels" - UX Camp Europe 2016

Pohroma jménem optimalizace pro mobilní zařízení (WebTop100 2013)

Pohroma jménem optimalizace pro mobilní zařízení (WebTop100 2013)

Pohroma jménem optimalizace pro mobilní zařízení (WebTop100 2013)

Přístupnost prakticky 2.0

Přístupnost prakticky 2.0

Přístupnost prakticky 2.0

Přístupnost na mobilních zařízeních

Přístupnost na mobilních zařízeních

Přístupnost na mobilních zařízeních

Responzivní webdesign (pro MS Fest)

Responzivní webdesign (pro MS Fest)

Responzivní webdesign (pro MS Fest)

Výstava o digitálním designu

Výstava o digitálním designu

Výstava o digitálním designu

Mobile First v praxi

Mobile First v praxi

Mobile First v praxi

Qu'est-ce que la communication digitale (numerique)

Qu'est-ce que la communication digitale (numerique)

Qu'est-ce que la communication digitale (numerique)

Design webů v prohlížeči

Design webů v prohlížeči

Design webů v prohlížeči

Technology as a Cultural Practice - UX Australia

Technology as a Cultural Practice - UX Australia

Technology as a Cultural Practice - UX Australia

Dalibor Pulkert: Mobilní Džungle

Dalibor Pulkert: Mobilní Džungle

Dalibor Pulkert: Mobilní Džungle

Final virtual seminar_mobile_frontier

Final virtual seminar_mobile_frontier

Final virtual seminar_mobile_frontier

The Mobile Frontier

The Mobile Frontier

The Mobile Frontier

Testování použitelnosti prakticky

Testování použitelnosti prakticky

Testování použitelnosti prakticky

Mobile Prototyping Essentials Workshop: Part 1

Mobile Prototyping Essentials Workshop: Part 1

Mobile Prototyping Essentials Workshop: Part 1

Mobile Prototyping Essentials Workshop: Part 2

Mobile Prototyping Essentials Workshop: Part 2

Mobile Prototyping Essentials Workshop: Part 2

More from Martin Michálek

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeMartin Michálek

CSS a sazba knih: jak jsme daleko?

CSS a sazba knih: jak jsme daleko?

CSS a sazba knih: jak jsme daleko?Martin Michálek

Browsers: from competition to collaboration

Browsers: from competition to collaboration

Browsers: from competition to collaborationMartin Michálek

„To my ne, to oni!“ – komponenty třetích stran a rychlost webu

„To my ne, to oni!“ – komponenty třetích stran a rychlost webu

„To my ne, to oni!“ – komponenty třetích stran a rychlost webuMartin Michálek

17 technických tipů ke zrychlení webů

17 technických tipů ke zrychlení webů

17 technických tipů ke zrychlení webůMartin Michálek

Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?

Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?

Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Martin Michálek

Blbosti kolem webové rychlosti

Blbosti kolem webové rychlosti

Blbosti kolem webové rychlostiMartin Michálek

SEO jako Brno - workshop k rychlosti webu

SEO jako Brno - workshop k rychlosti webu

SEO jako Brno - workshop k rychlosti webuMartin Michálek

Web rychlý jako blesk (s důrazem na AMP)

Web rychlý jako blesk (s důrazem na AMP)

Web rychlý jako blesk (s důrazem na AMP)Martin Michálek

CSS proměnné (Custom Properties)

CSS proměnné (Custom Properties)

CSS proměnné (Custom Properties)Martin Michálek

Devel.cz: Bootstrap 4

Devel.cz: Bootstrap 4

Devel.cz: Bootstrap 4Martin Michálek

AMP: Co řeší a co nového nabízí

AMP: Co řeší a co nového nabízí

AMP: Co řeší a co nového nabízíMartin Michálek

Metriky rychlosti načítání

Metriky rychlosti načítání

Metriky rychlosti načítáníMartin Michálek

WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory

WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory

WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryMartin Michálek

Je CSS vážně tak podivné?

Je CSS vážně tak podivné?

Je CSS vážně tak podivné?Martin Michálek

WordPress šablony a rychlost načítání (WordCamp Praha 2017)

WordPress šablony a rychlost načítání (WordCamp Praha 2017)

WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek

Slasti a pasti prototypování v HTML

Slasti a pasti prototypování v HTML

Slasti a pasti prototypování v HTMLMartin Michálek

10 praktických CSS3 a SVG řešení

10 praktických CSS3 a SVG řešení

10 praktických CSS3 a SVG řešeníMartin Michálek

Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů

Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů

Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůMartin Michálek

Responzivní obrázky v praxi

Responzivní obrázky v praxi

Responzivní obrázky v praxiMartin Michálek

More from Martin Michálek (20)

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře

CSS a sazba knih: jak jsme daleko?

CSS a sazba knih: jak jsme daleko?

CSS a sazba knih: jak jsme daleko?

Browsers: from competition to collaboration

Browsers: from competition to collaboration

Browsers: from competition to collaboration

„To my ne, to oni!“ – komponenty třetích stran a rychlost webu

„To my ne, to oni!“ – komponenty třetích stran a rychlost webu

„To my ne, to oni!“ – komponenty třetích stran a rychlost webu

17 technických tipů ke zrychlení webů

17 technických tipů ke zrychlení webů

17 technických tipů ke zrychlení webů

Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?

Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?

Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?

Blbosti kolem webové rychlosti

Blbosti kolem webové rychlosti

Blbosti kolem webové rychlosti

SEO jako Brno - workshop k rychlosti webu

SEO jako Brno - workshop k rychlosti webu

SEO jako Brno - workshop k rychlosti webu

Web rychlý jako blesk (s důrazem na AMP)

Web rychlý jako blesk (s důrazem na AMP)

Web rychlý jako blesk (s důrazem na AMP)

CSS proměnné (Custom Properties)

CSS proměnné (Custom Properties)

CSS proměnné (Custom Properties)

Devel.cz: Bootstrap 4

Devel.cz: Bootstrap 4

Devel.cz: Bootstrap 4

AMP: Co řeší a co nového nabízí

AMP: Co řeší a co nového nabízí

AMP: Co řeší a co nového nabízí

Metriky rychlosti načítání

Metriky rychlosti načítání

Metriky rychlosti načítání

WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory

WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory

WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory

Je CSS vážně tak podivné?

Je CSS vážně tak podivné?

Je CSS vážně tak podivné?

WordPress šablony a rychlost načítání (WordCamp Praha 2017)

WordPress šablony a rychlost načítání (WordCamp Praha 2017)

WordPress šablony a rychlost načítání (WordCamp Praha 2017)

Slasti a pasti prototypování v HTML

Slasti a pasti prototypování v HTML

Slasti a pasti prototypování v HTML

10 praktických CSS3 a SVG řešení

10 praktických CSS3 a SVG řešení

10 praktických CSS3 a SVG řešení

Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů

Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů

Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů

Responzivní obrázky v praxi

Responzivní obrázky v praxi

Responzivní obrázky v praxi

Debugování responzivních webů

1. Debugování responzivních webů Martin Michálek @machal 23. června 2016 {F}

2. Tři fáze ladění    1) DevTools 2) Browserstack 3) Zařízení & Browsersync

3. DevTools Device Toolbar v Chrome DevTools. Tady trávím většinu času. Odladím vzhled pro všechna rozlišení.

4. Browserstack Používám namísto emulátorů a simulátorů. Stojí asi 500 Kč na měsíc.

5. Browsersync Nakonec testuji na fyzických zařízeních.   Browsersync s nimi lze propojit i napříč platformami.

6. Děkuji! @machal facebook.com/VzhuruDolu martin@vzhurudolu.cz  