Speaking at FOWA

I work at the Bodleian Libraries on the BDLSS department for a few years now. And inquiring about the Future of Web Design (FOWD) conference in January this year, I was pleasantly surprised to be invited to speak on the Future of Web Apps (FOWA) in October. The FOWA conference has a “Rising Stars” track for people who are new to speaking but have great skills and passion to share.

It is worth saying that the FOWA team, specially Sarah Robinson, had a great impact on my speaking adventure. They made the whole experience simple to follow, always showing support and being available for any questions. On arrival, they guided me to a “speaker room” in case I need some quiet area to prepare anything before the presentation. I received a greeting card, and the simple gesture was truly appreciated.

It is quite cool to see my name on it… thank you @BathCityGirl and F.I. team for the lovely card! #fowa

A photo posted by Monica Messaggi Kaya (@monicakaya) on

There was always reassurance available in case “the nerves” kicked in. During the presentation one of the organisers also let herself to be a “point of eye-contact” in case I needed a familiar face in the audience. I found it really helpful and if I forgot a detail or two I could focus and get back on track. Another follow up was given at the end of the talk, and I felt part of a team, instead of an outsider trying to get in. I really enjoyed the experience, especially being the very first time speaking in a conference.

Since I was working on the Digital Manuscripts Toolkit (DMT) project, I thought would be great to talk about the journey and the challenges of putting this toolkit together considering the amazingly rich examples of manuscripts the Bodleian Libraries have.

I’ve spoke about the International Image Interoperability Framework (IIIF); with the aim to use, develop and repurpose digital manuscripts in interesting and innovative ways. Highlighted the steps to work with IIIF, introducing the Image API with the demo at http://iiif.io/#try-it, and Presentation API explaining about the primary resources (Manifest > Sequence > Canvas > Content) and their properties.

I carried on talking about the DMT Journey so far as the toolkit itself is a large combination of tools, and the one I was working on was the online editor. I’ve mentioned the possibility of having Docker images to create the Image server needed to satisfy one of the steps to work with IIIF. Then the IIIF metadata compliance that we’re achieving using Manifest Factory (Python); exemplified the discovery step with the Digital Mushaf project – that reunites Qur’anic manuscripts held by four institutions, and showed that we’re using a Mirador viewer instance to display and combine all these manuscripts into one sequence.

During the presentation I spoke about the research of existent tools and libraries that was done, to name a few of them: Grunt, Node.js, jQuery, Karma, underscore.js, pubsub.js, handlebars.js, URI.js, mousetrap.js, ZeroClipboard.js, d3.js, state-machine.js, tinymce.js, qTip2, sinon.js, Jasmine, Istanbul, Travis. Also demonstrated some viewers available to display and zoom images (OpenSeadragon, Mirador, UniversalViewer).

I was able to show the mockup of the online editor and a few tests that I made trying to build our first Manifest editor online.

Finishing up the presentation, I was able to talk about our funded projects that represent a direct challenge and great examples on how the scholars could use our Manifest editor online:

It was a great experience, and considering a highly technical audience, this talk was received well, and had plenty of examples and JavaScript libraries for them to discuss and possibly use. Some of the feedback received was in the lines of:

“you made some already amazing manuscripts even look more interesting”.

Slides https://slides.com/monica/digital-manuscripts-toolkit/

Code https://github.com/bodleian/dmt

Awwwards Barcelona – Day 2

Mathias Bynes

JavaScript ♥ Unicode

Mind blowing”stuff”. Check more sane solutions at mths.be/regenerate or mths.be/node-unicode-data

A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

He is currently working at Opera.

Created evil.sh – a collection of various subtle and not-so-subtle shell tweaks that will slowly drive people insane (but maybe you could ignore that I even mention it – disclaimer: I won’t be held responsible if you go ahead an test his script! )

He gave amazing examples of things that simply don’t match and “suppose to” with explanations and some solutions to work around it. Be aware: this section is “link-heavy”:

http://mothereff.in/punycode is a tool that uses Punycode.js to convert domain names between Unicode and Punycode (ASCII).

Nice site with insights on javascript and “those very special irregularities, inconsistencies and just plain painfully unintuitive moments” of the language – wtfjs.com

  • Unicode standard varies from U+000000 to U+10FFFF possible symbols (not all used)
  • Basic Multilingual Plane (BMP) U+0000 to U+FFFF
  • The rest are “astral planes” (need at least 4 hexadecimal digits to represent)

ES6 uses brackets and uses the whole scope of unicode but this is not implemented in all browsers. The current solution uses surrogate pairs.

mths.be/punycode – library that counts the strings more accurately.

Now, in ES6, the string character count gets the correct number of chars, check how it works on mths.be/bmf

Countable.js – is a JavaScript library to add live paragraph-, word- and character-counting to an HTML element. It is a zero-dependency library and comes in at just about 1KB when minified and gzipped.

Check: http://mths.be/bed about JavaScript’s internal character encoding.

git.io/unorm – unicode normalization on ES6.

A Unicode-aware string reverser written in JavaScript – mths.be/esrever

Check: A robust & optimized ES3-compatible polyfill for the `String.prototype.at` proposal for ECMAScript 6/7 – mths.be/at

Create unicode-aware regular expressions – mths.be/regenerate and mths.be/node-unicode-data

A source code transpiler that enables the use of ES6 Unicode regular expressions in ES5 –  https://mths.be/regexpu   

The “Pile of Poo Test (TM)” – just use that symbol on your own unicode tests and check if it is returning what is expected or not.

  Complete article/slides at mths.be/jsu – the examples will blow your mind… @mathias 


Hvass And Hannibal

Collaboration – Making/Thinking/Illustrating Together

The story of Hvass&Hannibal and how we work with different materials and medias.

Amazing colourful and inspiring talk on design and illustrations by @HvassHannibal #AwwwardsBCN   A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

Working more on music industry, illustration and exploring textile and 3D spaces. Started as fun, playful, as friends and with illustrations on wall/bars, playful creations with costumes and the ‘smoking ring’ until an ‘official’ poster for school when they decided to create the studio.

She showed some of their work and they were very inspirational to me. The process was of a “ping-pong” where Hvass and Hannibal were working on each other’s drawings and building up their design together. Some very creative ideas, and some “simple” ideas that were just so well executed that created amazing effects. A few:

  • Working on “jungle theme” around and the illustrations got to furniture, aprons, plates, etc. Now using loads of MDF for creation and textiles.
  • Working with ribbons and dancing on a project (which was raining), working outside and on “the field’ is much harder… lots of try-and-error techniques, amazing efforts.
  • Sustainia Award 2012 – amazing work using glass design and materials for the awards. Glass layered with coloured glue.
  • Cover for “Ghost of a chance” – manual work and origami-style paper work for a photoshoot. She mentioned that looks graphical/computer design but was manual work!

Unsuccessful sketches can be a “panic database” for future projects.

  • Conference design, creating a more “human” conference, more tactile design props and elements, like cut shapes, wooden crate and boxes, hand painted chairs and hand-drawn name tags, posters, panels and decoration. including hanging elements cloud-shaped. Also using pallets for tables, boxes painted for stools, hand-tied name badges. Photo-booth with the props as well.
  • Design for children’s library. With shapes allowing characters creation, signs all with the playful arrangements of these shapes.

And many more amazing work can be found at their website: www.hvasshannibal.dk

Check also Stupid Studio – a graphic studio in Denmark that they worked with.

 


Jeremy Keith

Enhance!

We’re working on increasingly complex websites. There’s a temptation to match this growth with increasingly complex solutions. But there’s a real value in keeping things simple…or at least _starting_ things simple. If you can build a solid robust foundation, there’s a good chance that your work will be future-friendly. Prepare to have your brain subtly rewired as we look beneath the surface-level implementation details of the web to reveal the semantic structure below. Whether you’re publishing content or building the latest hot app, the principle of progressive enhancement will change the way you think about your work.

My notes:

Rewiring the brain…. the double meh, Fedex arrow, Toblerone bear, Ducks wearing dog masks – this last one I will never forget… take a look:

OMG! Ducks wearing dog masks!

The moment you realise all ducks are wearing dog masks…

Remember the Dao of Web Design by John Allsopp – more relevant now than it was then.

Tapping into the Zen Garden to remind us of the separation of structure and presentation.

Progressive enhancement as well: HTML  > CSS  > Javascript

Shearing layers on architecture/building, where all layers are dependent on the one before.

HTML is fault tolerant, not throwing errors if tags not closed or not understood. He suggests to be structurally honest

don’t use a <div> or a <span> to represent a button, use a <button>!

CSS is also fault tolerant, it won’t stop parsing or showing content, just without style…

Javascript is not fault tolerant (it will throw errors), use safe defaults, but do not rely on them.

In the web front-end stack – HTML, CSS, Javascript and Aria – if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile and it will just work.

Suggests: ember first then angular and then backbone.

“No one wants to think that what they’re doing is trivial” – John Resig

He sees a problem with the phrasing of “the web platform”. It is not a platform… if you have iOS and I’m serving an iOS app you get 100%, if you don’t have an iOS device you don’t get anything, but if you are developing for the web “anyone” can get your content if it is on the web (even using devices in other platforms).

Do websites need to look exactly the same in every browser? Answer: dowebsitesneedtolookexactlythesameineverybrowser.com

BBC – cutting the mustard, supporting FEATURES not which browsers type/version… If a feature is supported then you can get the enhanced version.

“Cutting the mustard” checking for features! If supported, then get enhancement. #AwwwardsBCN

A photo posted by Monica Messaggi Kaya (@monicakaya) on

@adactio


Henry Daubrez

No guts, No glory

We are Dogstudio and we come from Belgium. Well, not especially the place you would dream of to grow a digital agency, isn’t it ? You’ve got to grow a pair, dream big, fail bigger and trust your guts. This is our everyday guide on how being weird, integrating research & development, personal projects and taking bold decisions got us to look into whole new perspectives.

My notes:

DogStudio does loads of amazing projects, from printing, web, 3D printing, light installation (and ‘weird stuff’), animation, etc.

A few of the projects they showcased (can we even flex this noun as a verb?)

Keep the creative juices flowing (yeah, sounds naughty)

  • Gifcup website loads of visits in 24hs (had to be taken down)
  • Waterloo battle

You need to know what you are doing, without inspiration and creativity an immense budget won’t help

They use lots of videos, nice imagery, effects, sound effects.

Project cycle: rising up your team’s skills > higher expectations > high quality > better project > repeat.

“50% of a remarkable experience lies in the details.”

Live by your vision. Trust your guts. Aim for quality. Party like there’s no tomorrow

@benguedj Benjamin Guedj – @sarrimaxime Maxime Sarri

Amazing super production of sites by Dogstudio… *NEED* to check their website: http://www.dogstudio.be


Divya Manian

Responsive Design: Current State of Affairs and Where do we go from here?

In this talk learn about what we mean by Responsive Design, the workflows around responsive design that exist today, the problems that we have noticed amongst the current workflows and how we are addressing them at Adobe.

My notes:

Product manager at Adobe – her main focus lie in new features on Photoshop to help people on responsive design.

Design decisions outside of canvas…

The researched showed that people were not satisfied with workflows, they wanted to use tools they already have (not learn another), they didn’t like updating tools, there was an increasing collaboration, but lack of tools for collaboration.

The clients don’t really know what is responsive design, they feel hard to keep pace with changing browser feature set, tedious to update design for different devices.

She advocates to determine where the design breaks, determine the breakpoints and prototype for them.

Implementing the design – use same grid as prototype, inventory features you will use, use responsive frameworks.

Check site: html5 please – use the new and shiny responsibly

RD is necessary for websites and data agrees.

OMG! she did all slides in Photoshop! check this: adobe.ly/1CveCdj (didn’t work much for me though… 🙁 )

@divya – manian@adobe.com


Ricardo Cabello & Jaume Sanchez

The Web in the age of WebGL

In just three years after its conception, WebGL has emerged as the de facto technology for creating web experiences and it is now supported by all the major browser vendors. During this presentation, Jaume and Ricardo will talk about the possibilities the technology brings to the table while sharing the process of developing some of their projects, giving a comprehensive overview of their current workflow and toolsets.

My notes:

WebGL vs Stage3D (Adobe)

Project 3 Dreams of black – http://ro.me (2011) – code now on github.com/dataarts/3-dreams-of-black

Unity or Blender? They actually used Maya for many of their projects…

Check threejs.org – Three.js is a library that makes WebGL – 3D in the browser – easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that.

Google maps cube game – started using Maya – from .OBJ converted to .js

Example (very summarised) of workflow for the project Wind&Sun (2013): they used Maya again, but terrain and repeatable objects in Collada. Then review and fix meshes (CSI Models) then optimise and output to binary, finally webgl engine with camera edits.

Gravity (2013) – website for the movie – assets from movie > siplify meshes > preview assets > camera edits

WebVR – Oculus/Cardboard devices – mozvr.com

SmartWater experience http://drinksmartwater.com/#/explore-the-sky

@mrdoob / @thespite


David Navarro & Claudio Guglieri

Where we’re going we don’t need roads

It’s freaking hard to predict the future. Will there be flying cars? Flying skateboards? Self-drying jackets? What can we learn from movies about how the future is going to be? In this talk we will explore what we can learn from the big screen and how that can be applied to our daily jobs with the internet. As digital designers what we do today will have consequences tomorrow, it’s a great power that comes with a great responsibility.

My notes:

Digital interfaces in movies, touch screens, interactions everywhere. Example of Back to the Future II – the date on the display is this year!

The presentation is full of movie clips, frames, images that exemplify all these interfaces that we had contact on a movie (possibly first) and slowly becoming real (or already here!).

Movie references: Matrix revolutions, Avatar, Her, Back to the future, Minority report, War games, Blade Runner, AI, Knight rider, 2001 (Hal), Star Wars, Pacific Rim

Speech – voice interactions bring machines close to us

Movies: I robot, Time Machine, Minority report (store), Moon

Visual

Hendo Hoverboard (a la McFly!)

Touch – the tactile, the feeling

Movies: Strange Days, Metropolis, StarTrek (original series), Next Generation (surfaces), Sleeper, Jonny Mnemonic – feedback on wrong password.

bradfrost.com (right now I don’t remember why Brad Frost was mentioned… maybe about Atomic Design?)

Glass tables, glass tablets, surfaces where you put the hand and options appear.

Feelings/Emotions

Movies: I robot, A.I., Black mirror (smart houses), Minority report (delivering content according to emotional states).

“Future is design agnostic”

Note to self: check “Black Mirror” on Netflix (mentioned twice on the presentation…)

Augmented reality

Holograms – projected in public spaces

Holograms – private spaces

“the human body is the next computer interface” – Fjord on FastCoDesign

Possible future job descriptions?

  • Brain director
  • Augmented Reality Interior Design
  • and so many others fun to hear…

@davidnavarro and @claudioguglieri

(if you know where they added their slides, please share on twitter and send me a note @monicams)


 

Conference site http://conference.awwwards.com/

Awwwards Barcelona – Day 1

Awwwards Barcelona - Great event, inspirational talks and projects.

Conference venue was easy to find from my hotel, it was a building with nice clean lines and staff was very helpful. Coffee was nice and strong, despite coming from Nespresso machine.

Swags were sooo nice!

Awwwasome swags! The “100% brain food” is packed with case studies! #AwwwardsBCN

A photo posted by Monica Messaggi Kaya (@monicakaya) on

Book of use cases and a nice notebook with some tips of places to see in Barcelona.

Great  fun welcoming talk from Josh Holmes @joshholmes, including raising the near fire alarm (none visible inside auditorium), no tweets and no selfies with firemen and/or fire before the fire is completely out.

So, here come the notes…


Haraldur Thorleifsson

Real artists ship

Designing something nice in photoshop is easy. Designing something that solves the business problem, gets through the multiple stakeholders, looks nice and eventually launches is a lot harder.

My notes:

Designers have loads of sketches, ideas, mocks, prototypes created but all sitting in cloud/drive without being published. Company UENO. How they setup rules to avoid lost projects…

Haraldur is from Iceland and he says that most people there are generalists, not specialists. There’s usually a small team and one man does-it-all is the designer.

His suggestions:

  • Understand the project (don’t start with UI)
  • Stop pitching (too early in project to do any pitch, understand the business first)
  • Create your own wireframes (they use a ‘flat design turned gray’ to communicate and build trust and work on concepts and ideas) – showed sample for Dropbox user/admin guide.
  • “A prototype is worth a thousand meetings”
  • Photoshop lies (easy to create something beautiful, perfect, but not real)
  • From idea to launch (ask the client how they think they will bring the idea to solution)
  • Only deal with decision makers (clause on contract: “if you want to have an opinion you have to be in the meeting”)

A few examples of work: Dropbox user guide, Medium design, Google Santa tracker, Reuters TV app (video cast) @hthorleifsson – http://haraldurthorleifsson.com/


Bruce Lawson

<picture> and responsive images

Amaze your friends, confound your enemies! Oh, and save bandwidth and speed up your site by sending the correctly-sized images for the device with HTML’s new responsive images capabilities. Bruce proposed the new <picture> element in 2011, and it’s just gone live in Opera, Chrome and Firefox, so learn all about it now and put the techniques live tomorrow.

Fairy magic that works in browser! NOW all makes sense! #AwwwardsBCN @brucel

A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

<picture> tag and attributes Images are big and getting bigger, and not responsive properly. 3 years ago, retina images would be served no matter what, now you can serve the correct image size for each device.

Steve Souders, the “Galdalf” of performance said that:

preloading is the single biggest performance improvement bowsers can make

Media queries for video already existed and worked, so, @brucel and responsiveimages.org worked with the <picture>

Serving hi-resolution images properly – the only way to work is via the srcset, example:

<img src="'normal.jpg&quot;" srcset="hi-res.jpg 2x, super-res.jpg 3x" alt="desc here" />

Serving ‘stretchy’ images:
<img src="medium.png" srcset="big.png 960w, small.png 240w" alt="desc" />

Different widths but showing with the size of 100% of the viewport. Order of the media queries matters, the first to satisfy the requirements ‘wins’. You need the <img> as last option of the <picture> to carry on with fallback to other browsers.
  
  <img src="tree.jpg" alt="tree" />


Check his slides at: http://brucelawson.github.io/talks/2015/awwwards/ – @brucel


Tobias van Schneider

Side Projects are Stupid

Exploring the world of side projects and particularly why I believe side projects are stupid. The talk will bring light into this mystery.

My notes:

Tobias mentioned that side projects have to follow the KISS principle.

General concerns we have: not enough time, fear of failure, overthink, not the right moment, have kids and family, have to pay the bills, have to do research first, and all other excuses…

“The best way to complain, is to make things”. – James Murphy

A few of his projects:

  • Authentic weather app (simple, funny phrases, etc.)
  • Soundslike festival 2010 – open air festival – learning curve, not knowing about the process and all that was required.
  • Les Avignon project, one of the members setup screenprinting for t-shirts, then tried out the long boards (‘it was just a stupid idea that received amazing feedback and could potentially turn to business’)
  • His favourite project was Reflections, photographing reflections of these square glass objects and making artwork/prints/postcards. Playing with elements/objects and being creative without actually having an initial goal.
  • 2D flat surface shader
  • Semplice – Semplice is the first fully responsive case study portfolio system based on WordPress. Built by designers’, for designers’.
  • Projects can also appear out of a simple personal motivation: make people laugh, example:  PaP – Passive aggressive password machine
  • .Mail – naively optimistic (but we need to know when it is enough) – this was a side project that was fun but then was not fun anymore… (n.b.: link to a review, Tobias doesn’t have link to the project anymore)

The Principles

  1. simple stupid (if people say it’s crazy and stupid, you are in the right path)
  2. ignore everybody (Huh MacLeod)
  3. trust your gut
  4. be a jack of all trades (to be able to see the big picture)
  5. stay busy (“it is faster to run when you’re already walking”)

Example: Casey Neistat – youtube videos skate boarding – self-taught film maker @schneidertobias – http://www.vanschneider.com/


Meagan Fisher

As designers we spend most of our time toiling over the graphic design principles we need to master, or the best way to create progressively enhanced sites. These skills are vital to our success, and worthy of our attention. But there are other things to think about that are just as integral to the quality of our work. What larger role does design play in an organization, and how do we shape it? What kind of culture should we foster within our teams? How do we choose where (or if) we focus our efforts, and how does the focus of our work affect the development of our skill set? In this talk we’ll step away from the keyboard and explore the interpersonal side of design.

In-person testing to gather feedback #AwwwardsBCN

A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

“The goal fo design is to provide the best possible solutions fo real human needs.”

Empathy as keyword

Where do we find constraints? – goals and limitations of the organisation, our aesthetic ambitions of a project (‘how we can solve this problem in the most beautiful way possible’), the needs of the users (failure of Coke creating the New Coke – without checking customers – and bringing back the ‘classic’ Coke; then Pepsi ‘crystal’ that didn’t taste good)

User on center of design process is well known but we fail to include the user quite often.

Innovation as keyword

Excuses: “User research belongs to someone else”, “I don’t now where to begin”, “It may raise inconvenient questions”, “It’s expensive and time consuming”.

Getting to know the user doesn’t have to be hard.

Interviews, remote testing, observation, analytics:

 

Listen to what your users are already telling you.

 

Keep yourself reachable, create more personal emails (don’t need branding), asking what the users expect, what they will use the tool for, etc.

HelpScout – gathering feedback

Example/suggestion on being in touch with the customer: 15 min spending on random support tickets every morning, get notifications for tweets people send to the organisation, ask sales rep to listen in on a call once a week.

Getting all this empathy will give you:

  • useful constraints
  • meaningful content
  • better critiques
  • iterative changes

“Become a better communicator”

 

Books/reference:

http://owltastic.com/@owltastic

 


Marko Dugonjić

Responsive Web Typography

Responsive Web Design done correctly is based upon content rather than actual device resolutions, and so typography should adapt to both layout and sizing across content breakpoints. However, mere font sizing along the typographic scale based upon two-dimensional viewport @media queries is not enough. Apart from setting the correct balance of the black and the white in letterforms and texts, there are other important factors such as reading distance, information density, screen sharpness and device orientation that also influence the reading process. Learn to look at typography multidimensionally and enhance the overall responsive experience.

My notes:

Check Creative Nights (agency in Croatia)

Pantographia – accurate copies of all the known alphabets in the world!

Things to consider

1. Reading distance (basic font size, differs from device/medium) – He created a detection test at http://webdesign.maratz.com/lab/responsivetypography/realtime (dependent on user camera and permission of user)

2. viewport width height (imagine a bullet point in each phrase and if looks like bullet list is too much height, also consider diactrics – giving enough distance to differentiate them in between lines – and other characters)

Book to check: Inside Paragraphs

3. Content Hierarchy
Modularscale.com (Tim Brown) – test different ratios and http://webdesign.maratz.com/lab/subheads/

4. Information Density (quantity information you can see on screen)

5. Pixel density
check http://www.fontbureau.com/ReadingEdge/ – designed to function reliably at 9px to 18px also ia.net/blog/responsive-typography and font-to-width.com

6. Device Orientation
typologic.nl/news/live-font-interpolation-with-svg and typosansplomb.com/ResponsiveInterpolation

7. Aspect ratio
example with paper sizes perfectly aligned A0 to A6 and then all kinds of aspect ratios from devices (check his slides for the visual)

Article to read: Designing with context

All his slides are at: https://speakerdeck.com/maratz and the Awwwards Barcelona slides too.

@markodugonjic


Phil Hawksworth

Betting on the Web to #Win

The Web’s open nature has fostered ways of working which accelerate learning and innovation to an amazing rate. How do we keep up? How do we protect this asset for the future and can it compete with the fashionable application marketplace?

This talk will explore these themes and attempt to answer those questions by looking at case studies, examples and concepts from past and present.

Great roundoup presentation

A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

Phil works on R/GA (London) started as ad agency now they produce ‘other stuff’.

The Ted Nelson words (and his attempt at using them on the presentation) – hypermedia, hypertext, transclusion, intertwingularity, teledildonics, etc.

“Everything links to everything”

heich tee tee pee double meh – once you’ve seen it, you’ll never forget…
H T T P ://

Fashion and trends…. yes, trends appear and disappear. Standards and conventions versus trends.

Much more important now: accessible, stick to the principles you know to be true, resisting ‘the man’.

Check Google year in Search

‘We need to consider performance a design feature, not just a technical concern” – Yesenia Perez-Cruz via @philhawksworth #AwwwardsBCN

He mentioned Lonely planet style guide and highlighted that many others can be found at http://styleguides.io – also great article: A maintainable style guide

High level sitemap with sticky notes (and agile!) – example of his involvement on styleguide for google developers

The new way to Taco Bell isn’t on the internet it’s #onlyintheapp (problem about which App Store to cater for: Apple? Android, Amazon, other?)

Progressive enhancement is not about having javascript disabled, but to be conservative in what you do, be liberal in what you accept – Jon Postel

@philhawksworth – http://hawksworx.com/

Slides at https://speakerdeck.com/philhawksworth/betting-on-the-web-to-win


Paul Bakaus

Designing with Chrome DevTools

Paul is currently working on many design-specific features with the ultimate goal to make DevTools a tool for designers, as much as for developers. Come by for a sneak preview of crazy new things, such as improved responsive design controls, rich live editing of animations and more and more fun with colors.

My notes:

The anchorpoints: design, develop, iterate

Paul gave various examples of new features coming up (and some already in place) on the dev tools.

DevTools for designers for today – eye dropper can pick colour hovering on the page, with a few steps it will allow editing css/less/sass files straight from browser, the inspector shows exactly which font is being rendered.

Live editing in Dev tools, go to settings: workspaces – add the folder and allow editing (when question comes up), and in sources tab on browser you can map to file system resource (double check docs later).

(Note to self: I understood that works for CSS but does it work for less/sass? how about compiling?)

Other amazing features: Animations tab to control animation speed. Cubic bezier editor showing onion skin previewing how it will look.

You can play with the Google Canary version and check events.google.com/io2015/onsite for the effects

@maxwrk is a new designer at the dev tools team

“SCRIM” term and story: Smart, Colourful, Responsive, Intuitive and Material
S – typography and layout audits, flex assistants
C – colour swatches, gradient designer, colour theory
R – always-on, simplified device mode; device art and centered rulers
I – css transform builder, layout mode
M – material UI builder, material colours and animations

How to contribute?

  1. designers.chrome-dev.tools (Trello board)
  2. comment away
  3. add your own ideas and mocks
  4. ???
  5. profit

http://paulbakaus.com/ – @pbakaus

 


Aquest

A tomato, a picture, an elephant and a bunch of jugglers

Everything we talk about is inspired by the stories that frame our personal and working lives. There are seemingly few other experiences outside of those two contexts. What we have learnt – after all these years! – is that each story does matter. Every single story, from the smallest anecdote to the most profound tale, can become utterly unique and unequalled. What matters most is how you tell a story. We would like to tell you something of the diverse stories and experiences that have shaped who we are, and what we believe in. Let’s do that by discussing creativity. Creativity is a force that can change everything, turning all it touches into a work of art. It is a universal language that makes dreams come true.

My notes:

Stories allow us to be creative, be happy.

Helping hands – a picture story – #7mml an humanitarian project, around the world, and about food – creating a travel diary, photos, maps, instagrams, twitter, videos (youtube)

Apparecchiato – a tomato story – local food and ecomerce (buy fresh local and good food).

Scruud the vegetarians – a band of jugglers – game ‘scruud’, developed internally, (a bit like ‘angry birds’ IMHO)

Diumbo – an elephant story – app to meet people, approaches only ‘closer’ people to you so you can meet personally using only wifi triangulation.

“nothing to rethink, everything to invent”

@id_aquest

 


Vitaly Friedman

Responsive Web Design: Clever Tips and Techniques

Responsive Web design challenges Web designers to adapt a new mindset to their design processes as well as techniques they are using in design and code. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

My notes:

He started with a few examples on screen…

http://codepen.io/yoksel/pen/XJbzrO
http://codepen.io/lbebber/pen/ypgql
http://responsivelogos.co.uk/

Use of ‘ascii’ art in 1800s
C-fax / teletext – Vitaly getting embarassed explaining how it works to the audience.

The Smashing conference: dev.smashinmagazine.com

Considerations: components, strategy and layouts

Check Atomic Design by bradfrostweb.com/blog/post/atomic-design

patterns.alistapart.com

http://rif.superfriend.ly/ (check the whole history of a project, from the big picture showing one big image/canvas with design elements, then refine and work up to a prototype/sample page, general look and feel)

At smashing magazine they try to define component behaviours for xs, small, medium, large, x-large and xx-large but undefined to exact pixel constraints

They also use a styleguide and boiler patterns on Drive just showing where they can shortcut depending on the type of components used for each project.

StyleDocco generates documentation and style guide documents from your stylesheets.

‘peta library api’ – ianfeather.co.uk/a-maintainable-style-guide/
lonelyplanet/rizzo (github)

– Design workflow –

slightly better linear workflow -> content . ux . design . front-end . back-end . launch!

Build smaller, tactical teams that are capable of executing multiple rounds of planning, design, and code quickly and independently. — Trent Walton

Ask the customer to prioritise instead of asking what it is important (after all, everything is important for the customer).

His trick: “fast-fake” a competitor URL loading time and show the client site using Slowy

Close and sign off the performance budget at this stage, since emotions are high and customer is concern that is performing badly compared to competitor. Later on, whenever the customer wants to add new features, give 3 options:

  • remove existing feature to add new one
  • optimize the new feature
  • don’t add the new feature

(most of the time no feature is added)


Update (09/03/2015) – check my notes on Day 2.

Conference site: http://conference.awwwards.com/