DevMeetings: Responsive Web Design [Relacja Live] | Piotr Kowalski

Dziś DevMeetings zawitał do stolicy! Temat: Responsive Web Design

Miejsce: Golden Floor Sky al. Jerozolimskie 123A (26 piętro), Warszawa
Prowadzący: Hubert Burdach z Front-Stream - responsivehero.com/
Skład: 30 osób (w tym 4 damy)

Responsive Web Design - temat bardzo 'na czasie'. Każda szanująca się firma o profilu webdeveloperskim posiada responsywne portfolio.

Przykłady:

Przykłady innych stron:

9:00

Rozpoczęcie szkolenia! Po 2 latach przerwy 😄

9:07

prezentacja IT Crowd - Krzysztof Miksa
- founded in 2011
- 7 developers
- 50% remote workers
- web applications
- Back-end systems
- enterprise systems
- messaging solutions
- cloud computing
- business process management
- big data
- ERP
- Java

9:26

styletiles.html - wszystkie możliwe komponenty prosto od designera, dla klienta, aby nie wysyłać *.psd'ków

9:28

zaczynamy przygodę z RWD!

9:34

jednostki: px, %, em, rem
em - względem kontenera w którym się znajdują
rem - względem korzenia (>html<)
target / context * 100 - pixele na procenty

9:38

rem - nie możemy używać poniżej IE8

9:41

Firefox - opcja "Powiększ tylko tekst" - różnica pomiędzy px i em

9:43

co to jest BEM? Block Element Modifier - http://bem.info/method/
długie nazwy CSS Class

wydzielamy:

bloki np. box
elementy - np. box__element
modyfikatory - np. box box--wide

<!-- BLOCK -->

<div class="box"></div>

<!-- ELEMENT -->

<div class="box">
    <div class="box__element"></div>
</div>

<!-- MODIFIER -->

<div class="box box--wide">
    <div class="box__element"></div>
</div>

9:46

nie zwiększamy specifity selectora, rozwiązaniem jest BEM!

.username {
    background: red;
}

.login-box .status .username {
    background: green;
}

9:50

LESS, SASS, Compass - http://css-tricks.com/sass-vs-less/
SASS - placeholdery, są kompilowane w momencie kiedy są one potrzebne - prawdopodobnie nowy temat DevMeetingu!

10:00

pierwsze zadanie - konwersja pixele na remy i emy

10:20

Media Queries - kolejne zadanko

10:22

Reflector - narzędzie do duplikowania ekranu

10:24

ustawienie viewport

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

iPad & iPhone domyślnie ma 981px
operator not tylko przed media types (np. screen, print, all, projectos)
media queries features np. min-width, max, width

można definiować media type przy tagu

<link rel="stylesheet" type="text/css" href="02_mq_03.css" media="screen and (min-width:600px)">

zawsze pobierze plik - każda przeglądarka

10:36

media type only - przeglądarki, które nie rozumieją media queries, zapis umowny, może być "xxx"
```
@media only screen, (min-width: 960px) {
    body { background: red; }
}
```
czy pisać media queries w pikselach? przy resize'owaniu font'a ma to znaczenie, gdy mamy zdefiniowany media queries w em'ach
co jest browser nie wspiera? Z pomocą respond
CSS3 w arkuszach dla IE6 selectivizr

10:43

wykrywanie w JS czy browser wspiera media queries?
```
window.matchMedia("(min-width: 768px)").matches
```
eCSSential - dołączanie plików css tylko dla konkretnych warunków, reszta plików jest ściągana asynchronicznie

10:50

quickconcat - ściąganie jednego pliku *.php który będzie miał zawartość innych plików

10:55

przerwa... uff, pora na ciasteczko 😄

11:20

zadanie z media queries - dodanie zachowania dla 960px

11:39

pierwszy! - prezentuję swoją przeróbkę przed grupą najlepszych developerów

11:42

Mobile First / Mobile Last (Desktop First)

11:44

każdy chwali się swoim doświadczeniem
przekrój developerów jest ogromny, są i programiści Javy, Ruby (Rails) oraz typowi Front-end-owcy i designerzy
doświadczenie niektórych jest bardzo duże, swoje

11:59

patterny do nawigacji
- of canvas pattern - menu wyjeżdża z lewej strony
- zamiast menu zastąpienie go <select>'em
- footer navigation - nawigacja na dole strony (link na górze przenosi nas niżej)
- hamburger pattern
- do nothing approach

12:03

trzecie zadanko - menu "of canvas pattern"

12:36

pierwszy - kolejny raz 😄
prezentuje swoje mini dzieło całej grupie
nie robi to piorunującego wrażenia ale zadanie zrealizowane!

12:43

coffee break! ... pora na ciasteczko!

13:00

po przerwie wracamy!
content first - nigdy nie robimy na urządzenie
pomocne narzędzie uxpin.com
www.i-sklep.pl/rwdlist.html - przykład: siglo.pl

13:10

grid systemy:

13:17

pizza time - wszyscy szybko pobiegli za jedzeniem... biegnę i ja, jednak tylko na ciasteczka 😄

13:50

po przerwie! jedziemy dalej
problem: zaokrąglanie wartości do dołu w safari
solutions:
- marginesy negatywne,
- foundation: block grid
- barrelny.com/blog/text-align-justify-and-rwd/
- susy.oddbird.net
- flexbox

14:10

prezentacja nt. flexbox'a otwiera mi szeroko oczy na projektowanie interfejsu
```
.flex {
    display: flex;
    flex-direction:row;
}
```

14:25

czwarte zadanie - responsywny slider

14:35

jak zrobić responsywne obrazki?

<img src="http://placebear.com/200/300" alt="" />

img { max-width: 100% }

ale co jeśli obrazek ma określone wymiary?

<img src="http://placebear.com/200/300" alt="" width="200" height="300" />

img { max-width: 100%; height: auto; }

14:51

prosty temat (responsywny slider) ale jednak mnie przerósł 😄
wierzę, że po zakończeniu warsztatów zasiądę do projektu kolejny raz ale produkt będzie spełniał oczekiwania!
ciekawe kto zaprezentuje swoje dzieło? może jakaś pani?

15:01

przykład z iosSlider
translate3d korzysta z akceleracji sprzętowej, przerzuca proces z CPU na GPU
ale nie robimy z * translate3d
Safari ma w sobie remote debugger, gdy urządzenie Apple jest podłączone
ghost lab
wayne dalton remote control
www.browserstack.com
prosta biblioteka do rozwiązać hammer.js

15:20

jeśli jest powyżej 15-20 to musimy wyłączyć kosztowne efekty wizualne
- Show paint rectangles
- Force accelerated compositing / Enable continuous page repainting

badanie performance DevTools

.box {
    position: fixed; /* ciężkie dla przeglądarek */
    -webkit-transform: translateZ(0); /* solucja */
}

przeglądarka pobiera obrazek kiedy potrzebuje, np. media queries to stwierdzają
display: none; pobiera zawsze obrazki
background-image: -webkit...
picturefill.js polyffil dla tagu >picture<
działa tylko w nightly Google Chrome:
```
<img srcset="" alt="" />
```
css-tricks.com/foresight-js/
font-family i content - możemy przekazać dowolny string
resrc.it/
mobify.com/mobifyjs/ - proces capturingu
ress.io/
github.com/adamdbradley/focal-point

15:41

lekkie zmęczenie materiału
resizowanie tła: background-size: (cover, auto 100%, 100% auto, 100% 100%)

15:44

padding-bottom - szerokość / wysokość * 100 px
obliczanie po stronie serwera
appelsiini.net/projects/lazyload
nie trafimy linii czytania na mobile
nie mamy repaint & reflow

15:46

przerwa na wodę 😄

16:01

ostatnia część
-webkit-overflow-scrolling: touch;
-webkit-column-count: 3;
-webkit column-style: 1px solid red;
pomiędzy 45 a 75 jest najlepsze do czytania oraz do 10 słów
przydatne narzędzie: http://nerd.vasilis.nl/code/measure-help/

zmiana układu strony dla różnych języków:

:lang(de) div {
    -webkit-count-column: 2;
}

nowa dyrektywa:

.par {
    font: -applce-system-body; /* domyślna czcionka w iOS7 */
}

w iOS7 wprowadzono dynamiczne fonty, jeśli w ustawieniach urządzenia zmienimy rozmiar będzie to aktywne na wszystkich stronach z poprzednią dyrektywą
icomoon.io/

nowy iOS wprowadza "ulepszenia":

.foo {
    -webkit-font-smoothing- antialiased;
    -moz-osx-font-smoothing- grayscale; /* OS X domyślnie pogrubia niektóre elementy elementy */
}

text-rendering: optimizeLegibility
l20n.org/
Network Link Conditioner - spowolnienie łącza na macOS
ładowanie fontów - WebFontConfig

16:37

pattern dla przeglądania tabelek:
thead, tbody, tfooter - display: block
tbody - overflow: scroll

16:42

skalowanie materiałów wideo - fitvidsjs.com
wykrywanie feature-rów: modernizr, has.js

konfiguracja r.js:

...
has: {
    "audio-mp3": true // dołącza tylko te warunki, które są spełniane
}
...

17:00 - Koniec szkolenia

To było niesamowite, znowu poczuć się na warsztatach DevMeetings, choć nie było niestety, autora tego zamieszania Piotra Zwolińskiego, ani żadnego baneru reklamowego DevMeetings.

Dziękuję serdecznie, za mocne przygotowanie teoretyczne oraz praktyczne.

PS. Na dodatek ten certyfikat robi wrażenie: