Author: Evan Mullins

LESS and syntax highlighting for Pea.rs

Posted on by Evan Mullins

Pears is an open source WordPress theme by Dan Cederholm (simplebits), enabling people like us to get your own pattern library up and running quickly. Collect, test, and experiment with interface pattern pairings of CSS & HTML.

I’ve customized pears. I’ve forked it, adding support for coding in LESS as well as code highlighting! The LESS auto compiles to CSS and then is applied to the HTML content.

  1. Grab the original or fork at Github.
  2. Install the theme.
  3. Create markup & style patterns.
  4. Learn.

Check out my own pattern library (at http://pears.circlecube.com/) to see it in action!

or visit the original.

An Event Apart Atlanta 2012 Notes

Posted on by Evan Mullins

Here is my collection of notes from attending An Event Apart Atlanta 2012. As I took notes, I had the thought that I’d be sharing them with co-workers and that it’d be easiest to just publish them here. I hope they are useful to someone else out there who didn’t take notes on something or wasn’t able to attend. Huge thanks to Jeffrey and Eric for organizing the event and for all the speakers! I sure learned a lot! I did miss a couple of presentations, maybe I’ll find my notes and add them one day. Let me know if you’re looking for a specific talk that I’m missing and I’ll check my notes.
Monday 6 February 2012

Tuesday 7 February 2012

Wednesday 8 February 2012

Developing for old browsers is (almost) a thing of the past – (37signals)

Posted on by Evan Mullins

Basecamp announces that it’s new version will not support old browsers! They will of course continue to support them in their “classic” version. But this is good news and as more implement this type of policy the internet will be happy.

It used to be one of the biggest pains of web development. Juggling different browser versions and wasting endless hours coming up with workarounds and hacks. Thankfully, those troubles are now largely optional for many developers of the web.

via Developing for old browsers is (almost) a thing of the past – (37signals).

Vendor Prefixes – about to go south

Posted on by Evan Mullins

What are “standards” coming to?

Who’s guilty?

Apple and Chrome: They’re supporting vendor prefixed properties like they’re a standard part of development.

Firefox, Opera and Internet Explorer: They should have been on the ball more. Need to push their evangelism further. Teach developers that it’s not exclusively -webkit to style elements.

All the browsers: experimental suggests that it will either be discarded or implemented fully at some point. It’s both not clear what’s a real specification be experimentally supported, nor when those experimental prefixes will be dropped.

The working group: for not getting these properties to standards quickly enough. The web moves quickly, and as much as a I appreciate that the standards will not move as quickly, they’re still taking way too long.

Evangelists: We’re too eager to show off experimental effects. They’re cool, right? But it’s cost us, and we should always used vendor prefixes as a backup, not as the final thing.

Developers: We know better. We know/hope that eventually these prefixes will be dropped, but we’re propagating this problem.

You and me: I’m just as guilty as everyone else in using WebKit only prefixes.

Browsers need to:

Non-production ready browsers should support experimental prefixes, production ready releases should not. If it’s Chrome 16 – the stable version – experimental support should not be baked in. The properties should be full available without the prefix.
Drop experimental prefixes – not entirely, but after a finite amount of time. It’s unacceptable and a disservice to the developers working with your browser. You need to give timelines to dropping these things.
Work with the working groups (…Apple).

via Vendor Prefixes – about to go south.

An Event Apart Notes: Ethan Marcotte, Responsive Web Design

Posted on by Evan Mullins

Ethan MarcotteEthan Marcotte has become the father of Responsive Web Design and spent this whole day focused on principles, techniques, gotchas, examples, … all about building and how to build responsive sites. With a sprinkle of mobile first.

For Ethan, it all started with this article: http://www.alistapart.com/articles/dao/

Think of architecture, the whole design phase is established on constraints.

A truly interactive system is a multiple-loop in which one enters into a conversation; a continual and constructive information exchange.

Examples of responsive design:
designingmonsters.com
http://jessicahische.is/
designmadeingermany.de
crush and lovely
us.illyissimo.com
unitedpixelworkers.com – very big and touch friendly navigation
nd.edu – notre dame
university of tennessee
the boston globe
http://responsivenews.co.uk/news

Why go responsive?
http://blog.responsivenews.co.uk/
http://digital.cabinetoffice.gov.uk/2012/01/26/mobile-and-gov-uk/
“offer high quality with lower maintenance”
http://simplebits.com/notebook/2011/08/19/adapted/
24ways.org
http://couchable.co/blog/post/a-responsive-design-workflow – don’t
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
http://upstatement.com/blog/2012/01/finding-the-look-feel-of-bostonglobe-com/

Compare process to print with a press – linear process has been co-opted for the web
discover, design, develop, deliver
Break down the one way process from design to develop. The workflow should cycle between design and develop.
Text:
How well does the layout adapt?
Do individual modules still feel usable?

Think Disposably

Natalie Down video on Vimeo vimeo.com/33747932

Device Access: Working with devices is part of our design process
bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

Our content. Wherever you are. Universal Access

Mobile First! – Luke Wroblewski
The argument: Mobile traffic has explided, new capabilities (touch, geo, voice, ubiquity), narrower screens force us to focus.
Think about these things earlier in the process gives a better end product
What value does each content have for our mobile users?

Mobile First and Design for Content First (really Content always)

Flexible Grids – responsive sites have a flexible foundation
http://mediaqueri.es
http://www.informationarchitects.jp/en/
mikedidthis-focus.tumblr.com/

500 Android – snapshot from google analytics: http://stephanierieger.com/the-trouble-with-android/
Will screen resolutions standardize over time? Who knows, we need to be thinking flexible, it is even the more future proof solution.

Grids
The History of Grids – Every movement in art can be seen as a response to another
Start design with a network of modules
…methods and rules upon which it is impossible to improve have been developed for centuries… -Jan Tschichold
Mark Boulton introduces “The New Canon” for web design
-Content out, not canvas in.
-Create connectedness
-Bind the content to the device

aworkinglibrary.com – change – Mandy Brown “rich designs can emerge from flexible roots… the web is not print…

Formula: target / context = result

contentsmagazine.com

Elliot Jay Stocks suggests using a 1000px width page for easier calculations: http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/

TextMate has intrenal tools for doing calculations. Let the software calculate the formula, then put the the reference numbers in a comment.

SASS – Getting started with SASS – http://www.alistapart.com/articles/getting-started-with-sass/

Use the formula for margins and padding as well. We get proportional results! Using fixed values would be unproportional.

Learning to love (survive) rounding
.last-child { display:table-cell }

Frameworks:
Golden Grid system.com
Foundation.zurb.com
know limitations of a framework

it’s all about balancing the ease of dev vs ease of maintenance

Frameworks are very valuable for prototyping

Design your source code order. think about linear and layout at the same time.

Bandwidth
no correlation between screensize and connection speed (or price even)
a matter of serving appropriate images
a hack really: preloaders, cookies and race conditions (http://blog.yoav.ws/2011/09/Preloaders-cookies-and-race-conditions)
Each browser does this differently though and it’s not standardized.

Other options for responsive images
adaptive-images.com
headlondon.com/our-thoughts/technology/posts/creating-responsive-images-using-the-noscript-tag/
monolitti.com/images
sencha.io – route your images through this url to get appropriately sized images. still uses browser detection to determine size, pus it’s 3rd party
categorizr – a modern device detection script – brettjankord.com

Can we solve this with new markup? A new html element? Like th evideo or audio elements?
Video element can have media query attached and multiple source files referenced.

Backgrounds
stuntbox.com
background-position: 0 0; – x y; left top; 50px 0; 0 50px;
it’s a bit different for percentages: 50% 50% (centered). percentage for packground position is proportional to the image itself and the container. t places that point in the background image in that position in the container.
Resizing background images: background-size css property. Set in pixel based terms or in proportions/percentages. (not 100% supported, but can be used as progressive enhancement).

Video:
madebyhand
dolectures.co.uk
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
Create an aspect-ratio aware box (container): height / width = aspect ratio
set the video width and height to 100% and give the container a padding-top of the aspect ration value (in percentage)

Is the answer to the images/bandwidth question more code?
http://www.alistapart.com/articles/a-simpler-page/
craigmod.com/bibliotype/demo/ filamentgroup.com/examples/rwd-table-patterns
Let the user opt-in to the content that they are most interested in to construct the page.
User selected video settings in youtube, for example.

Media Queries
Descendant from media type style sheets: scree, print, handheld, projector…
display area and rendering surface
Think of the browser’s viewport as the display area and the display as the rendering surface.
Specify ranges with min- and max- prefixes for browsers above or below a certain threshold or breakpoint.
Long list of media query features: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid. These can be combined in statements.
Can combine media types as well.
Also keywords for mixing the statements: only, not, and

Viewport
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
There is a difference between “device pixels” and “css pixels”
ios bug for orientation: filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/
device-adaptation module in css iin progress.
Recommend:

Put it into practice:
Looking at the weather module on the boston globe as an example. http://bostonglobe.com/
Don’t suppress things before discussing simplifying it.

How do you choose breakpoints?
(The only way I’ve ever learned anything, is by doing it wrong first)
Initial breakpoints: 320, 480, 768, 1024, 1200px
Set up the queries to support Mobile First
Mobile first workflow overview, start with one layout and additively add more.

Polyfills
css3-mediaqueries-js: slower, first on the scene.
respond.js: very fast, only tests for min-width and max-width, only ~3kb

There’s no real set of IDEAL breakpoints
We’ve been very focused on columns, let’s refocus on content!
http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
Set major increments and have the smallest breakpoint totally fluid and then find breakpoints dependent on the design (content and typography) rather than devices. Let’s not choose our breakpoints based on devices, but let our designs dictate what looks best.
paulrobertlloyd.com

Start with the smallest part

Advanced Layouts
Negative margins to break out of the grid

Box-sizing

CSS3 – the waiting game
Multiple background images

Flexbox
display: -webkit-flexbox or -webkit-inline-flexbox
flex-flow: row, row-reverse, column, column-reverse;
flex-order: 1;

flex-order places flexbox items into ordered groups
By default, elements have a flex-order of 0, and remain in the same order they are in the source.

Could be used for template layouts with a layout policy!

! (oh the waiting game, it would be awesome to be able to use this now)

http://www.lukew.com/ff/entry.asp?1392
Bagcheck app, links to footer navigation in the header.
Content before navigation for mobile.

http://contentsmagazine.com/ Setting the top margin and absolute position to 5em/-5em, and the navigation is part of the main content. Smaller sizes the navigation is at the bottom and larger it is set to position absolute and fits inside the margin.

Responsive Enhancements
fittext.js
trentwalton.com/ – “Some people’s brains I wish I had” – Ethan talking about Trent Walton
http://github.com/Wilto/Dynamic-Carousel
http://www.barackobama.com/

Progressive Enhancements are backwards thinking to graceful degradation, start simple and build up with enhancements.
stephanierieger.com/a-plea-for-progressive-enhancement/
rakaz.nl/code/combine

Use IE conditionals to load specific stylesheets for them. And use media=”only all” for the enhanced styles

Minify and combine/concatenate javascript files

Conditionally load assets (progressive enhancement – if a browser can’t be enhanced, let’s not load the files that would enhance it). Test for capabilities of device and not test for the device itself
labjs.com
yepnopejs.com

Constantly ask yourself: is this element content or an enhancement.
Fonts: sasquatchmusicfestival.com (fonts for web are usually pretty heavy)

Thinking about process and patterns
1. Width
2. Hierarchy
3. Density
4. Interaction

More Examples:
tattly.com
vivelohoy.com
tinynav.viljamis.com
forefathersgroup.com
ediblevineyard.com
staffanstorp.se

WOW, what a day! On to implementation…

An Event Apart Notes: Jared Spool, The Curious Properties of Intuitive Web Pages

Posted on by Evan Mullins

Senseless waste of asterisks… Avis used an asterisk to denote optional fields. This means that there is a lot of baggage that comes with an asterixk. Somewhere this symbol got meaning, it’s not in the bible!

We can control when something goes from unintuitive to intuitive.

A design is intuitive (although technically and grammatically speaking that is false).

An intuitive design is when the user is focused on their objective.

Simplest site online; haynet, need hay and have hay. Unclear objectives.

Intuitive Design is Invisible. you only notice it when there is something wrong with it. Like the AC in the room, it’s only notices when there is a problem with it. It’s an issue of focus.

Lytro gives focus shift to the users.

We shouldn’t force users to focus on things which they don’t choose to.

Property #1 of intuitive design: Clear Focus.

Kittens die when marketing people win.

Keep focus on the users objective and not on the interface.

Magic Escalator of Acquired Knowledge: zero knowledge at bottom, full knowledge at top. Positions at current knowledge and target knowledge show a knowledge gap. To make a site intuitive we put current and target knowledge as close as possible. An intuitive design is when current knowledge = target knowledge. We can either train people to increase their current knowledge, or we can simplify the target knowledge. Teaching examples: like facebook timeline introduction, google apps update with walkthroughs. Simplify examples: craigslist, umbrella today.

Things with a large knowledge gap that we must use we tend to hate, and when use is voluntary we avoid. Things with a smaller knowledge gap and required are tolerated, and when use is voluntary we are cautious. If the knowledge gap is small enough users love it and use it! Making things usable lets users enjoy using it and they like us!

With a million visitors and a 1.6% conversion rate all purchases. 1 foot = 16,000 Visitors. The customers are the 1.6% that convert! Don’t alienate customers! Don’t destroy current users’ current knowledge, that’s like sending our best customers back down the escalator. Learning a system is an investment and people hate to relearn. Subtle changes doesn’t throw away current knowledge.

Always keep the focus on the users’ objective. Don’t distract with design changes.

Property #2: Map design to user objectives

See price in cart – on online stores is not a trick to get people to buy more. It’s a law they have to abide with thanks to the FTC.

Hipmunk flights drawn on chart and you can sort by agony. Different presentation of flight data, makes the shopping choice much more intuitive.

The medium of design is behavior.

Core skills of user experience (Intuitive): Interaction design, visual design, user research, copy writing, information architecture…

Users only see Local – local links. Users don’t pay attention to global links.

Best way to do user testing, watch people. Watch people. You find out simple and obvious things by watching users using the site.

Property #3: Forewarning

Shopping cart showing shipping before cc input is critical.

“More”, “previous” and “next” links are noise, especially when you come in at the middle. It makes everything out of context.

Pull to refresh: low target knowledge, no current knowledge. Not intuitive – socially transmitted functionality. STF.

Property #4: Understanding of Convention

Key functions enter vs shift enter, tabbing order, google apps:auto-saving.

Convention of proximity: username and password and login button should all be close together.

Understand which conventions users will expect. Techniques for understanding: filed visits, usability tests, paper prototype, Handbook of Usability Testing, Paper Prototyping.

An Event Apart Notes: Marco Arment, Bridging the App Gap

Posted on by Evan Mullins

The iPhone changed our industry in 2007: first mobile to have a desktop class web browser and it made people start using their mobile phones as computers!

All apps other than apple provided ones were web browser apps. Most of the first apps were branded web browsers. No real difference between using mobile site or mobile app.

Now companies are asking (like they did in 2000, about a website), “Do we need a website?”

Instagram has no website, just an iOS app.

web != HTML, browsers the web, the code/HTML and native interface are all current services.

When is an app not the answer: content sites, low budget, prototypes, breadth audience.
When is a website not enough: hardware access (native access comes first, javascript coming but years out), software limitations (fullscreen, background processing), data limitations (address book, calendar, media), connectivity (offline access isn’t production ready), practical size constraints.

A website is not always enough.

People are finding apps first on their device in the store and not coming from the web. Websites aren’t promoted in the app store.

Downsides: app stores are closed gate keepers. 30% commissions taken by the app store. Reviews are not respond-able and not gauged for quality or even comprehend-ability, like comments we can’t moderate. Payments.

On the web payments are hard, so we’re using ads. For apps, payment is actually easier than ads.

user-generated content – horrible phrase vs author writes a story.

Monetizations matters, considering “users” as customers we can start serving the customer rather than the ad vendors.

Apps are not inclusive, we need to develop an app for every device. And that limits the audience to those who have that device.

Design considerations, style tips: use standard controls where possible, integrate webview seamlessly,

Native to one platform you just build for that platform and don’t have to worry about browser inconsistencies.

Tips:
Mind your encoding: utf-8
When loading content set bg to transparent to avoid white flash
show a progress spinner, hide the uiwebview when remote content loads
consider disabling scrolling in secondary or minor uiwebviews
disable long-tap link menu (add value to standard behaviors)
disable text auto-resizing and text zooming
control orizontal oerflow to prevent unintended scrolling
consider advanced text rendering (carefully – t can get pretty slow)
consider auto hyphenation (small performance cost)
consider disabling data detection (phone numbers, emails, etc)
load local resources with relative file urls, or use data urls
communicating between environments – native code to webview javascript.
consider listening for gestures in js

Why does all this stuff matter?
Able to learn it one thing at a time: because things start slow and modules are added over time. It’s easier to keep up with changes than it is to learn everything.
HTML, Web Design and Apps are all in the same eco-system and there is some overlap. Best to learn more about apps NOW, as it starts than try to catch up later.