Schrödinger's Website

Transcription

1 Schrödinger's Website or: How we built websites of indeterminate design for Adobe Portfolio a talk by Jackie Balzer (@jackiebackwards)

2

3 Web Development Life Cycle

4

5

6

7

8 Adobe Portfolio

9

10

11

12

13

14

15

16

17

18

19

20 Challenges Customizations viewed in the editor must be 100% representative of the final product (WYSIWYG) Every Thing* must be user-customizable * minus the specifics of the responsive layout Responsive styles must look good for infinitepossible customizations

21 Tenets DRY Reusable Human written Responsive layout should retain the spirit of the user s customizations

22 WYSIWYG Challenges: Markup The markup you see for your site inside the editor should be the same markup you see on your final published website

23

24 WYSIWYG Challenges: CSS The styles you see for your site inside the editor should be the result of the same CSS you see on your final published website

25 1 "header": { 2 "align": "center", 3 "color": "#222", 4 "font": { 5 "family": "ftnk", 6 "size": 30, 7 "lineheight": 30 8 }, 9 "fontstyle": { 10 "bold": "700", 11 "italic": "normal", 12 "underline": null, 13 "strikethrough": null, 14 "uppercase": "uppercase" 15 }, 16 "padding": { 17 "bottom": 0, 18 "left": 0, 19 "right": 0, 20 "top": 0 21 } 22 }

26 1 $header: ( 2 align: center, 3 color: #222, 4 font: ( 5 family: ftnk, 6 size: 30, 7 lineheight: 30 8 ), 9 fontstyle: ( 10 bold: 700, 11 italic: normal, 12 underline: null, 13 strikethrough: null, 14 uppercase: uppercase 15 ), 16 padding: ( 17 bottom: 0, 18 left: 0, 19 right: 0, 20 top: 0 21 ) 22 );

27 1.header { 2 text-align: map-get($header, align); 3 color: map-get($header, color); 4 font-family: map-get($header, font?); // does not traverse 5 }

28 map-me($map, $keys) { 2 $key in $keys { 4 map-has-key($map, $key) { 6 $map: map-get($map, $key); 7 } { 'key "#{$key}" is missing from map'; 10 } } // each key in keys 13 $map; } map-me

29 1.header { 2 color: map-me($header, color); 3 font-family: map-me($header, font family); 4 font-size: map-me($header, font size); 5 font-style: map-me($header, fontstyle italic); 6 font-weight: map-me($header, fontstyle bold); 7 text-align: map-me($header, align); 8 text-decoration: map-me($header, fontstyle underline) map-me($header, fontstyle strikethrough); 9 line-height: map-me($header, font lineheight); 10 text-transform: map-me($header, fontstyle uppercase); 11 padding-top: map-me($header, padding top); 12 padding-bottom: map-me($header, padding bottom); 13 padding-left: map-me($header, padding left); 14 padding-right: map-me($header, padding right); 15 }

30 1.header { 2 color: #222; 3 font-family: ftnk; 4 font-size: 30px; 5 font-style: normal; 6 font-weight: bold; 7 text-align: center; 8 text-decoration: underline; 9 line-height: 30px; 10 text-transform: uppercase; 11 padding-top: 0; 12 padding-bottom: 0; 13 padding-left: 0; 14 padding-right: 0; 15 }

31

32

33

34 1.grid-item:nth-child(var(--number-columns)n+1) { 2 clear: left; 3 }

35 1.grid-item:nth-child(#{map-me($grid, per-row)}n+1) { 2 clear: left; 3 }

36 1.top-arrow { 2 background: rgba(map-me($arrow, color), map-me($arrow, opacity)); 3 }

37

38 Responsive Development Many responsive adjustments can be phrased in the form of if then Easily modeled using control logic in Sass

39 Responsive Challenges: Layout Responsive navigation behind a menu

40 1 // Template default variables 2 $small-breakpoint: 0 540px!global; 3 $medium-breakpoint: 0 768px!global;

41 breakpoint($medium-breakpoint) { 2 3 nav { 4 display: none; 5 } 6 7.hamburger { 8 display: block; 9 } }

42

43 responsive-nav { 2 3 nav { 4 display: none; 5 } 6 7.hamburger { 8 display: block; 9 } }

44 1 $theme-features: ( 2 top-header: true, 3 cover-meta-overlay: true, 4 small-responsive-nav-menu: true 5 );

45 1 $menu-breakpoint: $medium-breakpoint; map-get($theme-features, small-responsive-nav-menu) == true { 3 $menu-breakpoint: $small-breakpoint; 4 } 5 breakpoint($menu-breakpoint) { repsonsive-nav; 8 }

46 Responsive Challenges: Layout Responsive navigation behind a menu Number of columns for grid layouts

47 breakpoint($medium-breakpoint) { 2 map-me($gallery, columns) > 3 { 4 5 // css for two-column layout 6 7 } 8 9 } // $medium-breakpoint 10 breakpoint($small-breakpoint) { 12 map-me($gallery, columns) > 1 { // css for 1-column layout } } // $small-breakpoint

48 Responsive Challenges: Layout Responsive navigation behind a menu Number of columns for grid layouts Smaller images should load on smaller screens

49 1 <picture> 2 <source srcset="{{images.full}}" media="{{breakpoints.full}}"> 3 <source srcset="{{images.medium}}" media="{{breakpoints.medium}}"> 4 <source srcset="{{images.small}}" media="{{breakpoints.small}}"> 5 <img src="{{images.medium}}"> 6 </picture> 1 { 2 "images": { 3 "full": "//path/to/fullsize", 4 "medium": "//path/to/medium-size", 5 "small": "//path/to/small-size" 6 }, 7 "breakpoints": { 8 "full": "min-width: 769px", 9 "medium": "max-width: 768px", 10 "small": "max-width: 540px" 11 } 12 }

50

51

52 Responsive Challenges: Vertical Rhythm Spacing scales down on smaller devices Font sizes scale accordingly on smaller devices Blocks of information often rely on relative font sizes (lock up)

53

54 Establish rules Widths, horizontal margins should always be measured in % Font sizes should never go below 14 px Bigger numbers should decrease more drastically than smaller numbers

55 2016 Project Date font-size: 18px line-height: 18px Project Title Project Title font-size: 60px line-height: 64px Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis Project Description font-size: 22px line-height: 28px nostrud exerci tati... Custom Field Creative Direction, UX Design, Web Design Additional Fields font-size: 14px line-height: 18px

56 2016 Project Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tati... Custom Field Creative Direction, UX Design, Web Design

57 2016 Project Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tati... Custom Field Creative Direction, UX Design, Web Design

58

59 within-range($item, $min, $max) { 2 $floor: 10; 3 $ceil: 100; round(((($max - $min)*($item - $floor))/($ceil - $floor))+$min); 5 }

60 breakpoint($medium-breakpoint) { 2 3.project-title { 4 font-size: within-range(map-me($logo, font-size), 14px, 60px); 5 } 6 7 } 8 breakpoint($small-breakpoint) { project-title { 12 font-size: within-range(map-me($logo, font-size), 14px, 45px); 13 } }

61 THE FUTURE Optimize scaling formula Optimize output to reduce duplicate values Intelligent breakpoint detection One CSS generator to rule them all

62 Ned Bread Thanks! Adobe Portfolio: myportfolio.com