ResponsiveWeb

Designna przykładzie Twitter Bootstrap 3

RESPONSIVEhttp://motherfuckingwebsite.com

It’s all about mobile!- 1 miliard sprzedanych urządzeń mobilnych w 2013- 2 miliardy aktywnych urządzeń mobilnych w 2013

http://mashable.com/2013/01/08/tablets-outsell-notebooks/

Responsive - 3 charakterystyki

http://alistapart.com/article/responsive-web-design

http://blogs.endjin.com/2013/09/bootstrap-3-at-a-glance-part-one-motivations/

CSS grid

Skalowalny kontent / obrazki

@media-queries

Praktyczne porady● nie używamy zafixowanych szerokości oraz długości elementów

(szczególnie obrazków) - zastępujemy % (tam gdzie można)● zapominamy o <br /> oraz &nbsp; i zastępujemy je marginesami i

paddingiem● wszystkie elementy wystepujące na stronie otaczamy odpowiednią

strukturą i tagami HTML (nic nie “wisi w powietrzu”)● ukrywamy zbędne elementy dla mobile (z umiarem!)● pamiętamy, że display: none; jedynie ukrywa elementy (one i tak się

pobierają - obrazki!)● ograniczamy ilość wykorzystywanego JS - wykorzystujemy max z tego co

dają nam frameworki CSS

http://blogs.endjin.com/2013/04/tips-for-implementing-responsive-designs-using-bootstrap/

Twitter Bootstrap - by nerds, for nerds

- Open Source - Github- LESS & Node.js- sierpień 2011 - Mark Otto (@mdo)

& Jackob Thorton (@fat)

Cele pierwszej wersji● wszystkie popularne komponenty dostępne w jednym miejscu● reużywalne komponenty● wykorzystanie LESS do budowania CSS● radzenie sobie z różnym stopniem wsparcia przeglądarek● ten sam wygląd na każdym PC

Projekt numer 1 na Github (od 2012)

Stan na grudzień 2013:22.000+ forks61.000+ stars

4900+ watchers

Bootstrap 2 (2012)● świadomość pojawiania się coraz szerszej gamy urządzeń mobilnych● CSS3● mix responsywnego gridu (fluid layouts) z fixed oraz możliwość wyboru

pomiędzy nimi● wykorzystanie media queries● dostosowywanie się do różnych rodzajów urządzeń / rozdzielczości● rozwój komponentów (gradienty, przejścia, animacje, cienie)● rozwój pluginów JS

Bootstrap 3 (19.08.2013)● “mobile first & totally responsive”● “flat & ascetic”● kompilowany po stronie przeglądarki (Grunt + Bower)● całość jest wielkim gridem (box-sizing, border-box)

● Glyphicons & Font Awesome● wszystkie pluginy JS napisane od zera● 12 kolumn● 4 zakresy klas

http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

Cele w wersji 3● mniejszy i lżejszy CSS● zmniejszenie wymagań na renderowanie komponentów (rezygnacja z

cieni, gradientów, animacji)● cały layout responsywny (by default)● graficzne elementy (czcionki) zamienione na Web Fonts i CSS

Wsparcie przeglądarek● od wersji 3 - porzucono (oficjalne) wsparcie dla IE7● IE8 - brak kilku elementów: border-radius, box-shadow, transition,

transform, placeholder (ale Modernizr lub HTML5shiv)● IE9 - z wykorzystaniem prefixów -ms-● oficjalnie - wszystkie najnowsze wersje popularnych przeglądarek● nieoficjalnie - także IE7 i wszystkie Linuxowe wersje open source

przeglądarek

http://getbootstrap.com/getting-started/#browsers

Komponenty HTML / CSS● ikony● menu (w tym rozwijane)● przyciski (+ możliwość łączenia w grupy)● komponenty formularzy● nawigacja (+ breadcrumb)● paginacja● opisy● alerty● nagłówki● listy● panele

… i wiele wiele więcej

Komponenty JavaScript● efekty przejść● okienka na warstwie (modal)● menu (dropdown)● scrollspy (podążanie za scrollem w menu)● affix (statyczne elementy, które podążają wraz ze scrollem)● taby● podpowiedzi (tooltip)● zwijana treść (collapse, dawniej accordion)● slider (carousel)

… i wiele wiele więcej

NarzędziaBudowa szablonu WYSIWYG:● http://shoelace.io● http://www.layoutit.com/build● http://www.bootstrapdesigner.com● https://jetstrap.com● http://www.divshot.com

Zmiana kolorów / czcionek (LESS):● http://getbootstrap.com/customize● http://www.bootstrapthemeroller.com● http://stylebootstrap.info● http://pikock.github.io/bootstrap-magic (AngularJS)

http://mashable.com/2013/10/20/bootstrap-editors

Repozytoria szablonówPolecam: https://wrapbootstrap.com● http://themeforest.net● http://bootstrapstyler.com● http://designmodo.com/flat

Darmowe:● http://bootswatch.com● http://startbootstrap.com/all-templates● http://getbootstrap.com/getting-started/#examples

jQuery UI BootstrapjQuery UI w stylach Twitter Bootstrap● http://addyosmani.github.io/jquery-ui-bootstrap

Odpowiednik AngularJS (Angular UI)● http://angular-ui.github.io

Use cases / snippets● http://www.lovebootstrap.com● https://bootsnipp.com

● http://alefeuvre.github.io/foundation-grid-displayer

AlternatywyFoundation (ZURB) - http://foundation.zurb.comPure (by Yahoo) - http://purecss.ioFlat UI - http://designmodo.github.io/Flat-UIGumby - http://gumbyframework.comSkeleton - http://www.getskeleton.com960 - http://960.gsInK - http://ink.sapo.ptBlueprint - http://blueprintcss.org

http://responsive.vermilion.com/compare.php

https://medium.com/frontend-and-beyond/8b3812c7007c

http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/