Reusable components Changing web (fast) Multi-device Kittens (no bacon)

Jeffrey Zeldman

Make web experiences enjoyable

Samantha Warren

Take clients through design process via style tiles.

Kristen Halvorsen

Everyone comfortable with talking about content in terms of how much, what it is, where it lives, and meta data. It gets uncomfortable about how to organize it, who owns it, who moderates it (manages it).

Today’s challenges are not technology based, they are challenges about collaboration and working with multiple people in teams. * Jeremy Keith said the original quote. (In the bigger picture, perhaps this is a not just a web problem, but a world problem. Can this even be solved?)

  • Gov.UK design principles

  • Who is the content for? Who will read it?

  • Numbers aren’t everything. Storytelling is (arguably) more important.

  • Principles unite us in day to day work so it’s important to define them within your company, agency, team, self.

  • Being busy is not always equal to being productive. It’s important to keep and work toward the principles you defined.

  • Do not make process your god

“different methods work or fail because of people, not because they are universally good or bad. – Pawel Brodzinski, Agile Bullshit

  • Artifacts are tools, not outcomes.

Critical to get to a shared language, to understand all the terms, in order to facilitate communication in order to come to mutual understanding [between client and vendor] and minimize debilitating negativity.

The commercial web is 18 years old and exiting in an ever-increasing population [4 billion+ people] with different needs, use cases, environments, etc. We are perpetually catching up. Our work is personal, but moreover, it has to be absolutely together.

Luke Wroblewski

  • Ideal to try to reduce the requirement to use the keyboard, at least as much as possible.

  • Software development now has to take ergonomics into account, because of mobile usage.

  • Easier for small companies to jump into mobile space and be competitive because they don’t have baggage of massive teams. Hotels.com vs. Hotel Tonight

  • Reviews via photo versus text. No typing and faster input (no reading).

  • Introductory lessons or how-tos are quickly skipped or can’t be remembered anyway. Use in-context teaching instead.

  • Use multiple devices to accomplish a single task. (e.g. uploading an image from your camera phone onto the desktop device to finish typing).

Ethan Marcotte

  • Responsive Web Design

  • We’re now designing with small pieces of layout, design components, reusable pieces.

  • Envision each component of an interface existing on its own.

  • Boston Globe: (almost 50 percent increase in six months)

  • Electric Pulp (Mobile transactions doubled [iPHone] and quadrupled [android] because of their responsive design.)

  • “Responsive design makes it very hard to write a fast website” – Guy Podjarny

  • Sustainability in web design: reduce and revisit.

  • microjs, zepto.js, gonzo, zest – much smaller than jQuery

  • grunticon (github) – deliver retina-ready images and icons

  • clearleft.com “less than 300k and less than six seconds load time” (should be 1 second)

  • Use javascript to detect browser capabilities to determine interface functionality.

  • Work is lossy, must accept what John Alsopp said in 2000 the “ebb and flow of the web”. He wasn’t just talking about layout, which is where the thoughts in our mind typically default.

Karen McGrane

Disruptive innovation creates an entirely new market for that particular type of technology. Because there are so many people that will buy this new technology, it becomes good enough end disrupts the higher-selling technology.

  • We are in the midst of disruptive technology with the mobile phone.

  • ⅓ of Americans don’t have internet in their homes. This changes when these people get access through mobile phones.

  • (2013) 91% of Americans have a mobile device.

  • The percentage of people using mobile devices to access the internet (36%) is more than the amount of people using the internet without javascript or the amount of users using Internet Explorer.

  • “It’s not a strategy if you can’t maintain it.”

  • Content Strategy? MOBILE FIRST – there’s no such thing as “how to write for mobile.” There’s just good writing.

  • If the mobile experience is better than the desktop experience, make desktop match mobile.

  • Clean, well-structured, chunks of information that can live beyond the context.

  • Look into developing systems, content strategy to define a set of content standards. Length of titles, optional length of SEO titles, image crop sizes and aspect ratios. Possibility of two different lengths of text for descriptions and summaries.

  • Don’t create content for a specific type of context.

Jeremy Keith

  • before thinking about the layout and design, think about the building blocks first, the common HTML elements. (github.com/adactio/Pattern-Primer)

  • content first, navigation second

  • use datalist element to have native autocomplete in HTML5

  • use placeholder in HTML5 for native, grayed-out, text in input fields

  • svg is cool

  • github.com/adactio/Canvas-Sparkline

  • github.com/phuu/sparksvg

  • like, follow, tweet, etc. relies on third-party services to render your page. Not ideal. Best to conditionally load these items and others that require javascsript or some other progressive enhancement.

  • link rel=”dns-prefetch” href=”http://api.flickr.com”>
  • link rel=”prefetch” href=”next-page”>
  • link rel=”prerender” href=”next-page”> (careful with this, big assumption)

  • Code structured, clean HTML and know that even CSS is an enhancement.

Val Head

  • cubic bezier (caesar bezier tool)

  • scenarios to use animations: – moments of change (drop down menu, flyout menu, hover, etc.) – cues and clues (pagination, flexing pagination arrows – demonstrate things (use animation to demonstrate product functionality) – surprise and delight

  • http://slid.es

  • Mozilla developer network for animations

  • Chris Coyier controlling CSS animations and transitions

  • caniuse.com – data on what can and can’t be used in CSS3

  • some browsers lie about their capabilities, use progressive enhancement in these cases rather than relying on modernizr.

Chris Coyier

  • link:hover, focus, active

  • If you’re using a mixing that accepts no parameters, extend is probably the better way to go.

  • CSS Blur (modals)

Josh Davis

  • If you engage too much in work, you’ll never find the next thing because you’re not exploring, you’re not playing.

  • hypeframework.org

Mike Monteiro

  • Empathy for clients during the project process is important.

  • Learn to say “no” – stick to your convictions, stick to your process.

  • Learn to say “I don’t know”

Jared Spool

  • Imitation is less expensive and less risky (organizations didn’t think of design as something strategic)

  • Innovation is more risky and more expensive (design as a competitive advantage)

  • Those businesses that choose to innovate are actually more successful

  • Great business models are intentionally designed – business needs designers everywhere, not just in the visual sense.

  • Innovation is adding new value, not invention. Apple saw a problem with people waiting in line to fix a broken product and created an appointment system so people don’t have to wait. This is an example of a designed experience.

  • Experience design is designing in the gaps

  • What skills are on the best design teams?

Good experience design has the following skills - information architecture - copy writing - design process management - user research practice - interaction design - information design - visual design - editing & curating but even this wasn’t enough: ethnography, domain knowledge, business knowledge, analytics, marketing, technology, ROI explanation, social networking, Use cases, agile methods,

  • What separates out the best designers? (awesome with photoshop? RWD? No.) They are amazing at storytelling, critiques, sketching, presenting, facilitating

  • Become a design unicorn (experience designer)
    • step one: train yourself
    • practice your new skills
    • deconstruct as many designs as you can, rebuild it yourself
    • seek out feedback and listen to it. Try and make it better
    • Teach others
  • Unicorninstitute.com

  • uie.com

jspool@uie.com - linkedin

Mobile Workshop

  • Most used and comfortable size is between 3 and 5 inches.
  • Fixed positioning isn’t supported for older OSs and even some new. Using this method is problematic. Do it with Javascript? Messy because rewriting squirrel methods. Another problem with putting navigation at the bottom is the device design (where actual device controls might be, many times at bottom).

  • Ideal to disable scaling. Don’t disable user zoom, it reduces user’s experience.

  • Best to simplify! What is really needed?

  • Offer important, primary navigation toward the top. Put secondary navigation at the bottom to keep people moving. The problem here is that it can be confusing. “where do I go for what?” and you have to maintain two different menus.

  • Perhaps the best way is to put the navigation at the bottom and give people option to pivot down to it from the top. Footer Anchor is the term for this pattern.

  • Starbucks desktop menu design (submenus in small text - interesting pattern) Having a small amount of descriptive text can be helpful to tell you what’s in a particular area before you click.

  • Common navigation among devices: top navigation sucks – too difficult for ergonomic use. For tablets, you can use left and right and bottom navigation. Perhaps there’s a toggle option at the top.

  • Common theme occurring among websites. Relevant information appearing at the bottom right after user scrolls down a bit. This is offering a small amount of navigation at a time rather than shoving tons of links at the top.

  • May no longer be appropriate to implement standard keyboard/mouse navigation.

  • Luke W. mocks up a mobile first and another for the max-width version.

  • Large number of devices using 240px and using media queries and webkit

  • Above the fold – Which fold? Look up Android screen size chart.

  • Aptus for testing

  • VERY Important to use ems for breakpoints - this covers different default zoom levels in browsers and people bumping up font sizes.

  • Problem wit RWD: assumes using screen size for layout and design. What if the screen width is on a TV? Layout and design becomes a terrible interface. Don’t become too dependent of

  • Google Glass – massive simplification of web sites. Need to be consumed almost literally in the blink of an eye.

  • Input, Output, Posture dictate interface design - not just screen size.

  • +1 for using content choreography (reordering content based on context)

  • Foundation

High Resolution Images

  • background images (can control with css media query)
  • javascript replacement (both images download though before js runs)
  • serve one big image but use JPG image compression (main problem, browser render time)
  • give users choice

  • Vector-based images - use auto-resize and compression

  • imgIX (CDN) for image cropping, resizing

  • Grunticon

  • media queries inside of an SVG file. Images react to their sizes, not the browser window, and adapt accordingly.

  • You can add photos into SVG too.

  • Try to avoid using raster images as much as possible.

Managing Performance

  • Google page speed (mobile first, base css for above the fold)

  • Go for 1s or less because this feels “instant” to humans.

  • FAKE IT (make it feel faster even though it’s not)
    • use animation while stuff loads to make it feel like something is happening while network loads. Don’t use a spinner because it reminds people that it’s taking a long time. Use progress animation instead, like a loading bar.
  • CLIENT SIDE
    • Use local copy of data to display instantly while the actual data is being loaded to the server.

    • Upload certain data while entering other data. Use smaller image ‘placeholders’ before loading heavy html/js (google map is a great example - adaptive map, south street).

    • Use load order.

  • SERVER SIDE
    • Ideal: RWD + server side optimization (RESS)
    • Use device detection at the component level to serve different assets (mobile_something.html vs. desktop_something.html)
    • Tough with Drupal because of caching. Would have to cache each variant.

Mobile Vs. Native

  • Hybrid
    • Memory issues, scrolling performance, GPU acceleration, caching
    • Native is much faster and more engaging
    • Determine where web inside applications makes sense. If it’s not something a website should do, don’t do it.

Future

  • TV web browsers
  • Eye & Watch browsers