In the name of God

Seyed Naser Hasani

TEHRN RESPONSIVE WEB DESIGN CONFERENCE

#RWDCONF94

A Long Time Ago in a Galaxy Far, Far Away… 

There is millions of frameworks...

SUPER RESPONSIVE

Design and Delivering

Resilient, Accessible, Faster, Smaller

Websites

everything is about money

for make it, we need..

USERS!

are nagging and grumpy

that they want:

FREE detailed CONTENT as soon as possible.

but

USER IS KING

CUSTOMER IS ALWAYS RIGHT

NOT in IRAN

but

for these

6,829 KB   ≈   7 MB

2,560 rial

ENEMIES

website

device viewport size

unlimited

Distinct devices

(11,868 the year before)

18,796

ANDROID viewport sizes overlaid

NETWORK

poor connections

rich latency

IRAN 

connection speed among 200 countries  (2015,  March-April)

  • ADSL
    • Download:  147 th   (after Iraq and Bhutan)
    • Upload:  128 th  (after Iraq and  Bhutan)
  • Mobile
    • Download:  198 th  (after Bosnia and Palestine )
    • Upload: 96 th (after Morocco and Nigeria)

Price: 46 th 

D&D

lazy

WEB Designer and Developer

D&D

Loves:

  • Large ASSETS :

    • 500KB hero picture, even on mobile!

    • use jQuery for one DOM modification!!

    • use jQuery-UI for ???

    • use Bootstrap for grid!

    • use 3 different web-font in one page!

    • use font-awesome for only 4 icon! 

  • Many  REQUEST
    • each script, styleSheets and even tiny png icon, deserve one file!

Design Systems

We’re not designing pages, we’re designing systems of components.

 

— Stephen Hay

designing systems

Mobile is everywhere

in 2016

RWD !== Option

Responsive Considerations

  • Components
    • Flexible grid
    • Typography
    • Navigation
    • Accessible form controls
    • Carousels
    • Tabbed navigation
    • Responsive tables
    • Accordions Media lists
    • Drop-downs
    • Pagination Data tables
    • Buttons
    • Icons
  • Strategy

    • Responsive images
    • Responsive typography
    • Accessibility architecture
    • Legacy browser support
    • i18n/l10n tolerance
    • Performance budget
    • Interaction/Animations
    • Responsive advertising 
  • Layouts

    • Homepage layout

    • Subpage layout

    • Article index layout

    • Article layout Product

    • index layout Product

    • detail layout Sign up

    • flow Checkout flow 

is will be a book by Brad Frost.

Atomic Design

Atoms

Molecules

Organisms

Templates

Pages

Atoms

Molecules

Organisms

Templates

Page

never done

a website is

STYLE GUIDE

we have need

for

  • You’ll have an easy guide to refer to when handing over the project.
  • You maintain control of the design. When someone does something awful, you can refer them to the document.
  • You avoid cheapening the design, message and branding.
  • Makes you look professional. They’ll know you did everything for a reason

workflow

RESPONSIVE

The design process is weird and complicated because it involves people and organisations, which often are weird and complicated."

 

— Mark Boulton

Linear Workflow

Design

Front-end

Back-end

LAUNCH

throw in some content

think about user

Linear Workflow

Content

Design

Back-end

LAUNCH

slightly better

UX

Front-end

RWD

Build smaller, tactical teams that are capable of executing multiple rounds of planning, design, and code quickly and independently."

 

— Trent Walton

Responsive Workflow 

Instead of dividing teams into skill sets,

build complementary teams , focused on small tasks.

Each small team tasks:

  1. A project starts with building “ all-round”-teams;
  2. Think mobile first = commitment to the content,
  3. Produce style tiles, first modules in Photoshop,
  4. Build prototypes in the browser ASAP,
  5. Atoms first; modules, organisms later,
  6. Collaboration as “in-browser design pairing”.
  7. Clients sign off new deliverable:
  • Style guides and prototypes,
  • Core content/functionality priority lists,
  • Performance and UX budgets,
  • Legacy browser support,
  • Responsive images strategy.

designer

<designer>we love you</designer>










 for( var i = 0; i <= designerLoves.length; i++ )

	if( designerLoves[i] === 'code' )

		console.log('WE LOVE DESIGNER')

responsive

please reading more about

abookapart.com

and do more more

SKETCHES

RESPONSIVE WEB DESIGN is

  • A Flexible Grid (Fluid: % + Min Widths)

  • Flexible Media (Images, Video)

    • ​img { max­‐width: 100% }

    • FitVids.js

  • (Not Just) Media Queries

    • @media (min­‐width: 20em) { /* CSS goes here */ }

RWD 

Media Query

!==

The way in which CSS media
queries
have been promoted for
mobile hides tough problems and
gives developers a false promise
of a simple solution
for designing
for small screens .


- Jason Grigsby, @grigs

LET’S ADD AN IPHONE BREAKPOINT

LET’S ADD AN

iPAD

BREAKPOINT

Get to a point with your web
strategy where you don't crap your
pants every time Apple has a
keynote.

@brad_frost

ADAPTIVE

WEB DESIGN

responsive roots

the web has

Delivering the goods

Who really wants to wait while they are waiting?

— Mike krieger

2014

2015

63.5

33.15

3.65

73.16

23.69

3.15

Platform Comparison (IRAN)

Desktop

Mobile

Tablet

2,219KB

The average weight of a web page (Sep 1 2015)

images

js

video

font

css

80.5 %

1,421 KB

368 KB

177 KB

116 KB

74 KB

52 KB

72 %

RWD sites whose small screen design weighs the same as the large screen design.

71%

Users expect your mobile site to load as quickly as your desktop site.

Smaller

website

images

images don't block

Doesn’t mean they get a free pass

because

1,421 KB

images are large

of each web page!

Taxonomy of Images

  1. CSS Background Images
  2. HTML <img>
    • Responsive Images

downloading images 

Downloading Images

1. <img> hidden in CSS

<style>
  @media all and (max-width: 600px) {
    #test1 { display:none; }
  }
</style>


<div id="test1">
  <img src="images/test1.png" />
</div>

NOPE

Downloading Images

2. Background Image Display None

<style>
  #test2 {
    background-image:url('images/test2.png');
    width:200px;
    height:75px;
  }
  @media all and (max-width: 600px) {
    #test2 {display:none;}
  }
</style>


<div id="test2"></div>

NOPE

Downloading Images

3. Background Image, Parent Object Set to Display None

<style>
#test3 div {
    background-image:url('images/test3.png');
    width:200px;
    height:75px;
}
@media all and (max-width: 600px) {
    #test3 { display:none; }
}
</style>


<div id="test3">
    <div></div>
</div>

OK

Downloading Images

4. Background Image Where Desktop Image Set with Min-Width

<style>
@media all and (min-width: 601px) {
  #test5 {
    background-image:url('images/test5-desktop.png');
    width:200px;
    height:75px;
  }
}
@media all and (max-width: 600px) {
  #test5 {
    background-image:url('images/test5-mobile.png');
    width:200px;
    height:75px;
  }
}
</style>


<div id="test5"></div>

OK

images downloading

Recommendations

  • For hide a content image, display:none isn't working.
    • Using a Javascript or server-side based approach instead
  • For hide a background image, hide the parent element.
    • If you can’t do that, then use a cascade override (like test four)

make them responsive

Don’t just optimize images

Allows authors to define various image resources and "hints" that assist a user agent to determine the most appropriate image source to display (e.g. high-resolution displays, small monitors, etc).

Srcset attribute - CR

A responsive images method to control which image resource a user agent presents to a user, based on resolution, media query and/or support for a particular image format

Picture element - CR

picturefill

polyfill

image standards

<img  src="small.jpg" srcset="sml.jpg 300w, lrg.jpg 800w" size="100vw">

<picture> 
   
   <source srcset="large.jpg" media=" (minwidth: 800px) "> 
   
   <source srcset="medium.jpg" media=" (minwidth: 400px) ">
   
   <img src="small.jpg" alt="rwd conf">

</picture>

Available now:

Faster

website

Font Loading

asynchronously

FOIT

Flash of Invisible Text

CSS Font Loading

This CSS module defines a scripting interface to font faces in CSS, allowing font faces to be easily created and loaded from script. It also provides methods to track the loading status of an individual font, or of all the fonts on an entire page.

CSS Font Loading - CR

<script>

  document.fonts.ready().then(function() {

    document.documentElement.setAttribute( "class", "fonts-ready" );

  });

</script>

<style>
    p {
        font-family: sans-serif;
    }
    .fonts-ready p {
        font-family: iran-sans;
    }
</style>

Enabling Font Loading 

fontfaceobserver

polyfill

<!--#if expr="$HTTP_COOKIE=/fonts\-loaded\=true/" -->
<html lang="fa" dir="rtl" class="fonts-loaded">
<!--#else -->
<html lang="fa" dir="rtl">
<!--#endif -->

<head>
    <style>
    body { font-family: sans-serif; }
    
    .fonts-loaded body { font-family: "iran-sans-light", sans-serif; }
    </style>
    
    <script>
      (function( w ){

        if( w.document.documentElement.className.indexOf( "fonts-loaded" ) > -1 ) return
    
        new w.FontFaceObserver( "iran-sans-light" )
          .check('ایران')
          .then( function(){
              w.document.documentElement.className += " fonts-loaded"
          });

      }( this ));
    </script>
</head>

Enabling fonts once loaded

javascript

javascript can block

With scripts, progressive rendering is
blocked for all content below the script.

javascript that Doesn’t block

<script	src></script>	

</body>

javascript that Doesn’t block

<head>

  <!--  Downloads right away  -->
  <script src async></script>

  <!--  Waits to  download  -->
  <script src defer></script>

javascript that Doesn’t block

var script     = document.createElement("script");

script.type    = "text/javascript";

script.src     = "foo.js";

script.async   = "";

var ref        = document.getElementsByTagName('script')[0];

ref.parentNode.insertBefore(script, ref);

CSS

stylesheets block

  • Browsers (except Opera) block rendering until all screen CSS arrives. With the worst possible experience: white page.
  • Browsers download CSS they don't need, e.g. print, tv, device-ratio... And most browsers (except Opera and Webkit)

CSS downloading

Solutions

  • CSS is sacred. Choose minimal when possible.
  • Separate <link> elements for each breakpoint
    • Doesn’t scale.
    • Good for WebKit, what about everything else
  • Separate out and inline your Critical CSS.

tOOls

performance measuring

Before you marry a person
you should first make them
use a computer with slow
Internet to see who they
really are.

THANK YOU!

TEHRN RESPONSIVE WEB DESIGN CONFERENCE

#RWDCONF94

SUPER RWD [rwdconf94]

By Naser Hassani

SUPER RWD [rwdconf94]

  • 739

More from Naser Hassani