FOWA 2011

Future of Web Apps

Future of Web Applications – Day 1

Great! I was able to participate in another FOWA, and this year the content was so *juicy*! Check this year’s schedule if you wish, and my notes are below…

Get excited and build things!

by Christian Heilmann – Mozilla

Over the last few years the internet has taken over. It is not a geek thing or something for university researchers. It is in our homes, on our mobile phones, on our tablets and even in our game consoles and TV sets. With that much exposure comes a lot of advertising and everybody wants a slice of its fame. The trick to make the best out of it is to jump right into it and not fall for the siren song of advertisers telling you that their product is what makes it work for you. All the web technologies that deliver the magic are open and have been proven for years. It is up to you to grab them, shake the box and find out how they work. In this session Chris Heilmann of Mozilla shows how being open and being interested helped his career and how you can find talent, build cool products and make a living through being excited and interested in the tech behind the media.

Breaking the lock:

  • Web Intents
  • Boot to Gecko
  • Open Web Apps
  • Web api
  • Browser ID
  • Fullscreen / notification / context menus

Web apis: dialer, sms, telephony and msg api; address book: contaccts api; clock, calculator; camera api; gallery: filesystem api; settings: device status api, settings api; games: accelerometer mouse lock api;

Mozilla has an open framework of apps, so it will show an apps bar on firefox, opens in fullscreen, utilises touches, etc (if on tablets). All that is needed is a metatag on the page saying that it has a different view (in this case an app) and firefox (and/or other browsers) will know there is an app available. Links become integrated: if you have a NY times app and twitter app installed, if a NYtimes link is clicked on Twitter, it wouldn’t open the browser window, it will open the NYtimes app since it is already installed (streamlined look).

MUST check:

We’re in a crisis, game: some article about it:

BEAUTIFULLY done Slides at:

Article: Animating with javascript: from setInterval to requestAnimationFrame

Sprite Sheet animation with CSS3 using the steps() feature.

What’s Next for JavaScript and the Web Platform

by Alex Russell – Google

Lots of new features are landing in the web — WebGL, WebAudio, Databases, etc. — but lowly old JavaScript, HTML, CSS, and DOM are all set to change dramatically in the near future too. Data binding, a true component model, and a better language for using them from are all in the cards, and they’ll change everything about the way you build apps. This talk examines what to expect, when, and why from
the perspective of the Web Platform team inside the Chrome project.

Frameworks and compilers are Plan B
Say what you must vs say what you mean

Alex explaining a bit about CSS Variables and CSS Mixings, CSS nesting/hierarchy (very good so you don’t have to repeat and write the class name over and over again… just use indentation). Mentioned about Shadow DOM and use of template tag.

The Future of Commerce and the Opportunity for Developers

by Neal Sample – X.commerce

The commerce landscape is undergoing massive change driven by consumers adopting disruptive social, mobile, digital and local technologies and services. Learn why we are building the X.commerce platform and how developers and merchants can leverage it to profitably meet this increasing demand and grow their business. Get details of how the platform is built, the opportunities it presents and how to engage, innovate and profit with us.

Why use a platform for commerce?
For the Merchant is easy to adopt new capabilities and at low switching costs. For the developer there are no barriers to entry, easy on-boarding of customers.
What makes a good commerce platform?
Firstly, should be robust, secure and scalable; then should have ability to change, be autonomous and modular; finally should be rich platform with consistent interfaces and developer-friendly! And now a new requirement: to be cloud ready.

Neal introduces x.commerce ‘Fabric’
It is a type of ‘broker’ that manages the data exchange and interactions betweaen all capabilities in x.commerce
Benefits: connect once to access all capabilities; innovate and customise in almost any language; seamless operation, not costly point-to-point integration.
It embraces opensource.

Merchant Awesomeness
Reach more customers
Ease of use for time-to-market
Future proof – built on open technologies
Insights through data and analysis
Trusted applications and developers

Developer Awesomeness
Reach more merchants
Ease of development with standards and hosting
Better monetisation through technology and services distribution
Relevant data for targeting and personalisation


Spine, a Lightweight Framework for building JavaScript Web Apps

by Alex MacCaw

This powerful framework is only 2K but it gives you MVC structure for your JS app. Learn how to use it for your projects.

Spine, MVC Javascript framework

He mentioned that would like to be sending email but not having the UI blocked (I don’t know if Spine does asynchronous that he just mentioned, but I found the concept interesting…)

Spine docs apparently is REALLY good:

Spine gives us:

  • classes and modules (good if you are just writing pure javascript since it doesn’t have classes and modules
  • routing
  • ajax
  • dependency manager (Hem)

Example for fowa (but check spinejs examples too)

Also mobile release:


Found these after presentation, might be of help:

Responsive Web Apps

by Nick Pettit

Learn how to make your app look great on any mobile devices, while also delivering a more focused user experience.

Main elements: fluid grids, fluid images, media queries

  • Fluid grid formula: target/content = result
  • Fluid images: img{max-width:100%;}
  • Media queries: @media screen and (min-width: 320px) { //css here } – adjust layout based on the width of the browser

Where Nick check design patterns/inspiration: Yahoo! Design Pattern Library

Think about mobile first, adjust the scale, adjust the layout, make it vertical, use a visual, make it ‘responsive-ish’ (adaptive design instead of responsive, usually work on existing complicated websites) and his favourite: “just get rid of it”.

Check Responsive Data Tables

Slides for this presentation here:

This App is 1% Finished: How to Rethink and Rewrite

by Bob Baldwin – Facebook

No matter how great your app is, you need to always be looking to make it better. Stop being complacent, put all ideas back on the table, and start building the next version. If you can start by believing you’re only 1% finished building your app, you’ll be more open to making bold changes that’ll push your app forward. I will share advice for orienting team discussion and how to recognize true product progress, drawing from my experience rewriting Facebook Groups, Questions, and Events.

If your app is 1% complete now, what would be the 100%? Be humble about your past/recent achievements.

Think about your challenges
Dislike your own app (find problems!)

Build extreme prototypes – then you’ll find the extremities; find the edges of what works (example of facepiles – right bar with friends chat and updates, etc.)

Facebook team debate about the names of things, for example, should Groups be named groups or something else? Discussion about button positions, colouring, states, text, etc.

Focus on impactful features (example of ‘join a group’, ‘invite a friend’ which generated over-large groups. Ended up only with ‘ask to join the group’, ‘add friend’ – pay attention to the words).

Focus on Key interactions. Choose meaningful defaults.

Building HTML5 Games

by Giorgio Sardo – Microsoft

Tired of playing Angry Birds, Farmville, or Pacman? Come learn how you can build the next cool game in HTML5. Expect code, best practices, experience from the field and lot of fun!

Games on html5 is not only about canvas… there is css, svg and other techniques…

These demos were just a-m-a-z-i-n-g:

Multi-touch experience

Today: mousedown, mouseup, mousemove
Webkit model: tourchstart, TouchMove, TouchEnd, TouchEnter, TouchLeave
Microsoft: multitouch doesn’t matter how many fingers

How to play from an airplane?
App Cache

10 Tips for Web App Success and Profitability

by Dave McClure – 500 Startups

Launching a web app is fraught with danger, so learn 10 tips that will help you avoid the Dead Pool.

How to pitch to a VC

Concentrate on pitching your problem (not your solution)
Read Geoffrey Miller books:

The Elevator Pitch: only 30 seconds!, Use short, simple memorable words (what, how, why). Example: 3 key workds or phrases. No expert jargons, just KISS (Google it if you don’t know it).

The Problem: what is the problem? make it obvious! Who has it? Make emotional contact. Explain how painful the problem is… Painkiller not vitamin. Check blog post “Your solution is not my problem“.

Your Solution: great products and companies do 1 or more of these things: sex, money, power – and how your solution makes your customer happy and how is unique, if it is not unique change the way you pitch to get that uniqueness (example: it is different from company X which allows “left handed mothers to swim with their kids” – is not unique but found a niche)

The money shot: demo, screen shots, video; PRACTICE!, if demo fails have a backup (screenshots, local video, interpretive dance). Expect to be interrupted (if they interrupt: they care! it is good, answer the question first, only then go back to your presentation)

Market Size: bigger is better. Top down = someone else reported it (Forrester, Gartner, your uncle); Bottom up = you do it… calculate users/usage/revenue in money.

Business Model: describe top 1-2 sources of revenue, prioritize by size or potential (too many sources: you don’t know much); common revenue models: direct – ecommerce, subscription, digital goods; indirect – advertising.

Proprietary Technology/Expertise: VCs ‘really’ like unfair advantages (lead, experience?)

Competition: Are you Better or Different? – list ALL your competitors!!!

Marketing Plan: how to get customers and distribution? there are lots of channels and decisions, choose a few: PR, contests, direct marketing, radio/tv/print, telemarketing, emil, seo/sem, blogs/bloggers, viral/referral, affilite/cpa, widgets/apps.

3 things that matter / to measure:

  1. volume
  2. cost
  3. conversion

Team: people that get VCs hot: geeks (with deep tech experience), entrepreneurs (who sold companies), sales/marketing (who bring customers money).

Money: How much money (3 budgets: sm, md, lg). What will you do with the capital? (new hires to buid product; mkt & sales to get customers more money; ops & infrastructure to scale up)

Presentation at:

Check last slide of presentation for Additional Resources!!!

Tips posted by @barrysmyth on Twitter:

Tip 1 – Pitch the problem not the solution
Tip 2 – Read Geoffrey Miller (The Mating Mind and Spent — sexual selection and consumerism)
Tip 3 – The Elevator Pitch: Keep it Simple. Think 2 or 3 key phrases. No jargon. Have fun when you pitch … its infectous
Tip 4 – The Problem: Make it Obvious. Connect and create a shared context with your listener. Check out
Tip 4a – The Problem: how painful is the problem = market size
Tip 5 – The Solution: how does solution tap into powerful emotional needs that every human being has? How does it make people happy?
Tip 6 – Give Great Demo and have a backup as a fallback (video, screenshots).
Tip 7 – When you get interrupted, LISTEN you have their ATTENTION! Use it. Don’t just revert to the presentation.
Tip 8 – Market Size: Bigger is Better (generally). Top-down (via Forrester, Gartner etc) vs bottom-up (usersxusagexrevenue)
Tip 9 – The Business Model: Keep it simple and focus on top 1-3 sources of revenue. Too many options means you don’t know.
Tip 10 – Proprietary Technology: VCs like unfair advantages. What’s yours? (IP, market lead, team etc)
Tip 10a – Check out:
Tip 11 – Competition: List competitors & show how your are better and/or different. Think carefully about comparison axes to win.
Tip 12 – Marketing Plan: How will you get customers & distribution. Focus on few channels. Pay attention to volume, cost & conversion.
Tip 13 – The Team: Geeks, entrepreneurs, sa;es/marketing people get VCs hot. Think Hustlers, Hackers, Designers.
Tip 14 – Money & Milestones: Focus on just enough capital to get you to a value-creating milestone. Build in a 20-50% cushion.
Tip 14a – Money & Milestones – focus on how you will use the investment (build product, get customers, scale-up)

Future of Web Applications – Day 2

How to pitch your app and get big coverage

by MG Siegler – TechCrunch

The number one question I get asked is for advice as to how to pitch a tech blogger about a app/startup/idea. The answer is fairly complicated since every blogger is different. So instead I’ll proceed with a 40 minute lecture on the matter. And yes, I’ll cover the embargo nonsense. In detail. With curse words.

First real rule: Build a great product.

Second rule: Know what you are pitching.

If you have to ‘go back to you on that question’ etc. it is not a good sign. If someone is pitching for you/your company they should do research, they should KNOW everything (or almost everything) about what they are pitching for.

The world has changed, remember who is your public. The blogs ‘rule the world’.

Press releases are for losers.

If you have a better connection or relationship with TechCrunch and other companies you would communicate first in different ways. Press releases are welcome for the more general publicists, if a press release was sent to him as the first point of communication would highly be ignored.

You should work with journalists, not shout at them.

If you must shout, then blog!

If you have something to say it, say it! Don’t push someone to write bad things about your competitor. If there is something that you don’t agree write yourself. (example: Steve Jobs getting frustrated with Flash).

The adage: no such thing as bad press.

It is true in majority of cases, especially for tech startups. It is a way to get your name ‘out there’ above the crowd.

Find your guy

Know who it is at that specific publication that will suit your interests and have specialty into what you need. Don’t direct emails to the general company, find a name….

Techcrunck doesn’t like to work with embargoes… there is always something happening and excuses were heard many times… “I hit the wrong button”, “Our timestamps are screwed up”. If you must deal with embargoes, stick with writers you absolutely trust. Otherwise, you burn a bridge. If you use more than one writer use different angles to your advantage.

If you launch your product with too many at once could be an overkill.

Again back to the golden rule: build a GREAT app.

One story is the kindling.
Your app is the fire.

kin·dling (kndlng)
n. Easily ignited material, such as dry sticks of wood, used to start a fire.

If you cannot do it personally, write an email adding some personality. Pictures and videos are your friend for this type of situation. Verboseness is your enemy. Be passionate!

If you get no response, try again, and again, and again. Don’t be discouraged, the company could be in a pile of emails, or the time is bad… doesn’t mean that the company is not interested.

Pitching in different ways… instagram, twitter DMs, IM, Facebook messengeTr, Quora, twitter itself.

Friend of a friend, the social filter could help to reach the person you need.

Keep the pitch short, sweet and to the point.

The magic word: “world exclusive!” exclusivity and full access to the story will have a bigger chance for the company to work with you.

The f*** off word: embargo

Best time to pitch: right before you launch your product. A few days before launch.


by Ryan Carson

The worldwide launch of YOUR new app covered by TechCrunch. If you want to launch your app, please email Louise

Great idea of having startups presenting their apps, giving the pitch and also getting feedback straight away from MG. – list of best of London, based on social sharing scores. – social network for creative writters, difficulty on how to become a writter, (started as enovella), they transform to the right formats, 70% of value passed to author, 30% held for maintenance of website, etc.
Key words on the site “write, discover, sell”
Site design is quite nice and I really liked the idea!!! – simple version control for designers.

Scrollable timeline so you could see the evolution of the design, you could download the PSD in any version. Really great app, just waiting to come out for Windows (yes, I use Windows, not Mac, for my designing… booo)

The Things of the Future: Putting People First

by Cennydd Bowles

Technology has, of course, changed the world – but its main power has been social, not commercial. Despite the best efforts of the industrial age, the general public now holds the cards. They can have any colour they like, including black. They can bring down newspapers, industries, and governments. They’re not going to take your shit any more.
So farewell and good riddance to “pile em high and sell em cheap”, saturation advertising, and consumption culture. It’s time to put people – and humanity – at the heart of business.

If you talked to people the way advertisers talk to people, they’d punch you in the face

The product of the future should be … more human.

Great example: Innocent fruit juice package example, message on the bottom of carton: “stop looking at my bottom”.
bad examples of packaging trying too hard.

Toasting bread, cool button that says “a bit more” so it is just a bit more of heat but not the whole cycle so you don’t have to wait and check if the toast is burning or not… maybe is not all that necessary but it gives a nice touch and it could address a problem for a large population that was heard.

The product of the future should… tackle wicked problems.

Weightbot – track your weight app

Things of the future should… cross channels.

Each channel needs to be fit for purpose, NOT a replication or duplication of experiences #crosschannel #servicedesign #fowa #ux @cennydd

… disrupt, not only differentiate

Example: loans online taking out the middle-man (banks)

… create genuine value

total value = business value x customer value

Try to explore the customer value, designers are good in bringing customer value.

…favour intangibles

Design-led business works!

Book: Undercover User Experience Design

You’re in the Cloud, Now What? – Getting the Most Out of Your Cloud Platform

by Steve Marx – Microsoft

“The cloud” promises scalability, reliability, and easy management, but actually getting those benefits goes beyond simply deciding to use the cloud. Learn what you should consider when choosing a cloud platform and designing your application. We’ll talk about how to build web applications that can start small and grow seamlessly, stay up no matter what, and serve a global audience.

Will talk about challenges and what should be considered.

Web app expectations – requirements: updated frequently, high performance, up all the time. (not only that but keep that while doing changes/updates)

More VMs != Availability
More VMs != Scalable (make sure they have same capabilities, shared state)

stateless compute + durable storage = scalable, available app

node.js app on Azure for #FOWA demo by @smarx – American/British English ‘translator’ –

iOS Accessibility – Why blind users love Apple

by Robin Christopherson – AbilityNet

Robin will demonstrate the amazing potential that iOS devices (and even more so their apps) have to change the lives of users with disabilities. Find out why a camera is so vital for blind users, and how apps that cost a few pence are replacing specialist bits of kit costing thousands of pounds.


How to find, hire and keep good technical talent

by Chris Lea – Media Temple

One of the most challenging aspects of operating a startup is assembling a team that’s truly able to build great products. Technical talent is scarce, demand is enormous, and the stakes are incredibly high. In this quick talk, I’ll discuss some tactics that will help you find, hire, and keep the kinds of people that will allow you to execute your company’s vision.

Building and maintaining the right team is essential. If you have agreat team, building a great product is almost an afterthought.

Find them!
People are not searching for jobs, jobs are searching for them… Infiltrate the communities, talk to them, find the technologies you need. Universities can be great targets.
Infiltrate relevant technical communities. Use IRC channels & talk to people. Scour & contribute to mailing lists. Attend meetups.

Have a tech blog. It is also a recruiting tool. Make sure you have a good referral program for existing employees.

Hire them!
Can they do the job? do they fit in? Culture is critically important. Would you hang out away from the office? ask existing employees the same question, if the answer isn’t yes, it’s NO.

Traits to look for: do their hobbies outside work involve ‘learning how stuff works?’, do they have any good war stories (big mistakes are good if they could turn around as positive), have they contribured to any open source projects? passionate enough to argue about? (about their tools, which text editor, workflow, etc.)

Keep them
Sunrise period (90 days?) to evaluate the person. What do you value about the job? (not only money), lifestyle freedom is a powerful motivator. This works if there are good communication patterns.

Allow workers to have a say on what they are building. Don’t let anyone be in the hero role, ever. Make sure they go on holidays, preferable away from the computer.

If your employees don’t use what they build, find out why and fix that!

Another post about this presentation at:

Better JS with CoffeeScript – 37 Signals

by Sam Stephenson – 37signals

Learn how to write cleaner and faster JavaScript with CoffeeScript. We’ll also cover where this is leading in the future.

CoffeScript is Beautiful & I never want to write plain javascript again

Hello World using Google Web Toolkit looks ugly! too many lines of code. Pyjamas (Google Web toolkit in Python) also ugly code… Then there is Objective-J better but bad documentation.

CoffeeScript is just javascript, but the good parts. It is shorter, more streamlined, no more var. runs anywhere, JSLint compliant.

10 Things I Love About CoffeeScript

  1. Function Syntax
  2. Significant Whitespace
  3. Bare Objects
  4. Comprehensions (borrowed from Python)
  5. Classes & Inheritance
  6. Bound Functions (built into the language)
  7. Conditionals
  8. Destructuring Assignment
  9. String Syntax

Slides for this session:

Note to self: learn CoffeeScript!!!

To Catch a Virus

by Barbara Macdonald – Willet Inc

Finished building your awesome new app and ready to take your market by storm? Get ready for the real hard part: getting users. It’s a challenge that engineering can’t solve but with the right planning, user growth can be incorporated directly into your core product. How? Viral loops.

Couldn’t participate of this session (was cuncurrent with CoffeeScript) but apparently was really good and the slides are here

The Future of CSS

by Hampton Catlin – Moovweb

CSS has changed very little in the last decade. Its feature set has remained roughly the same since the day it was introduced. In this talk, I’ll introduce you to Sass, a major upgrade to CSS that you can start using today in your projects to make your CSS styling far more awesome.

SASS is not dynamic, it compiles to css; not server-side, developer-side (generate the css on your machine then go to server).

3 steps: first Walk – then Jog – then Run.

Using it: sudo gem install sass sass –watch thefolder. Check SCOUT. Other implementations: Ruby, python, .net, php, django, etc.

It is great for describing colours, if we know a colour, for example #369, if we want a lighter blue than that we can specify with percentage…. color: (mycolour, 50%)

Check example on Sass site about mixin

Book: Pragmatic Guide to Sass – discount code: “FoWA2011” gives 25% off

Slides of this presentation:

Mobile Web Apps: Where Are We Headed?

by Ernesto Jimenez – Vodafone

In this session we’ll take a look at what’s the future of Mobile Web Apps. We’ll do an overview on the status of Mobile Web Applications, what are the main players and projects to keep an eye on and where we are going.

jQuery mobile, PhoneGap, working on better standards: geolocation, device orientation, media captures, contacts, calendar api, focus on delivering a good user experience, do not focus on one browser only, be responsive (not only in your designs, but also getting back to users’ feedback).

Node.js, Socket.IO and Express

by Jim Hoskins

Learn how to use this amazing trio to build powerful JavaScript apps

Socket IO

Node.js What the node.js has that other webserver doesn’t have?
Typical web server: receive request > secret sauce > send response. Could split in multiple requests to make it faster.
Sockets ‘stick around’
Evented I/O (solution that node is based upon).

An analogy: L1 cache would be like taking a paper from your desk (3 sec), L2 cache would be like putting a book on a shelf (14 sec), RAM would be equivalent to have a 4-min walk on the corridor to get a Twix bar.

Fast: L1 cache, L2 cache, RAM (synchronous)
Slow: HD, Network, Services/DB (callbacks)

Evented Web Server
Receive request > secret sauce (but release control to call back later) > receive request > secret sauce (again release control) > do some code > send response (to that first request) and so on…

Node.js projects:

Go Build Something!

Write better markup through writing better CSS

by Chris Coyier – Wufoo

Chris really closed FOWA2011 with golden keys… check examples on the presentation, they are great and many times self-explanatory. I couldn’t get my eyes and ears off the presentation to write notes, so just a reference and a little quote…

Use the semantic tags, don’t add more classes on the html code, use it on css!

And a post from Chris:


Other references:
Slides’ links:

Related FOWA posts:

Off-topic (well, not sooo much): Developers, programmers and tech companies on Twitter – and the search on #fowa:

DrupalCon – London

DrupalCon London 2011

What I thought/experienced/noted…

DrupalCon was really good, I participated on a great workshop and the sessions were in majority entertaining, informative and really good to learn new things or reinforce concepts already known. (Of course, in any conference there are a few exceptions… some boring sessions and some really bad presentations, but thankfully they were just a few.)

For my pleasant surprise and future reference, all the sessions were recorded, so you might also benefit checking each day tab at

QUICK UPDATE: The Drupal conference has around *60* videos here: – thanks Peter Robinson!

Advanced views

Presented by Johan Falk

Link to conference schedule of this course.

Main screencast from NodeOne website (before the course):
Read the following related to this course:

Blocks: you can click ‘show blocks’ and you can see them highlighted.

Interesting modules: token, transliteration, Pathauto, CTools, Views, Panels, References, Masquerade – be sure to read the description to know more!!!

Check: “display suite” for more panel and views configuration

Instructors: Johan Falk (Itangalo), Hagen Graf (hagen), Roel De Meester (demeester_roel).

Keynote – the state of Drupal

Presented by Dries Buytaert

Link to the keynote video

Drupal biggest opportunities: substituting legacy systems, IT cutting costs, mobile

Big vision: Flexibility, Scalability, Reach.

Competition: WordPress, Joomla, Sharepoint, TYPO3

The roll out of Drupal 8 from 7 will happen only if critical bugs are less than 15 and major bugs/tasks are less than 100. Trying to reduce thresholds to balance D7 and D8.

Drupal 8 initiative priorities: Native html5/css3, media/asset handling; usability ease of use; mobile support wysiwyg editor; better apis; configuration management; content import/export; content staging.

Dries Buytaert – @dries

The Path to a Mobile Drupal: Techniques, Tools and Failure

Presented by John Albin Wilkins

Link to the session video and description

Other Links:

Mobile the traditional way:

Responsive Web Design (Hicksdesign)
Check Hicksdesign website and scale the browser to see it working… notice the different rendering of images/paragraphs/divs, etc.
A list apart article: responsive web design
1. flexible grids
2.flexible images
3. CSS3 media queries

Adapttive Design – developed in response to Responsive Design.
1. CSS3 media queries
2. fixed layout sizes

Flexible grids:
use perentages to set grid sizes
.content{width:62.5%;} //5 grids
.sidebar{width: 37.5%;} //3 grids
percentages allow grid to grow/shrink with the screen size
eg (5 grids)/(8 grids) = 62.5%

Flexible images
use max-width to constrain images within the flexible grid.
img, embed, iframe, object, video{max-width:100%;}

CSS3 media queries
with css2 media types we could target different classes of devices: print, screen, handheld, all
with css3 media queries we target device capagilities
[type] and ([query])
all and (max-width: 768px)

.info Files (Drupal)
stylesheets[all][] = css/print.css — move your media types and queries inside your css files
@media all and (min-width:480px){
put all your style here;

Few (monica’s) links for inspiration:

Two types of breakpoints

device breakpoints (unnatural):
ex: 320px iphone in portrait mode, 480px iphone in landscape mode 768px ipad in portrait mode, 992px – small laptop (minus browser chorme) 1200px large desktop

design breakpoints (natural):
“Devices will change, follow your design”

Revenge of the Meta Tags (mobile device zooming)
check metas: ‘viewport’, ‘MobileOptimized’ content width, ‘HandhelFriendly’ content true

Browsers not supporting CSS3 Media Queries
IE6-8 – Respond.js ( — insert inside IE conditional comments

Mobile First! – at least have one design outside media queries, the idea is to use mobile first.

Loosing 80% of the screen make you focus!!! just put what is really interesting/relevant/important first

Image Handling in Drupal

Zen 7.x-5.x
Responsive panels layouts, respond.js, sass (CSS preprocessing), html5
Check and resize browser (it is in Drupal)

Speaker’s links:

Web Typography & Drupal: Putting Arial Out To Pasture

Presented by Jason Pamental

Link to this session video and description.

Didn’t go to this session but I wish I had gone… the next one I actually went was a bit boring… (probably because of my lack of knowledge, don’t blame the presenter!)

References related to the above:

Easy Drupal Hosting Lifecycle: Local Dev, Production Deploy, Cloud Scale, and Sleep Well

Presented by Barry Jaspan

Link to description and video of this session.

Barry Jaspan @bjaspan (

Acquia Dev Desktop also runs like xampp (??? this I didn’t get it, would check presentation later to understand or send him an email asking about)

Mostly saying about DevCloud, which is easier to push.

Said that Acquia is recruiting, check

Forensic Theming: Key Techniques to Building Effective Drupal Themes

Presented by Emma Jane Hogbin

Link to video and description of this session.

My first time at DrupalCon and I got a book Front End Drupal from her! (thanks Emma Jane!)


She will usually change one tpl.php ()

Tools: css editor, firequeries, webdeveloper, ie web developer, firebug, sweaver

Devel/Themer: overlay on top of page, “point, click, analyse”. Also give info about the template file you are working on.

Drupal (layout) Modules: context, display suite, panels, omega, tao

Emma Jane Hogbin is author of:

Theming API

Presented by Rolf van de Krol

Link to this session video and description.

He started talking about the theme function call.
Found slideshare for this session at:

Links – theme hook, it will give a list of links and will be themed as a list of links. On array is the list of links itself and with the titles on it.

On the node you can also find a path to the template.

Template will override the default from Drupal.

Preprocess and process functions
Get the variables in the pipeline and change them as necessary (???)
gets the variables array as parameter and change the variables array and you can extract the values more easily like the ‘title’ value.

Templates, then modules, then themes pre-processing (preprocess use for any template, preprocess_node only use for the node template).

Inside the node array instead of have a type theme, was found a ‘theme engine’, so the engine actually find the template files for you, you don’t have to specify them yourself. PHPtemplate – default template engine in Drupal.

Pattern: node– (dash,dash)

If engine find these templates on site: page.tpl.php, node.tpl.php and node–page.tpl.php (is a special case of node)

mythemes_lnks__comments (mythemes will be ignored, a function links__comments will be created, if you don’t define the function it will use the default from the core).

If you are really interested in this topic I recommend checking the video for this session and analysing the slides on slideshare since it went a bit fast to follow up everything.

Take Full Control of Your Site Layout with Display Suite for Drupal 7

Presented by Kristof De Jaeger and Jan-yves Vanhaverbeke

Link to this session description and video.

@swentel drupal user 107403
@janyves drupal user 591438

Maintainers of field_group, sweaver, imagecrop

Demo for this presentation

Philosophy of Display Suite
manage your site layout from one central place, bridge the gap between themers and developers, make template files unnecessary, no php code (reduce danger of exploits), focus on ease of use, portability and manageability; not a css tool!

Modules: Display Suite, Extras and Search Display

Really good for dragging and dropping your layout without having to mess with Css, where to put, etc. (the basic way, more specific layouts you can tweak with the style). Very nice to style some teasers with images, etc.

Display suite has other view modes. You can also go on Page: Row style options and use individual views for each item on your page.

Extras module: field templates, regions to block, contextual links, page title options, switching view modes, views displays (templates and fields) and more.

If you don’t use panels, the extras/display suite could be a good replacement for panels.

“A beautiful search”
override search result pages for Node and apache solr
search display allows to override the search display of the search.

Use page control with panels and content control with Display Suite.

always a concern, D7 was rewritten from ground up, views field API fields, install


Keynote: The Future of Social Media – a historical perspective

by Tom Standage

Link to video of this session

Truly enjoyable talk, with some funny moments!

“The Roman used laptops and tablets”

Social network in Roman era (scribes – enabling the infrastructure, scrolls)

Romans writing on walls “Gnaeus Alleius posted on your wall” (messages, adverts, graffiti)
St Paul used social media, ‘open letters’ (know as epistoles)

‘Scroll the news’ like the old times…

“New blog post from Martin Luther” pamphlet distributed getting ideas against selling indulgences to get a piece in heaven. Traffic stats when something was reprinted and spread, difference between german and latin letters to reach clericals or general public.

Coffee houses in England inspired origins of the open source movement (environment allowed discussion, exchange of ideas, debate).

Multilingual Drupal Solutions: Use cases and modules

Link to the video:
Presented by Florian Loretan and Jose Antonio Reyero del Prado

They have an international discussion going on, using hashtag #dci18n on twitter.

Why multilingual? focus on audience, but not easy because some things don’t translate well or have different meanings (cooking and baking -> cousine cousine (French))

Localisation is only associating a place to something.

  • Use case #1 simple multilingual blog: (simple multilingual blog)
  • Use case #2 multilingual brochure site (wunderkraut)
    Publishing options > Multilingual support > enabled, with translation
    (check isomething sync module to check which parts will be translated or not – maybe an image don’t, don’t duplicate). Same, check permissions that maybe multiple users can translate the website, so need more people.
    Drupal automatic recognises which menu item belongs to which language and only show the correct menu when the language is selected.
  • Use case #3 multilingual community (Drupal documentation to be translated, for example)
    Different setup, get a term and translate each individual term and possibly the whole meaning still would stand.

Contact info:

Jose A. Reyero –

Florian Loretan –

Creating and measuring the user experience

Presented by Jeff Noyes

Video for this presentation:
PDF for this presentation.

He gave an example of bad user experience if you have a Microsoft Word interface with all toolbars turned ON, leaving only 20% of space for typing… and it should be the opposite, 80% focus on writing.

IDEO video – example of redesign of the shopping cart
“One conversation at the time”. “Wild ideas”
Focus caos… loads of posts with ideas, voting on the ideas that are cool but also doable.
“Fail often in order to succeed sooner”
Ideas: child safe, baskets to fast shop, scanner to add products, wheels that allow car go sideways, after check-out basket stays in the store and bags are hooked on the frame

IEEE study ‘why software fails’, lack of requirements, fixing error after something was manufactured (100x more cost after something was actually manufactured to fix a problem).

REMEMBER the audience!!! you have to remember who you are designing for, what are you designing, why? which problems they have.

To find the right solution (the “How”), we
need to prioritize the features we invest in
(the “What”). To determine our priorities, we
need to define the problem (the “Why”). To
define the problem, we need to identify the
intended audience (the “Who”).

– Whitney Hess, Happy Cog

How to know the audience and the problem (Who and Why):

  • contextual inquiry (field research in natural setting)
  • surveys
  • interviews with target users (check views3)
  • usability tests
  • analytics (Google Analytics, Crazyegg-have heatmaps and scrolling, also search criteria- etc)


  • design principles
  • ideation
  • task flows

Some interesting online tools: and

  • greyboxing (really leave as grey boxes, avoid divisions, number of items on titles, etc)
  • storyboards – sequence of events (views project, map general flow of the 80% use of the tool)
  • wireframes (not usually helpful from a user perspective)
  • prototypes (clicable version of your design, can be high/low fidelity)

Test / Validade

  • moderated test (someone guiding the user through tasks)
  • self-moderated test
  • static image, self moderated test (user will be presented an image and get feedback on what’s stand out, etc)
  • navigation tests (focused on the information architecture of your site)
  • diy testing (have to keep in mind: target audience, be unbiased, listen more than talk

Don’t Design Websites. Design web systems!

One of the best presentations in my opinion!

Presented by Todd Ross Nienkerk and Adam Snetman
Link to the session and video presentation
PDF of this session

Today’s websites are really websytems
Designers determine the site’s functionalities… (big responsibility!)

Cannot paint a house without building it… architecture is necessary first.

  • Define the site
  • Gather goasl and requirements
  • Create personas (audience)
  • What is the content and how would be organised? (content types and site map)
  • usability testing
  • choose your platform
  • translate everything into drupalspeak if you choose this platform (to map to its structure from wireframe)

Check Samantha Warren (and also check mood boards – collage and style tiles – elements of inspiration, sample colours)

Really liked the style tiles!!!

Example of the redesign of the logo, then site.
Check the goals, logo, typography, imagery, catch phrase, grid, experience.

Design on grid
960 grid, check the module, etc…

Stark theme is default, included in core.
understand the source code….

The trick to find the modules you need…

textformatter module, check! module monday blog series to check popular modules or reviews. sort by most popular for easiness

Minimize templates (design for change): less maintenance, consistent styling, specify the rules and all elements that we need functionality before implementation itself, remember architecture…

Check navigation levels, how many levels you can have?

‘the site you design today will change tomorrow’
The designers are the primary architects


Drupal as base system for your iPhone, Android, iPad apps

Presented by Sumit Kataria
Video for this session
PDF of this session

This session is about building native iPhone/iPad/Android applications using opensource web based technologies ( with Drupal as base system to manage content, users, views, permissions etc.

Some iPhone/Drupal stuff Sumit wrote in past:


Tool they choose: Titanium (major brands choose titanium)
Free framework which allows build apps for phones, apps, desktop (90% of code base) get native apps (services APIs gives the end-point to make request and get data out of it. Layers: services, serves, authentication layer).

Drupal will have data, users and services api, TI network api will gather that and then compile to the platform. (example:

I thought that with Titanium you could actually develop for iPhone/iPad independently of platform but apparently you still need a Mac for that.. 🙁

However, good idea, you can use your Drupal site to contain all the information and structure of the application and you just make calls to the nodes and get the content. Storage of videos still on Drupal (is the app only streaming?)

Keynote: Designing the Sustainable Web

by The Web Standardistas

Link to video and description for this session

I thought it was worth it to include the session description here, since it was succinct enough and also very relevant to my interests:

The web is evolving. Fast. As designers and developers working in this volatile medium – one that is characterised by a relentless pace of change – we need to consider strategies that deliver a sustainable web that exists beyond the here and now.

This keynote will focus on how, by marrying fundamental web standards with timeless design principles, we can create beautifully designed user experiences that embrace the full range of emerging technologies at our disposal. HTML5 and CSS3 offer today’s designers and developers a platform on which to build sustainable web presences for tomorrow. In short, to create a sustainable web – one that exists across a growing number of devices – that is designed not with short term goals in mind, but that is built from the ground up with longevity as its driving force.

We discuss how a standards based approach that is forward looking, whilst embracing classic design principles, can ensure wonderful user experiences that exist outside of the latest trends and live on in our users’ imaginations.

We both believe great design and enhanced user experiences go hand in hand:

  1. Build a solid platform, embracing emerging standards, ensuring maintainability moving forward is pain free;
  2. Apply fundamental and timeless design principles to ensure wonderful user experiences, experiences that exist outside of the latest trends and ensure a longer shelf life; and
  3. Deliver efficiencies (via 1) and marketability (via 2) to satisfy the business people.

The Web Standardistas

In addition to their role as The Standardistas, Christopher Murphy and Nicklas Persson teach interactive design at the University of Ulster at Belfast, where they have been active in promoting a web standards-based curriculum.

As tweed-clad duo The Standardistas, they write regularly on standards-based web design and the importance of improving web design education. Their first book, which extols the virtues of A Web Standardistas’ Approach, has received widespread praise for its practical and hands-on modus operandi. In addition to this they have been invited to write for, amongst other publications: 24 Ways (, The Manual (, and .net magazine.

In addition to speaking regularly at conferences worldwide, they run workshops and masterclasses, teaching the principles of design, both on and off the screen.

My notes:

Design for multiple devices (desktop, tablets, mobiles)
Content shifting
Secret formula, not sprinkles, they can be used to add for flavour

Check: grids, ratios, typography, semantics
Remember of the 50/50 of the iceberg, design and code

Initial web was already responsive (no styling in the beginning), tables were used for styling instead of their original purpose.

Zen garden starting the show of content and design separation.

Seriously good resources below!

Jan Tschichold typography.
Check book: Grid systems in graphic design
hierarchy, composition, typography, semantics, device independence, openness.

Check Designing the invisible (a practical guide), also Josh Brewer website, Build conference. Check The Grid System website. Also check (it is a responsive website) and Naomi Atkinson, Dan Rubin and Ryan Taylor.

Surveying the landscape, the secret formula, the markup and design timelines, a marriage made in heaven.

@standardistas – rich typography – Tim Brown

Adaptive, Responsive, Mobile First and Drupal theming for the future with HTML5, CSS3 and Omega

by Jake Strawn

Link to video for this session

Really great presentation and some good resources (check link for session above).

This session will introduce you to Adaptive Design and Responsive Layouts and how you can implement designs and themes that will work on ANY device without the need for multiple versions of a site all with different themes and designs.


Mobile first: it is the common (minimum) denominator.
One reason for mobile first: mobile is exploding!

Responsive web design:

Theme for Drupal – Omega html5 – media queries for 3(?) different sizes 1200, 960 and ….

Of Constraints and Capabilities: applying systems thinking to design the ideal experience

by Dante Murphy and Angel Brown

Link to video and description of this session

PDF of presentation

“Design must convey the essence of a device’s operation”

Recommended books: The design of everyday things; The laws of simplicity book and website (John Maeda);

Idea of offline capabilities: tube system – longer distances, related system: buses for shorter terms. Walking signs (tourists/info).
Appearance: impacts how people perceive and also how they feel.
Constraints are good to be able to start and stop.

“Designs depends largely on constraints”

– Charles Eames

Theory/mental/psychology term FLOW (challenge activate your capabilities).

‘If you wait for ideal circumstances in which you have all the information you need (which is impossible)…

‘Not my problem’ self imposable contrains

@dantemurphy @angelbrownuk

Making your theme scale with your brand

by Maarten Verbaarschot and Terrence Kevin O’Leary

Link to video and description of this session

Reduce power of theming from editors/project managers and leave it to the themers/designers. Create and use personas (google it). The master theme document (chapter three website –

Groups at Drupal:

Sass compiles the code once you import the images with @import all (???? check)

Principle: save time, stay focused, do things properly

FOM 2011

Future of Mobile 2011

Future of Mobile

I couldn’t participate of Over-the-air ([tooltip text=”Over-the-Air”]OTA2011[/tooltip]) this year, but Adam Cohen-Rose blogged about it and I’m glad about it! So, to catch up with what happened check:

Well, now back to FOM notes…

Instagram presentation

Dan Rubin avid user Instagram

How it started: with beta invites matching interests of product (in that case, designers, artists, influences, etc @jack – twitter founder). It generated enough interest so much that NYtimes also got interested on the instagram. The technology was kept simple and allowed scale.

Key decisions: internationalization early on (3rd week!!!), small team, single platform (iOS), minimum viable products each steop of the way (proof of concepts too), invest in community very early.

@brianleroux presentation (phoneGap)

Link to presentation at:

phoneGap was known as “the bridge”, “foreign interface” and “the hack”

The sad sample of HP webOS – it ended up bad…. finished.

Extensive documentation for phoneGap at:

Interesting things: you can access devices features with phonegap too! works with jquery, jqtouch, etc. You can think of phonegap as a fancy browser!

We build your apps ‘in the cloud’

He suggests to choose a benchmark and stick with it. Monitor it and develop for it. (One example: performance)

Layouts favorites: flex-box, css media queries, meta tag with viewport, however he also mentioned that aesthetics can hurt performance…

Remember that the brand is cross platform!

Tip: “try to build an app without using a library if possible, if not, start using something that solves YOUR problem”

They used qUnit and Jasmine for testing.

For the backend design he said that every legacy system needs a proxy, RESTful JSON endpoints are fastest.

Code ghetto-photoshare and
demo at

Going offline, the solutions used were IndexedDB, SQLite

Phonegap build – also using responsive webdesign, yay! Continuous deployment, no SDKs required!!!! another useful tool, in your quest to overcome cross-platform mobile development.

If the “Demo gods are kind” it will work…

(he mentioned while trying to load demo… quite funny phrase in a way)

General interesting links gathered at the conference

Future trends: local, social, digital all via mobile (four megatrends shaping commerce)

x.commerce innovate
bmw design…

Cannot know what the future of mobile is but it is a 1 trillion opportunity!

Designing for different screen sizes

Think more than size, think about interactions and experiences

Not to use mobile as a word, more screens or devices…

1.the glance: sub-5 secs snack: sub-60 secs

Tablet vs mobile

Tablet: magazine (more public experience)
Mobile: private experience

iwatch concept, metawatch not a concept

Progression: classic web > web 2 > mobile first > touch first

Mobile games and html5

Mobile game engines: unity, corona, cocos2d

Super mega browser farm 2 – social games played in browser


  • scaling via css slow, via web-kit transform3d faster because triggers the hardware acceleration.
  • obfuscate your code with google closure compiler
  • “evented input” event to an element
  • button.onkeydown=… (in javascript)