Be responsive and look responsive (Webvisions NYC 2013 – Design and Content Workshops)
on March 13, 2013
After a full year without going to any conferences or workshops (I moved to NYC, worked full time job in a startup… article about that will arrive soon), I finally got out of my cave to attend WebVisions NYC 2013.
During those kind of events, I use Twitter as a way to take some notes. It is useful for people who are not attending the conference and it helps me to digest what I just heard and to make my own opinion. This article will be a mix of a selection of the tweets I published during the conference and some thoughts one week after the event. Hope it will help some of you!
“Responsive First: Building Sites That Scale” by Jason Cranford Teague
Jason CranfordTeague (@jasonspeaking on Twitter) did his presentation in HTML (responsive of course!) so everyone was able to follow it : http://jasonspeaking.com/rwd-WVNYC/
And now you can also have a look!
What did I learn?
- Retrofit a website to a responsive one takes longer to build compared to a project you’re building responsive from the start.
- RWD (Responsive Web Design) = web design philosophy that content and functionality come from a single source, and optimized to meet the needs of the medium.
- RWD Future Friendly: Built on Web Standards (will last), it separates styles from content and delivers styles based on device capabilities.
- I heard again that we should forget Photoshop and directly prototype on device. I am sure about that, but not sure how to convince people I work with, specially clients.
- Another tip told for ages: do not let older browers (aka IE) stop you from providing a better experience for the majority of your users (new browsers). Just plan a default solution for them.
- No more pixel perfection. Websites don’t have to look exactly the same on each platform. Less time comps more time on prototypes.
- Jason shared his current best practice: let’s do fluid between break points (wasn’t so much the case before but now there is too much different screen sizes).
- I heard just a few about Lean UX: less paper, more code, develop as a team, iterate, quicky define content, functionality, architecture, design (not detailed).
- Why prototyping? To plan, share, test, explain our ideas and concepts.
Tools and links
- Thanks to Jason, I discovered the perfect wireframe tool: UX Pin. I used it all this week for a project where I had to create an interactive prototype for a website I designed.
- He also talked about the tool he co-developed to prototype in HTML5 + CSS3 with Responsive Webdesign included: Protytype (I didn’t try it yet)
- I learned how to make webfont icons (Resizable without loss of quality, Can be styled and re-styled using CSS) with : Icomoon (Jason says that SVG images are still a bit unstable to replace webfonts for icons. SVG might replace his webfonts technique. He said he will publish an article about webfonts for icons.)
- I got the confirmation that the WordPress theme Lucid is the best template in terms of RWD for WordPress.
- RWD solutions for video: convert video with easy HTML5 converter.
- To test your prototypes on different real devices in the same room : Adobe Edge Inspect
- I also discovered a very useful website responsinator.com to test the different break points of your responsive web design. (For desktop and laptop, you have to add “&scroll=ext” at the end of the url to make the scrollbars disappear like here: http://responsinator.com/?url=sophiemasure.fr&scroll=ext (and yes, my portfolio is not responsive yet. I will work on that now that I have more knowledge from Jason ;) )
Sara Wachter-Boettcher, “Taking Content Everywhere”
What did I learn?
- We can’t think like we were 5 years ago: content is not only found on your website anymore – apps like Pocket, Instapaper take your content to display them on their app. You can’t avoid that your content will be taken on other platform, websites, app… –> let’s prepare it properly.
- We need to think our content to be able to be displayed everywhere and not stuck anymore on only one platform/device.
- Idea of having “pages” is not working anymore with all the devices, responsive, cross-channel, save for later, read everywhere…
- Content is unfixed to desktop, has to be portable to future platform, and devices. Content is more like water.
- COPE process: Create Once Publish Everywhere. Like http://www.npr.org is doing with its API. The same content is displayed on different devices.
- Sara says content being water is not not as good as “chunky” food. How to find a solution where we have fluid content but with emotions and texture? Answer: Flexible content.
- Flexible content needs to have structure: text fields with different items (author, title, related articles) instead of a big long article.
- We need meaningful structure which takes content knowledge.
- Stop talking about pages but really call each content how it really is (profile, recipes, list, article). That will help to find patterns and then design the website better.
- First, focus on meaning then content modelling.
- Mobile forces us to produce better concise copy, but in fact content needs to be good everywhere not only on mobile. Focus, prioritize, cut, rewrite.
- When you have content broken up into modules and pieces you have more options as to how you can display it on different platforms.
- Don’t always put the content at the bottom when decreasing resolution on the RWD process.
- Websites like the Globe or NY Times are in a better place for responsive content because they’re already good about structure – they’re publishers
Tips to improve your copy
- Be direct (2nd person)
- Be empathic
- Use human tone
- All meat no filler
- Use simple words
- Stick to the “one idea per paragraph”
Sara closed her workshop in the best way you can do it: she asked everyone to write on a sticky note what they will decide to do now, with their new knowledge, and when. Everyone played the game and we all said out loud what we wrote on our sticky note.
After 4 hours of workshop, that really helps to synthetize what we learned and we will remember the task we said we will do.
I said I will try to convince my client that content is important and I will help them to write better copies.
My feeling after the workshops?
I discovered really useful tools at Jason’s workshop. I knew a lot about Responsive Web Design before the workshop (already did a few RWD websites), but it was really good to have a clear and easy summary. What I really enjoyed was to learn more about prototypes tools and techniques to prototype directly on the browser.
I just regret that it was mostly a talk and less a workshop. I was hoping to come out with my portfolio vamped into a Responsive Web Design portfolio :) But I guess I mostly know how to do it now.
Sara’s workshop really opened my eyes about text content. Specially because I am french and writing in english seemed a bit difficult for me. But with her tips to improve a copy, it even motivated me to reopen this blog!
Her workshop was a bit long at some point, because of the exercise she gave us. We had to find solutions to improve SUNY website copy. I understand the goal of that but I felt it a bit like school homework… But at the end it really unstuck something on my mind: I completely have the skills to write copy or at least improve the one my clients are giving me. My instinct often makes me think that this copy sounds weird, but as I am not a professional copywriter, I never say anything. Now I will suggest better copy, change this tone to a direct tone, put a button with a short action instead of that long sentence…
New skills, new tools, new strength…. What else? ;)