« | Blog Home | »

Breaking Development: The Sessions, Slides & Notes

Tues 04.17.12 – Yesterday I was quite wrapped up in the nerves of presenting, today I took notes during the Breaking Development Orlando sessions and I have added in the presentations slide embeds as the various speakers have shared them.
My two favorite BDConf presentations from Monday the 16th was Guy Podjarny’sPerformance Implications of Mobile Design” and Stephen Hay’sResponsive Design Workflow“:

Per my usual, my notes are a paraphrase of what is being said during the presentation and what is on the slides, anything is quotes is a quote from the speaker rather than a paraphrase. The notes plus presentation slides can be found after the jump.

Rachel Hinman
Mobile Frontier

The “page” metaphor holds us back from creating truly great mobile experiences
1. Shapeshifting
Lucy Suchman – Human Machine Reconfiguration – Plans and Situation Action, mutual recognition
Suchman studied people’s interaction with copy machines.
Suchman’s theory of mutual configuration suggests a persons capacity to act is reconfigured when it comes into contact with another thing or person
Design Implications:
Shift in contextual assumptions
Shift in our sensibilities in around content as a design material
Our work should be situated in the place where it will be used
Go to the Gemba
Design as the manipulation of materials
Pages and screens are not our design material – we need to think and design for systems
Content is our design material now
2. The Brave NUI World
Natural User Interface
We’re reaching the edges of what GUI can do, even in desktop.
Mobile has brought the age of NUI interface, GUI is too brittle on a mobile device.
Why is it that touch interfaces are so compelling for people? Touch is our most intuitive.
The Brave NUI World – Designing NUI for the brave new world
CLI_> GUI ->NUI OUI
command line
graphic
natural
organic
We are in a strange place were we are stuck in the NUI-GUI chasm.
Key differences between NUI and GUI
GUI – Computer as a tool, GUI = Recognition “What you see is what you get”
GUI = Metaphorics, containment and place
Heavy Chrome, Icons and Buttons
GUI = Experiences are anchored
NUI Metal Model = Computer as media
NUI = Intuition “What you do is what you get”
NUI Content is the store
NUI = Experiences Unfold
NUIs unfold like a game
The issue of unfolding (NUI) vs anchored (GUI) is an opportunity for us to make new design patterns.
Mobile Experience Patterns Unfold:
1) The Nested Doll Patterns : Linear
2) Hub and spoke pattern : Flipboard example
3) Bento Box : Kayak & Trip Advisor iPad apps
4) Filtered View Pattern :
GUIs are our past, NUIs are our future
NUIs can be contextually aware, GUIs are not (from the Q&A)
3. Comfortable Computing
Mark Weiser – Chief Scientist at Xerox Parc – Grandfather of Ubiquitous Computing
The Computer for the 21st Century
“The profound technologies are those that disappear. They weave themselves in to the fabric of every day life until they are indistinguishable from it.” – Mark Weiser
Mobiles are the gateway drug for ubicomp
Following toddlers into the future
“I like cuddling up in bed with Netflix on the iPad instead of sitting in front of the TV. It’s more comforable to go to bed with it” – tablet study participant
“It’s almost like my blankie…” – tablet study participant
Say Goodbye to Done
She should look familiar … The old wireframe.. task efficiency model
Task are about completion…
Possibilities are interactions over time
Exploration
Sensing intent
There was a time when art was about the object, an interesting thing happened when art became about the conversations about the art as it happened (Dada, performance art)
Art as Object -> Art as a facilitator of conversation
Mobile is a facilitator.
Mobile presents and opportunity to invent new ways for users to interact with information.
Rachel Hinman @hinman
rachel.hinman@nokia.com
New book: The Mobile Frontier (April 2012)
**********
Cennydd Bowles
Context Bloody Context
Context Sterotypes: Desktop and Mobile
Beyond Sterotypes
The desktop context was never that homogenous
The mobile context sterotype is just as troubled, what is called mobile is too diverse of a category
Imply from data
Learn from research – Surveys, Interviews, Contextual enquiry, Digital Fieldwork, Diary studies, Participatory design
Details – The seven flavours of context
1. Device Context
The old adage of form follows function no longer works in digital technology
a. Form: tab, pad, board, dot, box, chest, vehicle (plenty aren’t relative to us today in 2012, but in the future could be)
b. OS Capabilities: If in doubt, prioritize web conventions over native. Why make a web app look like native, it is like asking a cat to be a dog. Web apps are great because they embrace platform neutrality.
c. UI Conventions
d. Feature detection
e. Future trends: Bill Buxton says that it takes 30 yrs of a technology in R&D / Academia before it hits the mainstream. Cennydd says we should be ready for when the technologies come.
2. Environment Context
Weather: temps, precipition, glare – climate aware
Noise & light: in a theatre/dark space, the app should be dark background with light text to keep light from leaking out
Information sources
3. Time Context
Device class habits
Synchronous activities
Enhanced functionality
Time available
4. Activity Context
Task nature: simple, fuzzy, singular, multiple
Digital/physical
Lean-forward/back : is the activity active that the user drives, or is it more passive like flipping through photos?
Glanceable: single purpose low-density app that streams information into the real world
5. Individual Context
Nature of relationship: with site, with device
Preferences and dislikes
Mental attitudes
6. Location Context
Habitual or mobile?
Location-specific needs : If your service does not explain the benefit of accessing a user’s location, they will deny it.
Privacy implications
Accuracy
“Mobile is a user state, not a device” – Cennydd
7. Social
Who is nearby? – is the user alone or in a social context?
Others involved
Social networks
Device sharing : People are willing to add security at the OS level (login), in shared they are willing to privately browse
First letter forms the acronym of DETAILS which Cennydd says helps him to remember the different flavors of context
Principles of Context:
1. Context is multi-faceted. The different flavors of context are appropriate at different times during the project. Research is worth it.
2. Don’t punish users for their contexts. The user should have access to all data/functionality not depending on device.
3. Assume gently. Context is a very human thing. It’s easy to get carried away. No need to frighten them with context.
4. Empower the user.
5. Revisit decisions.
***********
Ethan Marcotte @beep
Rolling up our Responsive Sleeves

Starts with Henry Adams
1900 World’s Fair in Paris
“Chaos was the law of nature; Order was the dream of man.” – Henry Adams
I can completely relate to that, trapped between the world you know and the world you knew. – Ethan
Talks about Mr. Keizer, Ethan’s high school English teacher – he invested in us a love reading.
Talks of wood chopping – how to take the chaos and make order and then relays it into web design
The rise of the Digital Omnivore – blog.comScore.com
What makes a design responsive:
1. Flexible or fluid grid
2. Flexible or fluid images and me
3. Media queries
Where do I begin?
“Solve the parts, not the whole problem.” Garret Keizer
Break the problem into discrete chunks.
This is a talk about solving the parts
1. A Matter of Layout
Fave RWD thegreatdiscontent.com by Lisa Gordon
A RD has a flexible foundation
target / context = result
target width / container width = result
proportions are the key element, not the pixels
Starting wide, and shrinking down
default, widescreen-appropriate design here – if a device can’t read the js, then resizes to fluid grid
A more ‘mobile first’ approach
Linear, small screen-friendly design by default
Use min-width media queries to resize for bigger screens
“The absence of support @media queries is a media query.” – Bryan & Stephanie Rieger
We should start treating Layout…
Let’s embrace the entropy.
How did other design mediums manage growth and change over time.
Shows early airphoto of Boston change from 1860 to present.
Every architectural project is a system of shearing layers.
Site – slowest to change
Structure
Skin
Services
Space plan
Stuff – change rapidly
Slow constrains quick; slow controls quick – Stewart Brand
On the Web what is our slow system?
It is tempting to say layout is out slow system. But layout is the fastest system that is most susipectible to churn.
Individual elements are the structure for the web.
Quotes Trent Walton in “Break Everything”
A network of content
What Ethan keeps coming back to in Responsive Design Layout
Width
Hierarchy
Interaction : Shows a telescoping navigation at smaller widths
Density : How much information are you showing?
Simplify before you Supress –
We are entering a period of web refocusing
Content First – Wonderful design principle, but it can some good tech implicaitons – Uses LukeW’s RESS as an example
contentsmagazine.com
greygoose.com – fixed tool bar of the primary navigation (designed by RG/A Chicago)
Start our design process with – Design with Source Order
“HTML is the DNA of the web.” – Jeffrey Zeldman
styletil.es – Style Tiles – when a mood board is too vague and a comp is to detailed
We have been too focused on grid systems
Let’s refocus on the content in those grids
Start with the smallest part, which becomes the atomic unit of the responsive design
Paulrobertlloyd.com – fantastic example of using an atomic unit of design
Starting small and scaling out from there with layers of complexity.
High fluting talk, let’s kill some dreams.
Ads are fixed width, all expressed in pixels. Not flexible.
smashingmagazine.com (hides ads below a certain size, bad for performance & business perpective)
bostonglobe.com – Responsively promoting an ad’s placement
The old ‘ad tag’ – document.write – these ads can’t be repositioned
bostonglobe.com – using a div with data-adname and a class calling ad blocks, then uses media queries and javascript
How it works
Loops through all .ad blocks w a share data-adname attribute
Finds the first visible ad for a given unit type and inserts the ad
When the page or orientation is changed, is resized the process starts again
This is extensible and allows the Boston Globe to add other ads to the page
Layout is the easy part.
Mark Boulton –
Many ad-driven sites would benefit from a responsive approach
web ad is completely a different industry
many ads are rich
the sale and creation of ad units is often based on their size and position on the page
Roger Black “The Holy Grail, Part 2”
From the technical component, many needs to be fixed.
Too much old javascript solutions and bloat:

Watch this space. Something needs to change
4. A Matter of Media and Images
img {max-width: 100%;} Never bigger than the container it lives in.
Also works with object and video. img, object,video
But height remains fixed in video.
A matter of scale
Embedded video doesn’t have intrinsic dimensions
Do lecture resizes video proportionally has the page resizes.
Creating intrinsic ratios for Video – A list a part article by Thierry Koblentz
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
Uses aspect ratio height/width = aspect ratio
Creating a ratio-aware box using absolute positioning using CSS
Fidvids.js
Images – resize
Responsive Images by Scott Jehl
The Responsive Images philosophy
Default to serving a small screen appropriate image
Conditionally enhance to the larger images

Can we adopt a new pattern?
Is the answer More Code?
A Simpler Page by Craig Mod
http://www.alistapart.com/articles/a-simpler-page/
Andrew Stanton – Pixar – Finding Nemo
It’s ok to not know… art is messy
***************
Brian Fling
Resonance: A Mobile Design Ethos

Brian starts with the news of the Instagram app acquisition by Facebook
What is Mobile Design?
What can we learn from Steve Jobs? What was the driving forces of his life – Zen Buddhism.
Bauhaus – Creavtivity and manufacturing were drifting apart, and the bauhaus aimed to unite them once again.
Bauhaus – Less is more.
Mies van der Rohe – Last teacher at the Bauhaus that brought less is more to US architecture
God is in the details – Mies van der Rohe
Dieter Rams – Product designer at Braun – designed amazing products – “Less, but better.”
[Link from Jen: http://www.vitsoe.com/en/gb/about/dieterrams/gooddesign]
Dieter Ram’s 10 principles of good design:
Good design is innovative
Good design makes a product useful
Good design is aesthetic
Good design makes a product understandable
Good design is unobstrusive
Good design is honest
Good design is long-lasting
Good design is thorough, down to the last detail
Good design is environmentally-friendly
Good design is as little design as possible
Brian’s Good Mobile Design is:
Innovative
Honest
Useful
Beautiful
Easy to Use
Unobtrusive
Timeless
Perfect
Aware
Simple
Brian is going to talk about three:
Good Mobile Design is Innovative,
Innovative
“The possibilities for innovation are not, by any means, exhausted.” – Dieter Rams
Brian gives the example of his dad, a brilliant engineer, who invented the automatic soda dispenser but did it a few years too yearly to cash in on the fast food explosion.
Great parallel on how we create good design, be innovative and make money.
Equilateral triangle of business goals, user goals, and technical goals – need to find the sweet spot between the three goals
technical goals => creative innovative technology
business goals = strong vision
user goals = innovative design
Leap frog the competition
Design summit – Big company (NDA)- web folks invited to help the big company create a site in week when big agencies said it would take 9-12 months. The big company has had a 300% increase and it is their most successful web thing to be rolled out across their properties.
“Lesson I learned: Innovation is not enough, I had to communicate your vision. And more importantly, you have to stay true to it.” – Brian Fling
Beautiful
BBC iPlayer iPad and iPhone apps
Timelessness
It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years even in today’s throwaway society. – Dieter Rams
Universal App
Proxy – suck in data and design for endpoints -> the app is the api
Native Apps
Native Hybrid App
HTML5 Hybrid App
*********

James Pearce
This Web Goes to 11

1998 – Palm Pilot – had a small firmware plugin for a mobile browser using HDML, what I could see that the web was going to escape the desktop.
2012 – @media – If we think the web is a constrain, then my vision of the web is unfulfilled.
Mobile devices are not just a glass, look beyond the glass and see the human on the other side and see everything the device can do.
Wired Magazine thinks the web is dead, but I could argue it is dying. In 2007 with the 1st iPhone, we had the opportunity to make the web be the main way to interact in mobile, but we didn’t take the opportunity.
We have a lot of work to do as mobile web developers. The good news is that the users have not heard this.
Device APIs – in the browser we can get access to native capabilities
With WAP from the browser you could make and receive calls, send SMS/MMS, and go into the address book.
Why can’t we get device APIs with a modern smartphone browsers?
With WAC (specs.wacapps.net), one can get many device APIs from the browsers, but there are no working run-time versions.
Baton got passed in 2009 to the WC3 – “To create client-side APIs that enable the dev of web apps that interact with devices’ services” – but it is a much reduced list from WAP or WAC.
Geolocation API:

navigator geolocation.getCurrentPosition(
function(point) {
console.log(point);
}
);

Retrieves the Geoposition, if the user grants permission
Media Capture API:
dev.w3.org/2009/dap/camera
forms based


var photo = document.getElementById('photo');
photo.files[0].getFormatData{
function (data) {}, // success
function () {} // error
};
navigator.getUserMedia(
{
audio: false,
video: true
},
function (steam) {}, //success
function () {} // error
);

// stream is a LocalMediaStream: use URL.createObject….
Messaging:
dev.w3.org/2009/dap/messaging

navigator.sendMessage(
"sms:16505551212?" +
"body=JavaScript..."
)

Sensors – mobiles are bristling with sensors
Contacts
XKCD – If there are 14 competing standards, create a new one!
Mozilla – Web API – device apis
“We are aiming at providing all the necessary APIS to build a basic HTML5 phone experience within the next 3-6 months.”
“The Mozilla WebAPI team is pushing the envelope of the web to include — and in places exceed — the capabilities of competing stacks.”
https://wiki.mozilla.org/WebAPI
Boot to Gecko – implementation of the APIs – a phone http://www.mozilla.org/en-US/b2g/
“You can view source with this phone, it is freaking amazing.” – James Pearce
It is in GitHub and you can see how they did it.
Telefonica has built a Boot to Gecko phone for $68 per phone.
The javascript capabilities are very simple for this phone : Lovely and simple
WebTelephony https://wiki.mozilla.org/WebAPI/WebTelephony
While we are still fragmented we have PhoneGap
PhoneGap exposes as many of these APIs as possible
James’ Camera web app:
Demostrates camera app on a HTC G2 android phone
Will add to github someday
Sometimes, Progressive Enhancement can give away to No Compromise
ProgEnh community needs to stand up, a lot of browser vendors know that we need this stuff.
Facebook launched ringmark http://rng.io
Coremob.org – Core Mobile Web Platform
It might be possible that the web was an anomoly, an offshoot of the end of the desktop era. Maybe the web is in its dying days because it failed to grasp the possibilities of mobile. If the web can stop seeing itself as a collection of documents, then we can…
********

Reset the Web

View more presentations from yiibu


Stephanie Rieger
Reset the web: a brief stroll into our past and our future

The web is less than 8000 days old
It reaches approx 1/3 of the planet
but what is the web actually for?
surprisingly no one talks about it, we don’t talk about why it is even there.
the beginning of answer..
From a Steve Jobs story about a 1980s presentation about one computer per person
You can say the same thing about the internet
The more people who come online we have started to realize what the web has brought.
“This is not a smartphone,” its “a device to amplify curiosity.” – John Seely Brown
FJ van Wingerde (@fj) – “I just happen have to have the sum of human knowledge in my pocket”
“The magic is my palms, god knows what I would do without this…” – Omar 19, Hafeezpet, India
The interet is what brings the magic to the phone.
How did we get there:
Plumbing … infrastructure
The plumbing provides the network structure / scaffold on which to innovate (shows map of underseas cable network)
Hardware – history since 1950 from transistorized computers to 64-bit processor in a PC
Network – history from ARPANET in late 1960s to first cell network in Japan late 1970s to 3G…
The Web – etc
with each layer comes the need for new plumbing
Quotes Bill Buxton
The desktop mentail models may not apply to the point that mobile passes desktop web usage
A short stroll into the future
contexts will be varied and unpredictable
a small selection of near future devices: tiny personal constrained, big – browser treadmill, tvs, Tesla car has a tablet instead of a dashboard.
Projection virtual bluetooth keyboard
shipping Europe in 2012 – LG’s malleable screen
Google glasses
these contexts may be diverse, but they are still kind of anchored in the past
Old thing + connectivity + software + internet = the newish smart thing
everything will be connected
1982 to 2007 of PC to iPhone
it costs almost nothing to make something connected and ‘smart’
the new ARM cortex-M0 costs 30cents and is 2mm wide – it is one chip that does the work of 3
Research from ThingM – quotes Mike Kuniavsky from ThingM http://thingm.com/
“embedded in everything will be a sliver of webness”
just in time will replace just in case
mobile dramatically shifting web behavior, the web is used anytime and anyplace
current behavior is quite implicit
and the experiences are built accordingly
Scott Jensen – devices will load apps opportunity as we need them in real time – in an interview in Forbes
does this mean that websites will go away?
Probably not – websites will be one of many ways to interact with a service
The GlowCap service – smart prescription bottle – chip in bottle cap and a web service
content will need to flow like water
If content will be like water, what kind of plumbing will we next
responsive design is really just the beginning
suggestions:
#1 – Problem: back to top page. Solution: vertical navigation shortcuts
#2 – problem: lots of 3rd party scripts. Solution: bake-in a social sharing layer into the browser itself
#3 – Problem: there are only so many ways to deal with complex navigation in mobile. Solution: What if we off-loaded top level navigation to the browser?
#4 – Problem: Our media formats aren’t adaptive enough. Solution: Create a natively adaptive media container format
These are just ideas, as we have no idea what will really happen in the future
Don Norman quote – we place the emphasis on future technology, but it is really the social impact and cultural change
Here’s to the next 8,000 days of the web!