Notes from Karin Christen — A Modern Take On Interactive Prototypes

These are notes taken with my tablet during the “A Modern Take On Interactive Prototypes” session at WordCamp Switzerland 2014 and I published them immediately after the talk. You can get a list of all my live-blogging posts of this WordCamp. Beware there may be mistakes, inaccuracies, and other imperfections in all these posts.

an Interaction Designer @wearerequired / required.ch

Interaction flow. Prototype iterations become better. Used for communication as well.

Her job is all about prototype in HTML/CSS for responsiveness and user testing .

Design in the browser early. HTML and CSS from lo to high fidelity. No static mockups.

Dynamic style guides.

Interactions should be designed in the browser which is the real canvas.

From lo to high fidelity. Take a front end framework such as Bootstrap. Wireframe. Add content. Add visual design. With iterations, getting to user testing. Refine the prototype until it becomes production-ready code. No waste of money nor code.

What matters are the skills. Some orgs focus on roles.

Teams. Focus on necessary skills. Front end. Back end. Target group expert.

Ricardoshops.CH redesign. Huge variety of product types. Prototype with real data and content types to see and play with variety. Dynamic content for the prototype and dynamic style guides.

It is a reference to communicate within the team and with the client.
Tight schedule made in time for Christmas.

No more PHP for prototyping.
Prototype generator and framework selector and dynamic content and auto dynamic style guide.

VUE.JS makes all this possible.

github.net/wearerequired

Update: Karin Christen released the slides.

Notes from Vitaly Friedman — Delightful UX: Little Details Matter

These are notes taken with my tablet during the “Delightful UX: Little Details Matter” session at WordCamp Switzerland 2014 and I published them immediately after the talk. You can get a list of all my live-blogging posts of this WordCamp. Beware there may be mistakes, inaccuracies, and other imperfections in all these posts.

Vitaly Friedman is editor-in-chief  and cofounder of SmashingMag. He loves beautiful content.

Artyping. Design with characters. Separators cones with type. Then pictures. Late nineteenth century.

Teletext. Invented by Phillips and the BBC. Pre internet. BBC people had to design Teletext screens.

Outline of cities and the ancestors of ASCII art. Then the internet happened.

TV guide (1953). With the advent of teletext, they created structured content and prepared for all the future channels.

Now teletext is available on the web and apps. It makes sense in terms of performance. Its text. Without the web, we would all be teletext designers.

Design a good URL. Make them into sentences. like Github. Clearleft.
Gov.UK.

Gov.UK wanted to get the answers citizens were looking for in the excerpt that Google provides.

Create the perfect and consistent Underline. Medium. Com spent  6 months researching this.

download attributes on links.
Data attributes for number of comments or length of the video.
Favicon with badges and other things.
Slide in and out panel for searching and filtering.
Default avatars with personality and niceness.

Mobile input UX is horrendous. Too many input fields.

Boingo redesign.
Dropdowns move towards sliders.
Placeholders moving from inside the field to the top.
Password fields .
Country selector.

On Yelp, you can use Emoji for search.

Branded Interactions.
RyanAir = Pain < value.
Delightful UX + value > pain.

Hipmunk. Takes preferences into account.

Stripe. Animations in interfaces makes you feel better.

Create stuff for FUN.

Notes from Stephanie Booth — Multilingual blogging

These are notes taken with my tablet during the “Caching small big things” session at WordCamp Switzerland 2014 and I published them immediately after the talk. You can get a list of all my live-blogging posts of this WordCamp. Beware there may be mistakes, inaccuracies, and other imperfections in all these posts.

Having more than one language on a webpage isn’t dirty.
Multilingualism is more common than we might think.
She gave a talk about this in 2007 at ETH Zurich.

Internet is the best space cruncher. Distance isn’t the barrier. Language becomes the barrier that separate people. In terms of content, linguistics borders are more important than political borders.

Three strategies are possible to bridge these

1. Translating everything — very hard and
bilingualism != translator

Example. Creation of Pompage.net and the pain of translation of “to hell with bad browser”.

She started with Blogger which makes things easy. Translation takes away from the spontaneous nature of blogging.

2. Splitting blogs. A blog for each language.

Difficult because bilinguals tend to use the majority language such as support forums. Bilingual brain drain.

3. Mixing it up.
Resistance is big. Because monolinguals would be hurt. Because it is bad for SEO.

There are no monolinguals and SEO isn’t that important. Write and stop worrying about SEO.

Mixing languages is easy for the blogger and the reader.

However skimming is hard in a language that you don’t fully master. Basic Bilingual plugin. Prefacing French posts with an English summary. Claude Vedovini who is a more competent coder rewrote the plugin a few months ago.

Questions
Mixing topics is a strategic decisions.
Would people move on and would you loose audience when they see that its in another language. This doesn’t really matter.

Examples shown by Stephanie.
Swiss Cats Blog — translated
Swiss Vibes — mixed
Vedovini.net uses Basic Bilingual

 

Update 9/5: Stephanie’s prezi presentation

Notes from short presentations in Room 1 #wcch

These are notes taken with my tablet during the short talks session downstairs at WordCamp Switzerland 2014 and I published them immediately after the talks. You can get a list of all my live-blogging posts of this WordCamp. Beware there may be mistakes, inaccuracies, and other imperfections in all these posts.

Loris Grillet — Selling your projects and building the perfect client relationship.

Horrendous complaints about clients.

Present the work well. Create Emotional bond between client and the project.
Carousel scene from Mad Men. Selling a world view, show the process, take the time to tell a story.

Explain. Don’t be afraid to show just one option,
Steve jobs about Paul Rand and the NEXT logo.

Jenny Beaumont — Case study: Custom digital downloads, an extension for WooCommerce.

Client needed to sell PDF that are customisable. Customers can personalise paper products for weddings. Flash wasn’t an option.

Review of competition.

Working with SVG. Job bigger than she imagined. With @Rarst, she created the plugin for WooCommerce.

Front-end is pretty simple. Interactive and immediate.

Output is a classic downloadable of Woo.

Patricia Brun Torre — WordPress hyperlocal community

Finding your community is an issue. She misses a place where she can share with her neighbours. The official commune website can’t offer interactivity.

Plans on Building a Buddypress community to ask her neighbours what they need. Once she has a Versoix version, she can replicate the site in other towns.

She wants to pass down her children’s clothes to her neighbours and finds place to do it.

Photo.

Getting local classified as as well.

Plans on provide the services to other locales.

She loves to work alone. Doesn’t want to get involved with the local government. Website of the people for the people.

Notes from Andrey (@rarst) Savchenko — Caching small big things

These are notes taken with my tablet during the “Caching small big things” session at WordCamp Switzerland 2014 and I published them immediately after the talk. You can get a list of all my live-blogging posts of this WordCamp. Beware there may be mistakes, inaccuracies, and other imperfections in all these posts.

Andrey is a techie from Kiev. Very technical talk.

He cares a lot about performance. Caching important for web dev.

People see caching as binary: on or off. Yet its not always full page.

Apdex shows distribution of perf between users. Caching makes or breaks the category of satisfied users.

What is each visit’s potential worth?

Can’t deliver great perf to everyone on a simple scheme with full page caching. Three approaches:

  • HTTP cache,
  • Edge Side Includes,
  • Fragment caching.

Transients API is a great API for fragment caching. Using the API directly, you have to tinker and dev on your own.

TLC TRANSIENTS. wraps transients APi.

Fragment cache (@Rarst plugin). It doesn’t do much. It takes interfacing with WordPress. Needs devs.

What’s SLOW on our sites? Photo of slide upcoming.

Gallery fragment handler hijacks the gallery short code.
Sidebar. Widget fragment handlers.
Menu fragment handler.

Conclusion. Never just “on” caching.
1. Implement
2. Monitor
3. Profit.

Slides. http://rarst.net/slides/caching

Notes from Sara Rosso (@rosso) — Recent Trends in Enterprise WordPress Content

These are notes taken with my tablet during the “Recent Trends in Enterprise WordPress Content” session at WordCamp Switzerland 2014 and I published them immediately after the talk. You can get a list of all my live-blogging posts of this WordCamp. Beware there may be mistakes, inaccuracies, and other imperfections in all these posts.

Sara Rosso. Content trends on word press
Long form
#longread is trending upwards
Longreads.com website
Long half life online. Shared long after publication.

Quartz. 500-800 words articles have less shares. Than breaking news or long form analysis have more.

Buzzfeed goes long form with BuzzReads

Newsletters are handy for content discovery.
Harvardgazette

Quartz’ daily brief. 70000 subscribers. >40% open rates. Hand crafted newsletters. Editions by geographic area.

USA Today. HBR.

wall street journal’s 10 points.

Micro sites and corporate.
Facebook newsroom. Google ventures. Alberta zmotor association.
Banks are coming to WordPress.

Bata runs on word press.
Coca Cola France runs on WordPress.

Social Media. Content has to be ready to be shared.

NewYorkPost’s Twitter Card.
TED conf blog on Facebook.

Having a picture ups engagement.
LinkedIn brings more and more traffic

Multi Source content.
Snowfall. Impact

Washington Post’s supergrid.

Walking Dead app powered by WordPress.

WSJ STREAMS

Charts and datajournalism.
FiveThirtyEight.com interactive content on Wp VIP.

Comments. Disabled on major publications. Andrew Sullivan’s TheDish.

Quartz have annotations. Attached to paragraphs instead of the whole post.

NYT. reader perspectives curated by editors.

TechCrunch. Facebook comments make things more quiet and better.

Questions. VIP news and the showcase to get more examples. METRO UK.
SEE her WordCamp Europe presentation.

Notes from Pascal Birchler — Lessons learned working on WordPress magazine

These are notes taken with my tablet during the “Lessons learned working on WordPress” session at WordCamp Switzerland 2014 and I published them immediately after the talk. You can get a list of all my live-blogging posts of this WordCamp. Beware there may be mistakes, inaccuracies, and other imperfections in all these posts.

How it started in 2008. German WordPress community was growing and talked about a magazine, so he started it.

Lesson #1. Don’t talk about it. Do it.

Didn’t know how to get attention.

Fake 2.6.4 sec update. He blogged about it and got discovered.

Lesson #2 Make a name for yourself

Stats dropped again.

Lesson#3: Continuity is key.

He got contributors.

He got an apprenticeship as a web dev.
Blogging became boring, so he changed the formula to a PDF magazine download.

Lesson #4: Be a step ahead.

WP magazine made a great success. But InDesign is hard. And he got an offer to buy his magazine

He wished to change from PDF to HTML5. Pupig seemed a good solution. He got a liscense key for free. He writes in Wp and then packages it with the service and makes it downloadable. WP Magazine 2.0. 10000 downloads / 3 issues published.

Drawbacks. Content creation is expensive. Android version of Pugpig was never up to standards. People didn’t like having to register on the site.

Lesson #5: Listen to your audience

Still not quite happy with his project. He plans  on launching SpinePress and make some money.


Questions
Plans on paying writers going forward. He doesn’t regret not selling it. PDF doesn’t allow social sharing and fine analytics. Sharing was better with the app.

Visit the periodic table of plugins.

WordCamp Switzerland in Zürich: Live blog

The music in the night club downstairs had just died down. People were getting ready to go home after a festive Friday night. Roaming the streets waiting for the bakery to open. Waiting at the station for the first morning train. I, however, was just starting my day.

I had woken up at 4am. The train for the first leg of my trip left at 5:10. I am headed to the WordCamp Switzerland in Zürich, a conference about WordPress scheduled to start at 9. At the time of this writing, I still have half an hour of train and a little tram ride to get there.

Tweets have already started going back and forth. @purzlbaum put together a list of attendees and the hashtag is #wcch.

7:30ish. Arau is grey. I hope it clears and warms up.
image

9:00 Opening remarks. Meetups around the country. Zurich. Bern and Geneva.

Live-blog style notes takes during the conference

 

Round-ups and photo galleries

 


I’ll update this post when I can.

#MyTopTenBooks, enfin!

Mon #MyTopTenBooks a été long à venir. J’ai finalement pris le temps de le faire et de le publier sur Twitter. Comme Shalf l’a souligné récemment, cet exercice est difficile et les critères que l’on emploie ne sont pas toujours clairs — parfois pour le curateur de la liste lui-même.

La Librairie du Midi à Oron a lancé un mouvement de “top ten” personnels. Depuis samedi 5 avril, toute la Suisse romande s’y est mis. Funambuline a rassemblé les données dans un Storify et Martin Grandjean a fait une analyse de ces données.

La méthode de génération de mon tas est empruntée à Martin Grandjean. En me promenant dans mon appartement, j’ai parcouru les étagères et sorti les livres qui me parlaient sur le moment. Ainsi, le classement est dépendant du contexte. Par exemple, “How To Think More About Sex” d’Alain de Botton s’est hissé dans le classement car, le matin même, je suis allé écouter Viviane Morey parler de la genèse de la Fête du Slip.

#MyTopTenBooks

“Let’s Pretend This Never Happened” de Jenny Lawson, à propos duquel j’avais déjà écrit ici, devrait bientôt connaître une suite. Je m’en réjouis d’avance.

Pour accompagner “Content Strategy For The Web” de Kristina Halvorson, je conseillerai aussi de lire “Elements of Content Strategy” d’Erin Kissane et “Content Strategy for Mobile” de Karen McGrane que je possède en e-books.

“The Areas Of My Expertise” de John Hodgman est le premier d’une superbe trilogie humoristique qui compte encore “More Information Than You Require” et “That is All” qui sont dans la bibliothèque en arrière-plan.

J’ai fait attention a avoir des auteures représentées dans ma liste (4 sur 10). Une autre chose remarquable est que tous ces livres sont en Anglais. Au delà de ces simples observations, peut-être qu’il n’est pas nécessaire de commenter cette photo dans les détails. Si vous avez des questions, je serai content de vous répondre.

 

#BizHeroes chat about curation

Last month, I had the privilege of co-hosting a #BizHeroes Twitter chat about curation with @SmallRivers and @KDHungerford. We had fun and I learned a lot. The feedback was positive. You can go to the transcript to see how people answered the following questions:

  • Why do you curate content?
  • How do you know when a piece of content is relevant?
  • How can we evaluate content quality?
  • What content do you feel can safely be dismissed? What have you decided not to pay attention to?
  • How do your curation efforts communicate your (or your brand’s) values and does it really elicit trust?
  • What are the most effective tools for content curation?