Flash Gaming Technology – Notes from Lee Brimelow’s Adobe Presentation

Here are my notes on the presentation from Lee Brimelow of Adobe at the Atlanta Adobe Users Group Meeting: http://www.meetup.com/Adobe-User-Group-of-Atlanta/events/56200162/

What is flash for? Doing things the browser can’t! If you can use HTML5 then do it. Learn about it and learn the capabilities and know when to use what tool and when they are appropriate. It might not be easy, but it is where the industry is moving, don’t hide from it! If you want to do things that are to advanced for the current standards and browsers, then flash is most likely where you need to be. Adobe will always position Flash to be ahead of what is possible with browsers.

While you can do some gaming in browsers today, flash is now positioned to be the best solution for game development. It even can compile to native apps for ios and many successful apps have done so. Adobe has put in a site to showcase these games at: http://gaming.adobe.com

Adobe has a new partnership with unity. See example game: Angry bots.

Console sales are declining. We have so many other outlets to game: browsers, social, mobile devices… Soon professional games will be via Facebook and browsers.

Facebook angry birds game built in flash using stage 3D.

New gaming features:
Mouse lock.
Right and middle click events.
Concurrency, multi threading for player. Yo will not lock up with intense calculations.
Native extension Burls and extensions.

Sprite sheet exporter!
Create js exporter, via Grant Skinner
Html 5 export to canvas a vector art.


11.3 – latest flash player
full screen keyboard input.
Background auto updates.
Audio streaming via net stream.
Improvements for low latency audio.
Stage 3D progressive texture streaming.
Lzma compression sort door byte array.
Native bitmap encoding to png and jpg.
Bitmap data draw with quality
Frame labels.

Air specific
USB debugging for ios
Native ios simulator support
Enhanced background support for ios
Android 4 stylus support
Mac app store support

Dolores, upcoming updates
As workers
Advanced profiling
Better sort for hardware accelerated video cards

Refactorizing code base
Work on as virtual machine
Many action script language updates: stringent static typing as default, hardware oriented numeric types, type inference…

Flash Roadmap Update – Notes from Mike Chambers’ Adobe presentation

Here are my notes on the presentation from Mike Chambers of Adobe at the Atlanta Adobe Users Group Meeting: http://www.meetup.com/Adobe-User-Group-of-Atlanta/events/56200162/

Honestly, the announcement from Nov was handled horribly, it was a mess. Adobe has learned a lot and there have been many changes since then to keep this from happening again. They are really pushing transparency and have begun publishing white papers that explain the flash roadmap and explain plans and commitments.

These white papers put out by Adobe is definitive resource for flash. http://www.adobe.com/go/flashplatform_whitepapers

Flash runtimes is one shared core player. Flash player and adobe air both share same core.

Flash has filled many niches: animation, video, applications, games, rich media, art (Flash as an expressive medium).

While none of these functions are going anywhere, HTML5 is bringing a lot of this capability to browsers natively.

Adobe will now focus on advanced video and gaming in Flash as they are the areas that aren’t possible in web standards.

Introducing Premium features – set of features in API available for licensing. Only example for now is Stage3D used in conjunction with domainMemory API.

“I’m doing this for the love of flash, everyone else is doing it for the money” – Mike Chambers

The funding for the flash player is contradictory since more tools to publish to flash player have come out, it draws resources and funding away from flash player. This revenue sharing model allows for the player to remain funded in the current flash ecosystem.

Linux: Ppapi = pepper codename for browser plugin API which will let the player do it’s thing rather than worry about browser and OS. Working with google chrome on Linux already.

Windows 8: working closely with Microsoft to have support for flash player and air on Windows 8.

All updates will be added to the white paper (link above) along with the 2 year roadmap.

Thanks for visiting ATL and working on making this well understood and making Flash even better. I’m Always a fan of using flash when it’s the right tool for the job.

An Event Apart Notes: Ethan Marcotte, Responsive Web Design

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:
crush and lovely
unitedpixelworkers.com – very big and touch friendly navigation
nd.edu – notre dame
university of tennessee
the boston globe

Why go responsive?
“offer high quality with lower maintenance”
http://couchable.co/blog/post/a-responsive-design-workflow – don’t

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.
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

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

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.

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


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 }

Golden Grid system.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.

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
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.

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).

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?
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

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/
module in css iin progress.

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.

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!
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.

Start with the smallest part

Advanced Layouts
Negative margins to break out of the grid


CSS3 – the waiting game
Multiple background images

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)

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
trentwalton.com/ – “Some people’s brains I wish I had” – Ethan talking about Trent Walton

Progressive Enhancements are backwards thinking to graceful degradation, start simple and build up with enhancements.

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

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:

WOW, what a day! On to implementation…

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

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

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.

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.

An Event Apart Notes: Luke Wroblewski, Mobile to the Future

MASS MEDIA (in waves)
Print, Recordings, Cinema, Radio, Television, Internet, Mobile

Mobile is the new Mass Media

It certainly is mass and massive. More mobile devices (by far) every day than babies born on the planet. Mobile devices are eating into our personal computing shares.

New waves of mobile media eat all previous media waves. Mobile has indeed eaten all previous forms.

A new form of media always introduces new features or characteristics! Always on, portable, digital, social, augmented reality… the list goes on.

We have to recognize that the mobile is not a desktop. Our first inclinations are to copy what we did before (in the last wave). It takes a while to shed old paradigms.

StumbleUpon has been huge on mobile (as well as Kayak). They are doing a complete relaunch based on what they’ve learned on mobile.

Take what we know on the desktop web (today) and adapt it and optimize it for the mobile (today) and move forward (tomorrow).


passwords – forgotten passwords are rarely shown on mobile login pages.
Don’t remove things that are critical.
Use input and types and attributes. (autocapitalize, autocomplete)
show passwords – “Masking passwords doesn’t even increase security, but it does cost you business due to login failures.” -Jakob Nielsen
input masks
save passwords and let users login without a password (use single sign-on via: facebook, twitter…)

Set default to smarter option (like organ donors).

Adapt and optimize what we were doing yesterday and apply it to today. We can even make these things apply to yesterday!

Think to tomorrow: touch gestures, facial recognition, sms authentication
Step back and think about problems we’ve already solved. But use new techniques that have evolved since we’ve come up with the standard solutions we are regurgitation constantly without rethinking the problem. We can do much better now, but we’re so used to throwing the same solution at the same problem there is no more thinking about it. We don’t need to inherit the same issues we already have, let’s solve them by rethinking the original solution.

Why bother?
This new mobile mass media is always on, always on them and available at point of inspiration!


3 of 4 carts were abandoned in 2011!
We should reduce effort:
Removing unnecessary questions
Keep people on the keyboard, combine fields (first name + last name = full name)
Hide irrelevant controls (until they need them)
Set input types( type=tel ) use input masks, ignore bad characters. Credit card use input-type=tel for the numberpad.
Keep people on their keys

Check out square to see the improved cc fields.

Progressive Enhancements – use what best fits the device that’s being used.

Checkout for the futures:
Contacts API, Location Detection, Self-checkout and Scanning

Korean grocery shopping in the subway! Tesco, scan qr codes and groceries are delivered automatically.

Mobile is a massive new medium! It forces us to adapt and optimize our solutions and moves us towards the future. We should push for better device apis! Let’s agitate the blockers and the bug guys: Apple and Google. PhoneGap lets us do all these things already using existing standards! Tomorrow Today.

An Event Apart Notes: Josh Clark, Buttons are a Hack

Mobile and touch should be revolutionizing design and user experience.

We don’t want to touch a tiny link or button. Back button is just stupid. Fitz’s Law, make things fat proximal targets for easy touching.

People are lazy, let’s as designers LET people be lazy! Maybe even use the whole screen as your control.

Eliminate buttons if we can! Buttons aren’t evil, they just aren’t as relevant for touch. Gestures are the keyboard shortcuts of touch!

Big screens invite big gestures, don’t make people hit little specific buttons or links. Buttons are a HACK. Light switches are not intuitive, they are a learned behavior, an inspired hack introducing a middle man.

We don’t need an abstraction layer for uI controls. We can directly manipulate the object by touch.

The new Windows OS is leaning this way! Twitter iPad app is doing this. Rather than a back button or a UI, we just swipe our way through content.

The web sucks as coding gestures and is like the red-headed stepchild of interaction design. It trails behind proprietary technology. Flash helps bring standards, but we’re still waiting. But we can speed that process and push standards and agitating for more and better. We need to push for support for gestures (for now all we have is touchstart, touchmove and touchend: which aren’t very helpful and not widely supported).

The gesture conventions are tap and swipe. Plus there’s the emulator layer of the browser. As a community we need to figure out together what conventions there are and how to best apply them. It’s not easy to go beyone simple taps and swipes. jQuery mobile and Sencha touch are libraries that give us more events – these are really tuned with web-kit and are pretty big frameworks meant for creating html5 apps along the lines of PhoneGap. Touchy.js – more lightweight, but there are still some big holes.

http://bit.ly/ikeatouch – Direct interaction with the content itself.
http://bit.ly/ios-clear – Playing with objects as the interface.
Ipad App Touchup – lets you paint patters on images, but rather than adjusting brush size you adjust canvas size and the brush is always the size of your finger.

For mobile: clarity trumps density. The more features and controls we have, the more things get in the way. The more power we give people sometimes the more paralyzed they become. Swiss army giant pocket knife.

Gestures are invisible. So how do you find out (or instruct) about these controls – Finding what you can’t see. Create realistic user interfaces, with a little help, people will learn to work interfaces. Nearly everything has to be learned or taught: snooze alarm, qwerty keyboard. We always start with a physical reference. Social signifiers or cultural: who knows the salt vs pepper shakers? The only thing that matters is what the person that filled them thinks! Cut out the middle men and let the content be the control. Clear salt and pepper shakers! Let people interact with the content and not the buttons.

The medium is the message, The message is the medium.

Give obvious visual cues. Instructions are making things harder, nobody reads the manual!
How to use a magazine
How to use a book

It needs to become intuitive. Nature doesn’t have instructions, look at a toddler, we figure things out as we go. Use a book metaphor, but don’t break conventions. EMBRACE the metaphor! Don’t make me tap buttons if the interface makes me think otherwise. There is a digital advantage to random access navigation.

Toddlers are learning how to use iPads faster than adults. We’ve learned incorrect gestures and are not used to thinking about them. Approach apps and designs as we’re building them for children. Video games are great at teaching you how to use the interface, not with a manual, but by drawing you through the experience by:

  • coaching (with active discovery) – we learn by doing. Things that move can perhaps be moved by users.
  • leveling up – when you learn something, it moves on, demonstrate gradual progressive controls
  • power ups – efficiencies in the hands of experts. keyboard shortcuts. achievement based unlock tools by learning

We should be generously talking to each other about how were trying to use our gestures. It’s exciting to be involved in inventing the futures of how we’ll be using tools, be involved in the discussion. Have empathy for the users.

An Event Apart Notes: Nicole Sullivan, Our Best Practices are Killing Us

Grep to for analyze css.

CSS duplication is a web-wide problem.

Started helping facebook optimize thier site and they had 1.9MB of css loading. The same color showing up hundreds of times. Many many color statements and declarations.

  • !important declarations get dangerous. Sites found to have over 500 !important declarations!
  • float is a serious problem when there are a lot of them. It’s better to use some sort of abstraction rather than floating everything for layout.
  • font-size: there should not be a need for more than half a dozen size declarations, use abstraction!

insanity: doing the same thing over and over and expecting different results.

We all have this problem of duplication. CSS (like JS) will let you do anything you want (even if it’s stupid). But we don’t have to do stupid things!

New Best practices

  • Pixels for fonts: became frowned on with ie6, but all modern browsers use pixels, ems and percentages just fine. Why not avoid percentage and ems because they have significant drawbacks and compounding effects.
  • Adding extra syntax/markup: separations of concerns – make functionality overlap as little as possible. Solve one problem at a time and use extra mark-up judiciously (don’t go nuts with dives, but also don’t strip out too much and introduce bugs).
  • Semantics: class names and ids are not usually read by end users, so let’s make sure class names and ids work well for developers. More is not always better. Create abstractions that solve problems one time. Don’t couple CSS too tightly to the content or the display. DRY (Don’t Repeat Yourself – Every piece of knowledge must have a single, unambiguous, authoritative representation within a system).
    Media block (like a SLAT in dan’s talk). Separate structure from chrome (design). May have some extra css class names or divs, but it will cut html and css overall.
  • Classitis: use specificity to accurately target elements. Class order in attribute doesn’t matter, but order in the actually cascade. Specificity grows over time and you end up coding via firebug. !important is like nuclear trump in CSS. Avoid the nulcear option: keep specificity low: avoid IDs, inline styles, !important, and very complex selectors. Apply classes to the element we are trying to affect (not to a parent node). Use class “h6” along with h3 elements for visual and code semantics to play nicely.

Great developers can build amazing things if we move worst-best practices out of our way.

oocss – join the oocss google group

An Event Apart Notes: Eric Meyer, The Future of CSS

Cormorant trained to fish for the fishermen. The fishermen tie bands around the birds necks that are. Fishermen fish at night, using lamps they attract bugs, which attract fish, and the cormorant get to fish but cant swallow them and the fishermen take the fish.

Browser vendors are promising us new CSS tools, but don’t actually let us use them. It’s a big tease! Cormorinths are either fish in the hand, diving for fish or still sitting on the shore. A lot of really cool stuff we’ve just been teased with and told we can’t quite use yet.

(SASS and LESS will any and all prefixes.)

  • Transforms: Go for them right now! Widely supported and mainly just for decorations.
  • Transitions: Go for them now! Basically event driven, if the browser doesn’t support them they don’t work and no one needs to know. No reason not to use this stuff, it’s decoration.
  • Animations: These have some issues still. Animations are constant, and the problem is only webkit supported them until recently but then the working group took it went back to the drawing board. Still in production.
  • Multicolumn: Not fully supported yet. Some browsers support the main idea, but none of the details like gutters.
  • Grid Layout: Hang elements off of specified grid lines for layout. Only supported by IE10, but not bug free…
  • Exclusions: define an area that content will flow around. Not locked to rectangular objects (can use alpha channels or svg shapes to define areas).
  • Regions: Define text-flow from one area to another. Requires document structures we are not used to, using empty structure for the browser to implement.
  • Combinations: Using all or any of these elements together.
  • Flexible Boxes: If you have a use case, then go for it. But they are going to be changing the spec for it. It will be a different spec though, so it shouldn’t break.
  • Scoped CSS: using a style but limiting it’s scope to the parent element that imports it.
  • Calc: Really nice, but for now rely on preprocessors. Drawback is that it’s only on first render, if element is updated via scripting
  • Masks, text-stroke, box-reflection: webkit only! And not looking like they will spread.
  • Paged Media:
  • Hyphenation: use now with a good polyfill. (Polyfill – spackeling paste to fill in cracks and crevices – nothing to do with polygons and fills)
  • Gradients: Borderline shore and dive… Really cool, webkit and gecko have totally different syntaxes (to the degree of english and chinese), fun to look at, but a torture to declare. Calling it now, gradients will be web 3.0, rounded-corders was 2.0
  • Border Image: border is defined by slicing an image into sprites and applying it to the border (and even background image). It is supported in a number of browsers though, so use it but don’t depend absolutely on it.
  • Border-radius: fish! Use now and go crazy with it.
  • Web fonts: use it now, but use it wisely (refer to Jake’s talk).

But what can we do about it? Can we prod the working group to move things along.

First thing to do is experiment with the properties! You spread the cool effects, second you find crazy unexpected bugs. Use html5please.us as a guide (even though he disarees with some of their points and they talk about css3, js and stuff as if it is html5). Browsersupport.net documents which browsers and versions of those browsers support css3 properties. CSS3.info (subscribe to the rss to be kept in the loop, as well as the css3 working group). Even subscribe to the [email protected] emails list (and f you’re like me, I know I am, set up a filter and archive it and then poke into it when you have some time. Take it even further and join the w3c with a reduced membership fee for startups (advantage is that you can send a representative to the working group). Also, blog about it! Document what you discover, write it up and publish it, tell others what you’ve written maybe even in the mailing list. CSS samurai documented top 10 failings in each browser and each one got fixed eventually.

We didn’t get here all at once, it’s been here a little there a little. But we are progressing and eventually will get somewhere good. Every day, week and month more support is coming.

An Event Apart Notes: Ethan Marcotte, Rolling Up Our Responsive Sleeves

Henry Adams (Descendant of 2 presidents: great-grandson to John Adams and grandson to John Quincy Adams). He lived between the civil war and world war 1. He witnessed the industrial revolution.

Chaos was the law of nature, Order was the dream of man

Samuel Johnson – funniest man in the 17th Century…

Responsive Design:
1. Flexible of fluid grid
2. Flexible images and media
3. Media Queries

“Solve the parts, not the whole problem.” – Mr Kaizer

1. Layout
2. Staring Small
3. Advertising
4. Media Queries

target / context = result

Bootstrap and dribbble and great discontent star big and go small.

We should start small and go big – Yiibu

Site > Structure > Skin > Services > Space Plan > Stuff

Slow constants quick, slow controls quick – Stewart Brad – How Buildings Learn.

Trent Walton – “trade control in photoshop for a network of context” in Responsive designs

Layout is most susceptible to change

Width, hierarchy, density, interaction.

Don’t just hide content on mobile – simplify before you suppress.

Move nav into footer? Link to it in the header

We’ve been too focused on layout and columns and grids.

paul robert lloyd.com
Ads: Keep relative position but have it adapt it’s position. document.write is not friendly. Responsive Advertising: Mark Boulton and Roger Black.

Images and Media:
Images with width: 100%
Media set via javascript? No we don’t need to, let’s use css only, it’s more fluid! Althoug it does require a bit of un-semantic mark-up.
Width x Height = Aspect Ratio
Wrap media in div. Give container a padding-top matching the aspect ratio percentage, position rellative. Give media inside position absolute and width and height both 100%!

BBC – responsivenews.com

Bandwidth is a blind spot. and now extra complicated with image prefetching.

categorizr and craig mod – bibliotype
– Give users choice/options to view content they aer interested in.

Art is Messy – Andrew Stanton, Pixar

Many hands make light work