Front end techniques and tips

So, I recently went to the smashing mag workshop in London, which was great. Here’s a big brain-dump of stuff I learnt. I’m not saying I agree with everything, but here it is.

smashing mag workshop

atomic design

  • start v.small
  • buttons, labels (atoms) (be explicit about variants, states, types)
  • combine atoms to create molecules (search box)
  • combine to create organisms (header), templates (wireframes), pages

at the beginning, don't consider the page, only its discrete elements

  • design in text editor first
    • helps to formulate the goals of project
    • use markdown to define different components
    • even micro-interactions (lighbox interactions)
  • create a visual inventory
    • show screenshots of existing design techniques to client with variants
  • pick an important page to prototype first (not necessarily the home page)
    • design key components
    • one mock-up with all key components on (roughly desktop size)
    • design responsive behaviour of components, sketch out a table with breakpoints, components on left, breakpoints with the description on right

wireframes just on paper, talking with the client, no more than 2 views per page.

content editable property on body contenteditable="true" – allows users to live update html and screen print

  • use of kss or styledocco

rizzo – dynamic pattern library

  • uses an api to call the latest bits of a styleguide

redesign

  • take design inventory, list out all the components, look for similarities and decide where things can be combined
  • [pagelayers](http://www.pagelayers.com/)
    • allows prototypes to be saved as photoshop files for editing

design

  • large photoshop file 5k x 5k to design components on

responsive nav

  • 14kb magic number (this is the maximum size required to establish connection with a mobile tower. If all content can be sent in this first 14kb, the user will be able to see and potentially interact with content very quickly)
  • nav is used by a lot of people to understand what the site is about

    • this is an interesting one. The difficulty with hiding everything behind a hamburger is that it makes it less clear what the site is about and therefore establishes less trust with the user.
  • wwf website

    • used nav priority to show navigation items on smaller screens
  • small screen height is a better indication of mobile device
    • vertical media queries to target height, showing a ‘more’ link on even smaller screens
  • allow users to open and close navigation easily (keep the burger in the same place, not allowing it to float out when any off-canvas menus float out)
  • whenever nav is put behind burger, engagement is reduced
  • the word ‘menu’ plus a border resulted in largest engagement over a simple icon
  • don’t hide important nav behind hamburger

priority+ nav

  • show as many important nav items as possible
  • [makefit](https://github.com/aaronbarker/makefit) script for nav
  • menu/search on mobile
    • each nav item has descriptions to aid discovery of the site
  • filtering lots of items
    • off canvas menu allows user to see content updating behind filters, so in the scenario where a list of items can be filtered, its better to partially overlay an off-canvas menu over the list items so that as filters are selected, there is immediate feedback that something is happening, rather than having to scroll up the screen to filter things, then scroll down to check the results.

mobile in 2015

  • 4-5.5″ screens
  • portrait orientation
  • one-handed grip
  • bottom controls easier to reach

‘above the fold’

  • research shows that by 750-900px down the screen, people are ready to use CTA’s rather than right at the top of the page. By that time, the user has enough information to know whether they want to click a CTA

carousels

  • most people do not click past the first carousel item
  • give context to the items, such as showing a description or a thumbnail of the next carousel item

accordions

  • use a ‘plus’ icon to the left of the label has quickest engagement time and greatest understanding

optimize for space, not device

  • potentially show more elements on screen for really large screens, intead of the customary white space to the left and right of screen centre

responsive logos

  • media queries to show different versions of logos with progressively less detail on smaller screens
  • responsive favicons to show state (messages received etc)
    • or to show prod or dev servers

responsive tables

  • give users option to select which columns to show as well as option to show all

google maps

  • add a div layer over the top, when the user clicks on it, remove the div. This means that the user does not get trapped in a map.

japaneserwd – a collection of japanese responsive design is apparently inspirational

responsive pdfs

  • generate thumbnails of the pages, allowing users to navigate to specific pages

responsive forms

  • typeform.com
  • only show one element at a time
  • allow users to use keyboard only, no mouse interaction
  • show progress
  • allow ‘enter’ key press to go to the next field

viewing distance

  • nasa study on viewing distance
  • responsive typography based on viewing distance (requires access to webcam)

[responsive toolkit](http://bradfrost.github.com/this-is-responsive)

flexbox

applications

  • equal height containers
  • correctly aligned input boxes with search button

responsive emails

  • use display: table, table-footer-group, table-header-group to align/re-order elements
  • equal height cols – display: table-cell;

blend modes

  • can be used to set background-blend-mode to change colours of visited links

currentColor

  • css property
  • to avoid redefining colours on every element of a container

svg

  • define background-size of the svg image
  • can also add anything into the svg (javascript, css, media queries)
  • snap.svg (library for svg, animations etc)
  • svg image maps, add vector masks in illustrator, export, add links to vector masks, they become clickable
  • svg icon library
  • legacy fallback
    • image tag within svg tag, no need for modernizr
    • background svg, define png first, then background: none, url(‘image.svg’), smart browsers use multiple backgroundimages
  • grumpicon to generate png’s from svg (grunt task available)
  • embed svg’s using object tag
    • gives more access to svg properties, classes can be added to the tag and targetted in css
  • grunt svg store, combine multiple svg’s into one file.

font icons

  • fontello, icomoo allows custom builds as well as svg generation
  • using unicode for icon font glyphs, this forces ie to run in compatibility mode as ie7.
  • svg more reliable when dealing with fallbacks
  • read bulletproof font icons

wrapping images (actual img tags)

  • object-fit: contain
  • object-fit: cover
  • object-fit: none
  • ie support, object-fit polyfill

conic-gradients (not well supported)

  • for pie charts
  • use conic-gradient polyfill

web fonts performance

  • woff2 has best compression but not support
  • guardian redesign example (front end is open sourced)
    • core content – essential html/css, no js
    • enhancement – js, geo, web fonts
    • extras – analytics, 3rd party content, ads
  • loads fallback fonts first and then web fonts asynchronously.
  • async and defer js attributes
    • async – stops render blocking
    • defer – respect order of markup (e.g. load jquery first, then plugins)
  • use isModernBrowser library by bbc
  • put web fonts in localStorage
    • if is dumb browser, no web fonts or no local storage, don’t load web fonts
  • look at localFont library adn web font loader

14kb limit

  • put as much html/css within the first 14kb, this is the slow stage while the mobile device tries to establish connection with the tower
  • use critical css
    • uses a noscript tag for browsers with no js
  • [page speed tests](webpagetest.org)
    • speed index, stay under 1000

Lazy loading

  • look at gmails eval and lazy loading technique
  • js is all downloaded commented out as plain text, when a feature is required, its uncommented then eval’d (weird)

compressive images

  • large image compressed to 0% quality and scaled down in browser
  • blur elements that are not important or make them gray-scale
  • imageoptim-cli (optimize images)

responsive images

  • even with display: none, most browsers will still download the files
  • (one option) to get round this, add a parent div around an empty div, add background-image to inner div, then display: none to parent element.
  • srcset attribute on img with sizes attribute (bad browser support)
  • or use picture element (bad browser support)
    • can’t style picture element, only child elements
  • snippets, tips about responsive images
  • picturefill image polyfill

responsive newsletters

  • 80% of people delete emails if they look broken
  • only 12% of newsletters are responsive
    • style the alt text
    • colour the table cells
    • convert image to a coloured image cell (critical images will still render)
    • bulletproof email buttons
      • generates buttons using vml for outlook email client
  • work using desktop first design
    • use media queries to support larger screens
  • use table display properties, cell, header-group, footer-group
  • some clients don’t understand ‘.’ notation for classes
    • use ‘table[class=”something”]’
  • html reset styles
  • [html email boilerplate](htmlemailboilerplate.com)
  • responsive email patterns
  • responsive email resources

Leave a Reply