The News Responsive Web Design Workflow from Trent Walton

Ari Styles introduces the Responsive Web Design Summit.

Christopher Schmitt introduces RWD Summit and introduces Trent Walton

ERMAHGERD Responsive Web Design.

Who is Trent?

  • Works at Paravel
  • Proud father of (soon to be two)
  • Loves Green Chili Cheese burgers
  • Loves animated gifs

RWD & Trents History

  • rwd & trent
  • RWD Process
  • RWD Creativity
  • RWD squishiness, this was one of Trents concerns about RWD.
  • Perception of RWD on the web

Lost Worlds Fair site example, back in the day Trent built sites IDENTICAL to the design in Photoshop. CSS & HTML was there to execute the design, but the creative work was all done in photoshop.

What you saw in photoshop, you saw in the browser.

Then on May 25th 2010 Ethan ruins everything by writing RWD on A List Apart.

At any width the design can do anything and go anywhere.

Initially there were concerns with this new way of creating sites. Fear about the process, feat about the creative limitations, dislike for squish layout changes.

How does the Process work at Paravel

Starting the Process.

Lettering.js is not responsive, no flexible grids or images and one media query. This was a learning curve for paravel, RWD is not a bolt on. It’s not like border-radius or web fonts taht can be bolted onto an old design to make it better.

Do Lectures.co.uk was the first RWD Site built by paravel from the beginning.

At each step of the way they realised this wasn’t that difficult to do, lets do it all the time.

Paraval start with Max Width. A lot of talk around mobile first but for Paraval it was a more creative place to start with Photoshop.

Prototype and iterate any elements that might be problemsome (video). This took it into the browser to get the right feel for the site.

Once confirmed in the browser they moved to testing in devices. Prototype and interate.

Build & Design, Build & Design, Build & Design

Responsive Design is like ddriving on water, make small iterative changes.

HOW TO MAKE IT WORK?

Designers

  • Designers should learn the web inspector. (allows you to nudge a design in the browser)
  • Maybe even how to code
  • Give Hugs

Developers

  • Get people access to your build
  • Patietly explain things
  • Give Hugs

paraval use Dropbox to work on some projects to make sure files/designs/cutups are all shared easily.

Creativity and Design must play a part in every piece of the RWD Process.

RWD & CREATIVITY

Trent loves custom posts. Provides an outlet to try things before trying them with a client.

A flexible Foundation

If you’re using a pixel for anything, don’t.

Tips for flexible

  • – background-size
  • – text-shadow
  • – border-radius
  • – Use % percentages (especially for grids and layout)
  • – em based on current font-size
  • – rem based on root font-size
  • – vw, vh, vmin (% of view port size, this is like… the future)

PXtoEM – helps you make the calculations

Use icon fonts

  • – shifticons
  • – pictos
  • – symbolset

GITHUB have a great article on how to make their OCTIGONS. Try using Glyphs Mini (mac) to create your own fonts. (http://css-tricks.com/video-screencasts/113-creating-and-using-a-custom-icon-font/)

Don’t settle for what’s current. Experiment, prototype, share.

Jason Weaver’s Lab

Squishyness

As the layouts are changing it is important that the message is still holding true, don’t let it get too squishy. Things need to stay proportional in order of importance.

The Bunch & Slide

codepen.io/TrentWalton/pen/Cclip

Squishy Flexbox

codepen.io/TrentWalton/

Squeeze and Crop

Heirarchy issues are solved with

When thngs get narrow you can maintain the height and crop the image to the right. This maintains

Maintaining good measure

How do you deal with paragraph text? According to web typography 45-75 characters per line is perfect. Technique is to include an asterix * in the text to ensure that they never appear on the same line. As you get to a larger layout you should jump the fontsize to ensure the asterix remain on different line.

TO THINK ABOUT THE WEB RESPONSIVELY IS TO THINK IN PROPORTIONS, NOT PIXELS.

You need to trade control that you have in photoshop for a new kind of control using flexible images, grids and media queries to build not a page, but a network of content that can be rearranged at any screen size to best convey the message.

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>