Slide 1

Slide 1 text

RESPONSIVE WEB DESIGN S M L XL with Django, Compass, and the Less Famework

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

http://ic.kr/p/dwY5M RAISE YOUR HANDS IF…

Slide 4

Slide 4 text

the WHY the HOW

Slide 5

Slide 5 text

http://j.mp/responsive-ALA

Slide 6

Slide 6 text

http://ic.kr/p/89Utsr

Slide 7

Slide 7 text

http://ic.kr/p/8w5ULb

Slide 8

Slide 8 text

NOW YOU HAVE TWO PROBLEMS.

Slide 9

Slide 9 text

NOW YOU HAVE THREE PROBLEMS.

Slide 10

Slide 10 text

NOW YOU HAVE FIVE PROBLEMS?

Slide 11

Slide 11 text

NOW YOU HAVE MORE TARGETS.

Slide 12

Slide 12 text

http://ic.kr/p/6iLEF DESKTOP?

Slide 13

Slide 13 text

http://ic.kr/p/6iLEF DESKTOP?

Slide 14

Slide 14 text

BEST VIEWED AT…

Slide 15

Slide 15 text

FIXED LAYOUTS 960px 1024px 1600px 960px

Slide 16

Slide 16 text

FLUID LAYOUTS 90% 920px 1024px 90% 1440px 1600px

Slide 17

Slide 17 text

LARGE Screen Size SMALL

Slide 18

Slide 18 text

FIXED PARTIAL CONTENT FIXED OR FLUID

Slide 19

Slide 19 text

OK OK FAIL FAIL WHY?

Slide 20

Slide 20 text

CONTINUOUS SPECTRUM LARGE Screen Size SMALL

Slide 21

Slide 21 text

CONTINUOUS SPECTRUM

Slide 22

Slide 22 text

CSS3 MEDIA QUERIES http://www.w3.org/TR/css3-mediaqueries/

Slide 23

Slide 23 text

IPHONE @media only screen and (max-width: 767px) { … } LANDSCAPE IPHONE @media only screen and (min-width: 480px) and (max-width: 767px) { … } IPAD @media only screen and (min-width: 768px) and (max-width: 1023px) { … }

Slide 24

Slide 24 text

WELL, IE9 IS OK

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

PROGRESSIVE ENHANCEMENT DEFAULT CSS @MEDIA @MEDIA @MEDIA IE <9.0

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

WHAT RESPONDS? Typogaphy (typeface, size, leading) Layout (margins, padding, loats) Paint (background images, colors) … basically, style.

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

http://mediaqueri.es iPhone iPad desktop w idescreen

Slide 35

Slide 35 text

WHAT DOESN’T?

Slide 36

Slide 36 text

LARGE DATA http://ic.kr/p/354RJ2

Slide 37

Slide 37 text

RESPONSIVE* * not a utopia

Slide 38

Slide 38 text

“RESPONSIVE” DOES NOT SOLVE CONTENT ISSUES

Slide 39

Slide 39 text

“RESPONSIVE” DOES NOT SOLVE USABILITY ISSUES

Slide 40

Slide 40 text

“RESPONSIVE” DOES NOT SOLVE CREATES NEW ISSUES

Slide 41

Slide 41 text

“RESPONSIVE” IS JUST MODERN WEB DESIGN

Slide 42

Slide 42 text

http://ic.kr/p/FNeQW

Slide 43

Slide 43 text

YOU ROLL YOUR OWN For science. You masochist.

Slide 44

Slide 44 text

http://compass-style.org http://sass-lang.com Sass.

Slide 45

Slide 45 text

@impot "compass/reset"; @impot "compass/css3/tansition"; @impot "compass/utilities/geneal/cleafix"; @impot "compass/layout/grid-background"; @impot "compass/utilities/color/contast"; @impot "compass/css3/border-adius"; @impot "compass/css3/images"; @impot "patials/base"; @impot "less/famework"; @impot "patials/more"; @impot "patials/exams/pygmentstheme"; @impot "patials/exams/global"; @impot "patials/exams/default"; @impot "patials/exams/tablet"; @impot "patials/exams/mobile"; @impot "patials/exams/wide-mobile";

Slide 46

Slide 46 text

from css impot reset, shotcuts from thirdpaty_app impot some_utilities from my_app impot desktop, tablet, mobile

Slide 47

Slide 47 text

I WILL NEVER (wilingly) DEVELOP WITHOUT COMPASS AGAIN YES, IT’S THAT GOOD , EVER

Slide 48

Slide 48 text

SIGH, RUBY. expot GEM_HOME="$VIRTUAL_ENV/gems" expot GEM_PATH="" Stick this in vitualenv’s postactivate script. Now go PayPal @carljm some beer money.

Slide 49

Slide 49 text

$ gem install compass

Slide 50

Slide 50 text

$ gem install compass-less-plugin http://lessfamework.com https://github.com/wilhw/compass-less-plugin

Slide 51

Slide 51 text

10 8

Slide 52

Slide 52 text

5 3

Slide 53

Slide 53 text

MORE IS LESS https://gist.github.com/1009952 Inspired by 960 and Susy

Slide 54

Slide 54 text

COMPILED CSS How does I manage it? → GHETTO STUPID WAY → SHINY FUTURE WAY

Slide 55

Slide 55 text

PROJECT /app1 /app2 settings.py /static ← in STATICFILES_DIRS /img /js /css /static_root ← STATIC_ROOT

Slide 56

Slide 56 text

$ compass create -r less foo --using less $ mv foo/sass sass $ mv foo/config.rb . $ rm -f foo

Slide 57

Slide 57 text

/app1 /app2 settings.py config.rb /sass screen.scss ← @impots the patias /patials _base.scss _global.scss _default.scss _mobile.scss /static /img /js /css screen.css ← geneated by compass

Slide 58

Slide 58 text

SHINY FUTURE WAY? django-compressor

Slide 59

Slide 59 text

{% load compress %} {% compress css %} {% endcompress %} COMPRESS_CSS_FILTERS = [ 'compressor.filters.compass.CompassFilter', ] settings.py template.html

Slide 60

Slide 60 text

high-px-atio wide-mobile mobile tablet default global

Slide 61

Slide 61 text

high-px-atio wide-mobile mobile tablet default global

Slide 62

Slide 62 text

3 5 8 10 mobile wide mobile tablet desktop https://github.com/idangazit/wd_example

Slide 63

Slide 63 text

How are you gentlemen?

...
...
...
...

Slide 64

Slide 64 text

How are you gentlemen?

...
...
...
...

Slide 65

Slide 65 text

How are you gentlemen?

...
...
...
...

Slide 66

Slide 66 text

header>h1 { // global masthead styling } .even, .odd { font-family: Georgia, Times, serif; margin-bottom: 4.0em; h1 { padding: 10px; font-size: 1.75em; color: #FBED64; } p { padding: 10px; line-height: 1.3em; color: rgba(255,255,255,0.75); } } _global.scss

Slide 67

Slide 67 text

#{$less-grid-element} { @include grid(10); @include less-grid-background(10); } header>h1 { font-size: 6.0em; margin-bottom: 0.5em; margin-top: 0.5em; } .even, .odd { @include columns(5); } .even { @include omega; } _default.scss

Slide 68

Slide 68 text

@media only screen and (max-width: 767px) { #{$less-grid-element} { @include grid(3); @include less-grid-background(3); } header>h1 { font-size: 4.0em; margin-bottom: 0.3em; margin-top: 0.3em; } .even, .odd { @include columns(3); margin-bottom: 1.0em; @include omega; } } _mobile.scss

Slide 69

Slide 69 text

3 5 8 8 mobile wide mobile tablet desktop https://github.com/idangazit/wd_example

Slide 70

Slide 70 text

RESPONSIVE* * It’s a cool technique

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

?

Slide 73

Slide 73 text

MOBILE RESPONSIVE

Slide 74

Slide 74 text

IGNORE THE HYPE Be aware of this technique I think it’s the quiet future of web design

Slide 75

Slide 75 text

KTHXBAI! Idan Gazit → @idangazit ig