Responsive Concept & Design

Responsive Koncepció • Technika • Responsive Workflow • Tárgyalás & szerződés • A jövő

A jó mobiloldal app-szerűen funkcionális. Az app-generáció számára a desktop-világ a sohase olvasott reklámagitáció, a sohase használt gizmók, a figyelemelterelő képek végtelen szemétfolyamának tűnik.

"Mobile first!"

A Luke Wroblewski által 2009-ben megfogalmazott és a webdesign iparban mára teljesen meghonosodott elv szerint elsőként a mobilverziót kell kifejleszteni. Nem csak azért, mert egyre nő a mobilos megtekintések aránya. Az elsőként mobilra fejlesztett változat a weboldal fő funkcionalitását tartalmazza, a bizalomépítő(-nek szánt) sallang és keresőoptimalizáló rizsa nélkül. Ennek hatására pedig a desktop verzió is jobb lesz.

A mobiloldalra több okból nem lehet, ill. nem célszerű már úgy tekinteni, mint a desktop oldal lebutítására, mert pl. az AppStore több, mint 1 millió ingyenes appjétől elkényeztetett felhasználó zökkenőmentes élményt vár, azaz kizárólag azokra a kérdéseire vár választ / megoldást, amelyek és amilyen sorrendben benne felmerülnek.

A jó mobiloldal app-szerűen funkcionális. Az app-generáció számára a desktop-világ a sohase olvasott reklámagitáció, a sohase használt gizmók, a figyelemelterelő képek végtelen szemétfolyamának tűnik.

Desktop-élményeivel a fejében érthető, ha az ügyfél megpróbálhatja védeni a motyóját, a „bizalmi elemeket”, és olyan dogmák szerint cselekszik, mint pl. hogy a „kezdőlap” tartalmazza a teljes webes kínálat szemelvényeit. Valójában mobilon a felhasználó ÉPPEN ABBÓL tudja, hogy komoly a cég, hogy NINCS tele mindenféle „hasonló cikkel”, egy kis kontakttal, egy kis hírlevéllel… HANEM EGYSZERŰEN APP-SZERŰ!

A profi mobiloldal (nagyobb, drága kampány része) nem igyekszik mindenről "helyben" meggyőzni a felhasználót. Ő nem a cég teljes fellépése, hanem az átgondolt stratégiának egyik terméke (az agyakban úgyis egymáshoz rendeltetik az összes termék, arra való az arculat). Nem igyekszik szénné győzködni a felhasználót, mert az ún. customer journey-nek csak egy része. Biztos abban, hogy a felhasználó még visszatér valamelyik bejáraton. Például rendelést leadni, sok opcióval (döntéssel) nem a mobilján fog a látogatóhad; most „nem azért van itt”.

Ha már kifejlődött a mobiloldal, meg lehet nézni, hogy még miket érdemes megjeleníteni nagyobb kijelzőn, és csökkenő fontossági sorrendben bővíteni a tablet, végül a desktop elemeinek számát.

A meglepő tapasztalat az, hogy így nemcsak a mobiloldal nyújt supersmooth élményt, hanem a desktop változat is lényegretörőbb és felhasználóbarátabb. Amikor a mobilnézetet desktoposítjuk, könnyen kiderülhet, hogy mindenütt ugyanazok a dolgok a legfontosabbak. És mivel egy csomó interakciós megoldás a mobileszközökkel érkezett az életünkbe, nem is biztos, hogy eszünkbe jutnának, ha a desktoppal kezdenénk.

Ha az ügyfél mégis úgy érzi: „fölforgatják a koncepciómat!” – a válasz: Mobilverziót kifejleszteni fun! A koncepcionáló újrajárhatja a felhasználó gondolatmenetét, és a designerek is szeretik a back-to-basics szituációkat.

A magánórákat igényeinek megfelelően tartjuk. HTML-CSS előismeretek szükségesek.

Időtartam: kb. 36 × 60 perc

Elmélet: Responsive Koncepció

  • Responsive Web Design definiálása (Ethan Marcotte)
  • Előnyei
  • Új eszközök
  • A jövő: még kisebb és még nagyobb eszközök

Technika

  • Méret, felbontás, pontsűrűség
  • Megoldások
    • Mobilverzió átirányítással
    • Mobil-alkalmazás
    • RWD
    • Adaptív design
    • RESS
  • Media queries
  • Hagyományos layoutok: fixed / elastic, liquid (fluid), hybrid
  • Új layout elvek (Luke Wroblewski, Brad Frost)
    • Mostly fluid
    • Column drop
    • Layout shifter
    • Tiny tweaks
    • Off canvas
    • Tiles (csempék)
    • Egészkijelzős lapok viewport height-tal
    • Tiles (csempék) viewport width-tel
  • Content coreography
    • Table caption
    • Flexbox
  • Új navigációs elvek
    • Do-nothing
    • Footer-only
    • Hide & cry
    • Footer anchor
    • Select menu
    • Toggle
    • Flyout (Off canvas)
    • Tabs
  • Tipográfia
    • Szövegtulajdonságok
    • Új mértékegységek: rem, vw
    • Fejezetcím-effektek
    • Automatikus szövegoszlopok
  • Grafikák
    • Fluid images
    • Háttérképek
    • Feltételes letöltés
    • Image maps
    • Source set
    • SVG
    • CSS-Sprites
    • Nagyfelbontású ikonok, UTF-8 ikonok, webfont ikonok
  • Média
    • Carousel
    • Videók
    • Táblázatok
    • Űrlapok
  • Keretrendszerek
    • Rácsok
    • Atomic
    • Összetettek
    • A Dreamweaver új lehetőségei
  • Szintén megér egy misét...
    • Responsive newsletter
    • Responsive jQuery

Performance tuning

  • Frontend
    • http-lekérdezések
    • Caching
    • CDNs
    • JavaScript helyett CSS
    • Tömörítés (minifying)
    • Sorrend
    • Képtömörítés
  • Backend
    • Szerverteljesítmény
    • Tömörítés
    • Apache szerver
    • Expires-headers
    • DNS-lekérések redukálása
    • Entity tagek konfigurálása
    • Átirányítások kerülése

Responsive Workflow

  • Az interaktív rendszerekről: bizonytalanságok, használat, lehetetlen specifikáció
  • Klasszikus workflow a vízesés-modell (1956) alapján
  • Progressive enhancement vs. Graceful degradation
  • Desktop first
  • Mobile first (Luke Wroblewski 2009)
  • Vízió definiálása
  • Célcsoport definiálása
  • Breakpoints (eszközök definiálása
  • Klasszikus webdesign vs. Responsive webdesign workflow
  • 7-lépcsős modell:
    1. Content Strategy
    2. Content Wireframe (wireframing tools)
    3. Content Creation
    4. Style Tiles, Atomic Design (Josh Duck és Brad Frost)
    5. Linear Design
    6. Prototyping
    7. Device Testing

Elmélet: Tárgyalás & szerződés

  • Mit adjunk / mit NE adjunk el?
  • Ügyfelek jellemző mondatai
  • Agilis szerződés, mire figyeljünk RWD-projektek szerződésénél
  • Böngésző és mobileszköz tesztek
  • Change Management: Mit kell megfontolnia az Ügyvezetőnek / Designernek / Ügyfélnek / Értékesítésnek

Érdekes linkek

01 Elmélet

02 Inspiration

03 Methods

04 Layouts

05 Navigations

06 Tools

HTML5-update

CSS Frameworks - Rácsok

CSS Frameworks - Atomic

CSS Frameworks - Összetett

Hasznosságok

Elemzés

Simulators

Feature detection

Kapcsolódó modulok: HTML / CSS, Dreamweaver, Online marketing