Beyond Squishy: The Principles of Adaptive Design

Brad Frost – Brad Frost Web

Generic Trademarks (Kleenex, Corn Flakes) on the web are AJAX & HTML this lead the way for responsive web design, which includes fluid grids, flexible media and media queries.

Adaptive web design is a larger container for responsive web design. It just happens to be the term that caught on.

Principles of Adaptive Design
Ubiquity – The web is not just a computer any more, it includes many many more ways to access now. What will it be in the future? Cars? Refrigerators? Watches? Printers? TV’s We have to reach a LOT of devices. “This isn’t a bug, but an opportunity.” Adaptive isn’t just “web light”. Mobile users should be able to access everything their counterparts on a full browser can. Just give people what they want regardless of how they access.

Content Parity – Does content parity trump all? The typical “mobile context” is on the go – quick access. There is on the go, but it doesn’t include everything. Just make quality relevant content accessible on whatever platform it’s being viewed on.

Ubiquity – Your design needs to work across the entire design continuum, not just certain browser sizes, or phone sizes.

Performance – 70% of mobile users expect their site to open as fast or faster than regular browsers. If your site doesn’t load in 5 seconds, they’re gone. Performance is invisible, so it’s a hard thing to root out. It lives underneath and it’s hard to measure. Performance should be a design feature. Mobitest.akamai.com will help test mobile performance.

Enhancement – Responsive design is NOT one size fits all. Don’t go mobile last, but go mobile first and then grow. Build the experience up from mobile. It’s not about building for the lowest common denominator but starting and building up from there. Be careful with a single (javascript) point of failure. Don’t over-engineer things… simple is better. There is a difference between support and optimization (you can’t test on absolutely everything out there).

Future Friendly – Things are going to change. There is no such thing as future proof. Just be future friendly. People have a low tolerance for BS. Focus before your customers do it for you. People will find ways around a bad experience (Instapaper, Flipboard, ad-blocker). On the web, the more backward compatible you are the more forward compatible you’re likely to be.

How to

  • Get to the meat – don’t waste time on huge headers.
  • Navigation: It should be like a good friend – there when you need it, but out of the way other time. A menu button to get nav out of the way is good
  • Search Form: Prioritize search to provide a way to get around.
  • Product Info: put it up front and get people to it.
  • Carousels: Make sure you actually need one. Cycle through like items, make sure things are related and make sense.
  • Product Form: make sure the phone pulls up the right keyboard
  • Share Buttons: They are big (a lot to load)
  • Find Nearby: It is geared to a mobile user, so may not be necessary for desktop users.
  • Auxiliary Content: Make sure content is prioritized and bring in content when needed.

Scanability & Performance
We are always scrolling through a single content type. Don’t make your users scroll through EVERYTHING. Collapse content so it isn’t everything and the kitchen sink.

This stuff is hard. It is always changing, but we need to do it. We need to be aware of landscape.
“If you’re finished changing, you’re finished” – Ben Franklin

Brainstorming: Technology First

Will Turnage – R/GA

This talk demonstrated a new technique in brainstorming that Will created over time for use at R/GA to help create a more productive brainstorming. This technique is based on his observations of traditional brainstorming and where it falls short. The technique, like any process or technique may or may not work in all situations and should be adapted for your use. I think many times the structures of these get in the way of actual results, but this one seemed to produce results for their organization and looked like it could produce results elsewhere if done correctly.

The actual technique is described in full in the slidedeck that Will produced.
http://bit.ly/tech-first

Open Web Platform: Hopes and Fears

Tim Berners-Lee

Tim Berners-Lee

Tim Berners-Lee – World Wide Web Consortium

He talked about the history of programming languages, object oriented languages and the creation of a general (not specific to a particular platform) language. C -> Java -> HTML. The web works because HTML didn’t tell you what you could use on top of it. We are to a point where javascript can do many things now. HTML was designed to be completely declarative. It can be ready by many different things and many different devices. If you’re going to transmit something, use the least powerful language you can. Simplicity makes it difficult for something to be attacked. There isn’t a need to do additional things (jpg viewer doesn’t need to run additional code).

What is Tim Berners-Lee’s job?
To get people to use open standards. Javascript is a nice language to work in tandem with HTML5. It allows you to connect to hooks in certain platforms – API’s are available in Javascript to connect to mobile devices. You do need to be careful when writing HTML5, there are still platforms that don’t completely support it. The dream is still to write once and run everywhere, and HTML gets close. HTML5 is everywhere. Soon pixels will be cheaper than paper and printing.

Open Web Platform Docs
Webplatform.org

Platform
When TCP/IP was developed they completely ignored how it was going to be used. You throw something down the pipe, and it comes back in the same order. It wasn’t designed for anything specific. When you build something big and powerful it’s not what you can do, it’s what people can do with your stuff.

HTML used to fit on one sheet of paper, and has grown significantly. It is a platform of interconnected knowledge. It was quasi-static. Now with Javascript, webpages are dynamic. There are now competing stacks of Javascript out there. Now, each document is a programmable thing – almost a computer in itself.

Teach kids that a computer isn’t just box, but it’s anything you can make it. It just doesn’t run programs, but it’s something you can make do anything. Don’t just teach kids to use MS Word, but tech them computer science and tell them that the “box” can do anything you make it do.

Platforms are build so that they can work with peers. Things need to be modular so that others can build on top of it.

Threats
Will a packet be delivered? Are providers doing inspection of these packets and not delivering them? The data being carried in these packets can be stored and saved so they know what you’re looking at for various reasons. Spying and blocking and disconnecting shouldn’t be able to be done by anyone (companies or government). Our democracy relies on the internet being open. Build systems that are open and neutral.

How to Rank Better in Google and Bing

Danny Sullivan – Search Engine Lane
Matt Cutts – Google
Duane Forrester – Bing

Great video explaining in simple language what SEO is:
Search Engine Optimization by Common Common Craft
Bing Webmaster Tools
Google SEO Starter Guide

Google and Bing really try to do the right thing and not promote “bad” companies, but it is a hard thing to determine sometimes. The Decormyeyes.com guy was not helped by negative reviews.

Take a look at the cached version of the page in google or bing to see what the bots see. There is also a tool in google webmaster tools to see what the bots saw.

301 redirects do work – the fewer you have the better.

Go to the side of your “dirty” competitors terms, and you’ll make it eventually.

How are press releases handled in search engines? They haven’t been trusted since 2006. The value of a press release is to convince a newspaper to run with it… NOT to get search ranking.

Schema.org: Structured data markup that will help search engines organize your content. They don’t necessarily increase ranking, but helps the search engine know what they are seeing. This works for different types of content. Data highlighter can make this easier than creating the xml markup.

Storytelling in the age of the tablet

Dr. Mario R. Garcia
Founder/CEO, Garcia Media

How do we adapt to change? Change is one of the most difficult things to deal with.

Media Quartet

  • Mobile (lean forward)
  • Online (lean forward)
  • Print (lean back)
  • Tablet (lean back)

Show your readers everything, that it is available across all platforms.

News is broken on mobile: twitter, mobile web, etc.
On election night most of the visitors came from mobile.
Mobile editions are going to be very important. Don’t just feed the mobile from the other platforms, but make a mobile-specific edition.

What features make an ideal tablet app?

  • Currated Content
  • Cut down the buckets of content

 

Design for the eye, but also the brain and the finger.
Make the finger happy – give them pop-up moments. Make the finger happy and give it something to do. Hook photos to videos or interactive content.

Design for the tablet by laying it all out and figuring out where the pop-up moments are. There are NO page numbers. Look for places to add interaction.
The first 10 seconds are very important.
People prefer to navigate through images instead headlines.
Photos and video do very well in tablet editions.
Tablet users prefer to read tablet editions (lean back) while relaxing in the evening (mobile/phone use is during the day).
Basic tablet edition is a PDF, better yet is a curated edition specifically for a tablet.
Do a tablet edition in a workshop setting with everyone there concentrating on:

  • Storytelling
  • Pop-ups
  • Navigation
  • Look and Feel

Poynter EyeTrack: Tablet Research

 

South by Southwest Interactive 2013

March is once again upon us, so that means it is time for another South by Southwest Interactive conference in Austin, Tx. I will be collecting my notes once again on this blog (category SXSW) as well as on my SXSW sub-blog (sxsw.techory.com).

20130308-131900.jpg

Scheduled March 8-12, the 2013 SXSW® Interactive Festival will feature five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders, the SXSW Trade Show and an unbeatable lineup of special programs showcasing the best new digital works, video games and innovative ideas the international community has to offer. Join us for the most energetic, inspiring and creative event of the year.

Chipmunks Slowed to Actual Speed

Christmas has passed, but I guess it is still technically the holiday season. I ran across this great video of the Chipmunks “Christmas Time is Here” song slowed down. You can hear what the chipmunk voice actors in the song actually sounded like (even though Dave sounds like the devil).

2012 Holiday Gift Guides

Another year has come and gone. We are quickly approaching Black Friday and then the more recently coined Cyber Monday, so that means it is time again for my list of holiday geek gift guides. I started putting this list together quite a few years back to help me find gifts for my friends and family. Since I like general geekery, most of these lists have a technology or gadget slant to them, but there are a handful that work for more general gift giving. As usual, I will keep this list up to date as I run across more. If you know of any that I have missed, leave me a comment and I’ll make sure to get it added.

(Guides from previous years: 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004)

Desktop Images from Desktoppr

I like to keep my desktop fresh looking and will rotate a new desktop wallpaper image in every month or so. I’m always on the lookout for good sites to find desktop images, and have been collected a few of them over the years. As I was looking for some new images, I ran across a cool site for desktops that has a really nice bonus feature. The site is called Desktoppr. Like many desktop/wallpaper sites it provides high-quality user submitted images. The thing that makes this site stand out is that is automatically syncs your desktop image choices to Dropbox, so you can go through and pick out what you like, and like magic, it is delivered to your computer where you can point your OS at it to change them automatically.

Desktoppr is a new site, and is still in beta, but I didn’t have any problems finding a beta account invite. You can sign up on their site, or just do a little digging to find a beta invite. If you like desktop images, Desktoppr has a lot of nice once to choose from, and they make it really easy to grab them and use them on your computer.

Eraser Makes New Chalk Out of Chalk Dust

I don’t know if this would be categorized as tech or not, but it’s really really cool. Designers Yonggu Do and Eunha Seo have created a concept for a chalkboard erasure that turns the dust that is erases into new pieces of chalk.

Chalkeeper is a very innovative way to contain chalk dust (which causes allergic reaction in many children) and reuse it. It is basically a duster that erases chalk from the blackboard and absorbs it into the system. When enough dust is collected, it molds it back to a piece of chalk….kinda like a never ending chalk! Clever!

With whiteboards everywhere now, maybe this doesn’t matter, but it’s still a pretty innovative concept.

Chalkeeper

Source: From Dust to No-Dust

Tower Defense in Google Maps

Do you really enjoy Tower Defense games? Have you always wished that you could play Tower Defense in your own back yard? Well, wish no more. MapsTD hooks the Tower Defense you know and love to Google Maps (with a fun 8-bit design). You can put in your zip code and protect your neighborhood from the evil invaders trying to get in.

Maps TD in Iowa City

Maps TD in Iowa City

Give it a try in your neighborhood!