These are my personal notes from the Thinking Responsively Online seminar with Ben Callahan, President of SparkBox.
In the US, 52% of laptop owners also own a smartphone
23% also own a tablet
13% own a laptop, smartphone, and laptop
The penetration of desktop & laptop ownership is the same as it was in 2007
Projected this year, more people will be on mobile then desktop
People are trying to browse your sites on these devices, today
Responsive Web Design article on A List Apart
Three Core Techniques
- A Fluide Foundation
- Flexible Foundation
- Media Queries
Fluid Foundations
Think in percentages
Flexible Foundation
Once the layout responds fluidly, the content must also respond
Can also size images via percentages
Media Queries
Being able to query against the width size to be able to
A Shift in Mindset
Traditional Linear workflow
Design -> Front-end -> Backend -> Launch
Then you add Think About users
Then add Content
Slightly Better linear Workflow
Content -> UX -> Design -> Front-end -> Back-end -> Launch!
When you throw RWD into the process?
Front-end now comes with RWD
Then add it to Design and Backend
This doesn’t work
Need to invite others into the process
A Responsive Workflow
Disciplines
- UX
- Design
- Front-end
- Back-end
- Content
Collaborative Timeline
with/differing cycles that never ends
Pros
- Natural Decisions
- Encourages Collaboration
- Encourages Iteration
- Better Results
Cons
- Requires Change
- May Conflict with Organizational Structure
- Dependent on Team Make-up
- Can’t have the rockstar web designer/programmer, needs collaboration
How do we do this?
A Shift in Process
Deliverables that best serve the organization and prioritization of content and function across multiple resolutions.
Our Deliverables
- Research Deliverables
- Content Deliverables
- Priority Deliverables
- Style Deliverables
- Functional Deliverables
Today we’ll focus on Priority, Style
Priority Deliverables
Content Priority Prototypes
- Takes the place of a traditional wireframe
- As much real content as you can
- Linear in nature, priority implied.
- Possibly created in HTML, viewed in browser
- Generated by Content/UX people
Style Deliverables
Style Prototype
- Like Style Tiles, but in the browser
- Very fast to build
- Accurate web typography
- Easy to show web interaction
- Client review in their browser of preference
Use What the Project Needs
A Responsive Project requires a Responsive Process
Lessons Learned
Pricing varies but is getting better
(compared to a fixed width desktop site)
- As much as 100% more, initially
- Likely to be 50% more, soon after
- Probably never less than 25% more
If you compare this pricing vs Desktop and Mobile and Native applications then it’s a wash.
Reasons for higher costs
- Testing (labs & time)
- Fewer patterns
- Project management
- Client Education
- Learning curve
- Maintenance
- Content strategy
Testing
- You must Test on real devices
- Do your development in a webkit browser
- Build libraries of your patterns
Barriers
- Organization barriers block collaboration
- Must have buy in from upper management
- Must have buy in from those doing the work
- It’s not easy, we’re still figuring it out
Performance
- Optimize or cut out images
- Decrease the number of requests
- Gzip if you can
- Concat and minify CSS/JS
- Load CSS at the top
- Load JS at the bottom
- Follow @souders on Twitter
“Don’t blame the technique blame the implementation”
