Z praxe mobilního webdesignu (Webexpo 2011)
Upcoming SlideShare
Loading in...5
×
 

Z praxe mobilního webdesignu (Webexpo 2011)

on

  • 3,136 views

Martin is sharing his mobile webdesign experience. Examples include popular Czech mobile website for foodies — m.scuk.cz — and others....

Martin is sharing his mobile webdesign experience. Examples include popular Czech mobile website for foodies — m.scuk.cz — and others.

He will try to answer these questions:

— Why "desktop" websites fail on mobile?
— Can we adapt "desktop" websites for mobile?
— Designers say "mobile first" and it is true. But is it true for front-end developers?

Statistics

Views

Total Views
3,136
Views on SlideShare
2,631
Embed Views
505

Actions

Likes
3
Downloads
22
Comments
0

10 Embeds 505

http://webexpo.cz 213
http://webexpo.cz 213
http://webexpo.net 27
http://webexpo.net 27
https://twitter.com 11
http://twitter.com 8
http://paper.li 2
http://us-w1.rockmelt.com 2
http://www.twylah.com 1
https://si0.twimg.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Z praxe mobilního webdesignu (Webexpo 2011) Z praxe mobilního webdesignu (Webexpo 2011) Presentation Transcript

  • Z praxe mobilního webdesignuFriday, September 23, 11
  • Martin Michálek Shortcat studio twitter.com/machalFriday, September 23, 11
  • e-Slovensko.cz 1 „smartphonizace” desktopu Mobilní Scuk 2 extra mobilní web Pražská kina 3 jeden web, různé pohledyFriday, September 23, 11
  • 1 www.e-slovensko.cz „smartphonizace” desktopuFriday, September 23, 11
  • Friday, September 23, 11
  • ? V čem je problém „desktopových“ webů při prohlížení na mobilech?Friday, September 23, 11
  • Friday, September 23, 11
  • Problémy desktopového webu při prohlížení na mobilech 1 Informační obžerství 2 Přebujelý layout 3 Pomalé načítáníFriday, September 23, 11
  • SS C @media screen and (max-width: 480px) {  ... }Friday, September 23, 11
  • Problémy desktopového webu při prohlížení na mobilech 1 Informační obžerství 2 Přebujelý layout 3 Pomalé načítáníFriday, September 23, 11
  • SS C @media screen and (max-width: 480px) { .zbytne_prvky { display: none; } }Friday, September 23, 11
  • ✖ ❌Friday, September 23, 11
  • ✖ ✖ ❌ ✖ ✖ ✖ ✖Friday, September 23, 11
  • Friday, September 23, 11
  • Problémy desktopového webu při prohlížení na mobilech 1 Informační obžerství 2 Přebujelý layout 3 Pomalé načítáníFriday, September 23, 11
  • S S C Destrukce layoutu #content, #side { width: auto; float: none; }Friday, September 23, 11
  • L T M H Layout v šířce zařízení <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">Friday, September 23, 11
  • Friday, September 23, 11
  • Javascriptem upravíme navigaciFriday, September 23, 11
  • Friday, September 23, 11
  • Vypadá to hezky jen na první pohled.Friday, September 23, 11
  • 1. problém — rychlost načítáníFriday, September 23, 11
  • 2. problém — struktura stránkyFriday, September 23, 11
  • ? Je možné „desktopové“ weby zpětně upravit pro mobily?Friday, September 23, 11
  • de si gn O DO : re T „Smartphonizovat” půjde jen nejjednodušší weby. Proč?Friday, September 23, 11
  • Foto: Hummer.comFriday, September 23, 11
  • Hummer efekt: Z neúsporně vymyšleného úsporné neuděláte. Foto: Hummer.comFriday, September 23, 11
  • Hummery mezi weby vyžadují buď zvláštní mobilní verzi nebo sešrotování. Foto: Hummer.comFriday, September 23, 11
  • Webové HummeryFriday, September 23, 11
  • 2 m.scuk.cz extra mobilní webFriday, September 23, 11
  • Proč zvláštní mobilní Scuk.cz? 1) Technická náročnost desktopu — mapyFriday, September 23, 11
  • Proč zvláštní mobilní Scuk.cz? 2) Jiný způsob použití — geolokaceFriday, September 23, 11
  • 2 Pražská kina jeden web, různé pohledyFriday, September 23, 11
  • BIO OKO: jeden web, více pohledů Tiskárna Stará NokiaFriday, September 23, 11
  • BIO OKO: jeden web, více pohledů SmartphoneFriday, September 23, 11
  • BIO OKO: jeden web, více pohledů TabletFriday, September 23, 11
  • BIO OKO: jeden web, více pohledů DesktopFriday, September 23, 11
  • Výhody jednoho webu 1) Argument proti informačnímu obžerství 2) Jeden web, jedny nákladyFriday, September 23, 11
  • ? Pro designéry platí „mobile first“. Je to ale správný postup i pro frond-end vývojáře?Friday, September 23, 11
  • Vrstvy designu webu dříve Desktop layout CSS vzhled reset + typo HTML + default CSSFriday, September 23, 11
  • Vrstvy designu webu nyní Křápy Smartphone Tablet Desktop layout CSS vzhled reset + typo HTML + default CSSFriday, September 23, 11
  • ? Kdy začít při návrhu webů počítat s mobilními zařízeními?Friday, September 23, 11
  • Nejpozději 23. 9. 2011.Friday, September 23, 11
  • To bylo včera.Friday, September 23, 11
  • Díky! twitter.com/machalFriday, September 23, 11