16 Oct 2013, 09:30

Paris Web 2013

I had the opportunity to attend Paris Web last week. For those who don't know Paris Web, it's a conference about webdesign, accessibility and quality, but not only/strictly and 2013 was the 8th edition, gathering 600 people in Palais Brongnart and almost 600 online too with the live. All the conferences were recorded, so if you are interested, you'll be able to watch them online later.

For me, It was 2 days with a lot of insights, values and beliefs on what the web should be and how we should work and somehow live with the Web.

Below a summary of the talks I attended.

Day 1:
  • "La folle journée ou la fourberie d'un projet" : a funny introduction with a story with all the "clichés" about a web project : use of trainee, lack of specs, lack of organisation, etc.
  • "API Best practices" by Eric Daspet (slides) : Eric provides some feedbacks about his own exprience on builind API ; a few lessions he learnt and shared :
    • Dates are ambigous, especially when you deal with timezones ; be the most defensive as you can against date (don't assume lazy people will provide UTC based date for example but more a local date with timezone)
    • Plan additional langues to avoid breaking your JSON object and more globally your API when adding a new languages
    • Pagination : your collection can change between two requests ; so implement a strict filter and some before/after pagination than using offset and limits/quantity
    • Enforce pagination and limits to avoid a client making a query on the whole collection
    • Versioning : be compatible but not that much. You will fail to some extend, assume you will have to redesign your API and have a v1, v2, etc
    • Structure : be predictible with your URI schema ; don't have more than 3 levels (collection / item / link)
    • Encoding : avoid special characters to avoid some double encoding in some code (yours or the one of your client)
    • Security : never implement your own system, rely on standards like HTTP-Baisc and oAuth ; provide a mandatory SSL/TLS channel.
    • Make your API simple to start with but the most flexible/opened also to be easily extended later
    • Mix a bunch of state of the art, standards and pragmatism to have the right balance to build your API
  • "I code so I test" :
    • Remember that Ariane 5 rocket exploded for a cost of 370 millions $ for a code from Ariane 4 which was not tested and for a test estimation about 300.000$
    • Review of the main tools for testing (unit / integration / functionnal / UI / validity / compatibility testing)
    • Aim is not to improve code quality by the test ifself but the process it requires
    • Imrprove code resilience, maintenance and evolutivity
    • Imrpove the trust you have in the code, even if you are not the one who developed it
    • There is a learning curve which is not that much about the tools but about the experience on how/what to test
    • Be realistic/pragmatic in your tests but always tests
    • Start better with a wrong test than with none. Never wait for the perfect test and you will improve them over time.
  • HTML5 accessibility (slides) :
    • There is still a long way to go even if browsers do mostly their job. It's because of the WIP status of HTML5 but also the fact that browser are not always connected to the "Assistant tools" to which they should provide information. Even if not up to date, you can check HTML5Accessibility.com.
    • Overuse of "section" tag in HTML5 is what we had with "div" tag in HTML4, whereas "section" are visible in audio system (and not always div, creating too much noise but at least being visible)
    • Aria is to make the bridge for accessibility when native tags are not sufficient. It will use shadow dom
    • Tip 1 : if you use a "section", provide a heading to make your section meaningful for audio/screen reader devices
    • Tip 2 : if you try to enhance some native html tags (like input) to make it looks fine for non paired people, think about accessiblity
    • Tip 3 : Use native html tag instead of Aria components when possible
    • Tip 4 : Do not change/alter native HTML semantics
    • Tip 5 : all interactive ARIA controls must be able to use with keyboard
  • Subtile accessibility :
    • On mobile, you have no keyboard nor short description ("infobulle"). So you need to find alternatives to make your content accessible.
    • Some patterns (navigation, links management, etc) are reviewed with a few tips to improve the accessibility. Some tips can be used also to improve UX for non paired users.
  • Learning to love : crash course in emotional ux design
    • Starts with reminding that design is not just about how it looks like but also how it works (cf Steve Jobs quote)
    • Impaired people have difficulties to choose because of this lack of "emotion".
    • Before an application can create an emational relation with user, it must meet basic needs first.
    • It's not because a product is useful that a product is usable.
    • When for email you use the "no-reply@domain.com", you just say you users you don"t care about them ; you should better use a please-reply@domain.com
    • Introduce emotional design smoothly with a progressive adoption, starting by fixing an issue so that you have a first rolling point for emotional design.
  • A small step for "em", a big step for the Web by Nicolas Hoizey (slides)
    • Start with a reminder that we should allow user to set his own preferences (font size, etc) to adapt the site to its needs, and thus we need to give them control on the site but with keeping the control on main layout.
    • For these need, please enter "em"  (and "rem") units both for font-size but also for vertical and horizontal grid. Idea is to adopt proportional/relative size and adopt the elastic rendering (which is not the same as fluid which was more a fixed side but set in percentage)
    • If you also mix an "em" approach with responsive web design, you should both offer a good accessibility and user experience with an adaptated rendering.
    • Promotion of the Future Friendly movement, which I'm also really fan about and share the vision of the web.
  • Impactful user experience user strategy : thoughts about UX based on a delivery issue use cases, making think about the whole process and the vision of each participants and how it impacted the whole user experience.
  • HTML5 Javascript API : based on a memo game html/js/css based, the author introduced some CSS/JS/HTML5 - I did not find it that interesting but maybe because it was end of the 1st day.

Day 2 :

  • Adaptive images for responsive webdesign : a review of some techniques to make adaptive images and for each of them a review in termes of performance, complexity (use of dependencies, etc). We can conclude so far that there is no obvious solution and that so far you need to find the solution adpated for your needs. So it's still a nightmare to some extend for a frontend developer and the fact that CMS would also have to manage it for end contributors, is another challenge.
  • Integration, the "it depends" universe (slides) : Frontend devs needs to know from day 1 the requirements and the constraints of the project to make the right assumptions on how they will integrate the site at a HTML/CSS/JS point of view and choose the right solutions. The latter you provide information/constraints to him, the more impacts it can have.
  • Retroactions loops or how to customise your application :
  • Think Mobile UX (slides) : a very interesting talk on mobile UX by focusing on "degrated" moments (when waiting, when out of connection, etc)
    • Challenge : need to think about interruption and breaks, with a requirement of efficiency, on a short and narrow screen
    • Work on the waiting time the user felt and not the real waiting time to allow him keeping focus on his task and without making him angry about your app. like trying to provide an app skeleton to make feel the app is loading, or provide first local features or assume your connection and transaction will succeed and provides an immediate feedback and do the transaction asynchronously (like when the like is displayed in instragram)
    • Focus on the main task of the app to make it damend simple and fask. Secondary task can then be sub-optimised
  • Rusy web (slides) : a "philosophical" talk about data resilience, what should be kept/deleted, who should do that, etc. More open questions than anything else but an interesting talk as the web is only 20 years. What may seem useless now may be useful later for historians but you also have the privacy issues and your digital legacy.
  • Designing with sensors, creating adaptive experience
    • Not really related with web topics but was very interesting especially for the issue it raised about use of data, if robots could make human dumb, etc.
    • Adaptive design is to make a user experience dependant on context and user (so it's not responsive design)
    • Sensors and related intelligence start to be everywhere from Google Now to your Heating system sensors or if you enter a shop, your device would awake, open the app of the shop and become a personnal shoping assistant.
  • Mobile and accessibilty, a trojan game (slides) :
    • Accessibility aspect of projects were often neglected making the assumption impaired people were not using your website.
    • When you look closely to mobile web, it makes us feel as impaired people. So web mobile is a great opportunity to make site accessible by meeting the mobile requirement
    • Tip : if you allow transaction on mobile, increase session and use local storage to allow people to go through their transaction even if they are disturbed or punctually disconnected
  • Paradox of choice :
    • The more choice you have, the more disappointed you will be. Indeed the right choice seems impossible to make. For e-commerce, you need then to filter/sort/narrow user's choices to make him chose the right solution for his needs.
    • Tip : instead of suggesting similar products for which you can create a higher deception, better suggest additional products.
    • Focus on the end of the transaction process to provide a feeling of satisfaction ; what happens before does not matter that much
  • Lighning talks session (people to present 1 topic in 4 minutes)
    • Two devs from Microsoft made two live coding talks with the BabylonJS framework, one to show how to implement a tetris game in HTML/JS/CSS and one about building a first version of the solar system. It was really impressive !
    • I stopped to save the world : what happens when you stop being a hero in all your projects and that even if it may explode to some extent, gains are higher than keeping being a hero both for you and your firm and projects.
    • Others were nice but not that worth to be mentionned :)


What I liked by attending Paris Web :

  • It makes you think about your job, your values/beliefs, your vision of the Web. I should definitely have attended earlier and I need to find how to stay close to these microcosm/universe to sustain skills/values/beliefs.
  • Some topics seems very far away from my current challenges but who knows...
  • It confirms/extend your knowledge on some topics but also let you discover new ones

Videos of each conferences should be available soon - I strongly encourage you to watch them and attend the 2014 edition.

Extra resources :

09 Oct 2013, 09:30

Web Roundup - 9/10

Responsive web design

  • Viewport resizer, which defines itself as follow : Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page
  • RWD Bookmarklet : a bookmarklet which allow to see you to what extend your site is responsive with some features like making a keyboard appear, etc.

User Experience

Javascript

HTML/CSS

  • Clipping & Masking in CSS or how to use CSS to apply some "filters" on your images.
  • CSS @supports (CSS & JS) to detect browser support for a given (CSS) style directive. It means you will structure your code based on feature detection. Not fully convinced but worth to know it exists.

02 Oct 2013, 09:30

Web Roundup - 02/10

A bunch of things, not really classified this time :

On Javascript side :

On tools side :

  • Google just released a new WYSIWYG authoring tool called Web Designer ; so far I always remained far away from such tools (remember  Dreamweaver in the early 2000s ?), but first feedback seems positive so far. Even Mozilla evangelist Christian Heilman is positive about it.
  • If you are a Raspberry Pi owner, you can also have a look at another Google's project called "coder". It aims to make you learn about web development.
  • The top 25 (responsive) design tools : a bunch of tools to ease the way you will build your site, not all are about responsive and can be used for "traditional" needs or not only for responsive designs.
  • Telize is a JSON IP and GeoIP REST API for IP Geolocation : This service offers a REST API allowing to get a visitor IP address and to query location information from any IP address. It outputs JSON-encoded IP geolocation data, and supports both JSON and JSONP.
  • Jq, a lightweight and flexible command-line JSON processor.

On HTML/CSS side

On tests side :

  • Test first : you could sum up the article with You should write tests. You should write tests first. You should write clean tests first! and test are specs (as in the RSpecs language where tests can be read as a specification)

On webperf side :

One day I hope I'll have enough time to write about AngularJS, Web Components Grunt/Yeoman and ElasticSearch, which I find promising and interesting, but need some time to dive in.

12 Jun 2013, 23:10

State of the Responsive Web Design (RWD)

A brilliant article on the state of RWD and its French translation ; as stated in the article :

In this article, we will look at what is currently possible, what will be possible in the future using what are not yet standardized properties (such as CSS Level 4 and HTML5 APIS), and what still needs to be improved. This article is not exhaustive, and we won’t go deep into each technique, but you’ll have enough links and knowledge to explore further by yourself.

Topics covered in article :

  • Status of the images with the issue of quality and performance,
  • The layout, ie how can we render the "same page" in different devices,
  • End of pixel based design with the use of viewports instead,
  • Typographiy,
  • Form management,
  • Table management,
  • iFrame management,
  • Video management,
  • Navigation,
  • Touch capabilities,
  • and a few others.

03 Apr 2013, 22:22

Web Roundup - 3/4

Below some links I found useful / relevant / interesting to share :

21 Mar 2013, 22:16

Which responsive images solution should you use?

In the article "Which responsive images solution should you use?", beyond the list of techniques to implement, the interest is to provide a few question you should ask yourself when implementing and depending on each case, some adapted solutions :

  • Do I have legacy content ? That is to say how to make my existing content responsive without editing it manually one by one...
  • Do I care about special markup ?
  • Do I care about semantics (and thus accessibility) ?
  • Do I care about code validity against W3C norms ?
  • Do I care about art direction (ie to what extend can I crop/alter the original image)
  • Do I care about Javascript ? (ie what happens when Javascript is disabled ?)
  • Do I care about server side components (ie should I transform images on server side or client side) ?
  • Do I care about bandwith testing (ie do I test bandwith to provide the most adapted version of the image) ?
  • Do I care on relying on 3rd party services ?

As a reminder, responsive images means to provide adapted images whatever the device you use from a smartphone, tablet, PC or TV or ...

19 Mar 2013, 22:14

Browser Diet : How to lose weight in the browser ?

Browser Diet is an initiative to promote best practices on front end web performance. It includes so far 24 best practices on different categories :

  • HTML
  • Javascript
  • CSS
  • JQuery
  • Images
  • Server optimisation

For each best practices, bad and good practices are introduced and a tool are suggested to achived this best practices.

If you are familar with YSlow or Page Speed, you may know most of them. However some best practices are mode "code oriented" and the fact that some tools are suggested or some links to useful ressources make it worth to read even if you are familar with webperf topic.