Web Story 2016 #45 – Responsive and upcoming technologies

This year is almost over and 2017 is coming. What’s new in the web and how can we improve our work for this next year ?

Team work

Produce pixel perfect projects from designers to developers

This tools will help to share all guidelines from a design : fonts, font sizes (in px !), dimensions, colors, assets, etc. Sadly, there is only online tools, which doesn’t garanty any security and privacy.

With Sketch there is a tool who provide partially this functionnalities : Sketch measure (free)

Pixel-Perfect Specifications Without The Headaches

How to poison mobile users

The author is giving 13 advices on how to poison the usability and navigation of our websites or applications on mobile devices. For example, using full width carousel, using hamburger menu or making our touch targets really small :).

How To Poison The Mobile User

Design

Find your prototyping tool

The number of tools for prototye/wireframe is growing each years, and it’s difficult to choose which one is the right tool. This article will guide you to choose the tool you need, from the design fidelity you seeking, to the functionalities you need.

Choosing The Right Prototyping Tool

Designing cards interface

The card-based interfaces are spreading across web and mobile and is becoming a new standard by providing clear and easy access to content and functionalities.

Designing Card-Based User Interfaces

Icon for a great User Experience

What icon should I use? Should I use an arrow or a plus to expand this dropdown? And what about the hamburger icon? A great analysis of the impact of icons in a web interface.

Icons As Part Of A Great User Experience

Also, here is the best icon library (in my opinion) for designers AND web developers, with PNG, SVG, smart icons, etc.

https://useiconic.com/

Design for mobile users and theirs thumbs

A quick reminder on how to design a mobile app and reduce thumb stretching.

The Thumb Zone: Designing For Mobile Users

Help users taking better decisions

You can not expect your users to know how to use your applications and to make the right decisions. You have to help them by limiting their options and anticipate what they will do.

How To Build Honest UIs And Help Users Make Better Decisions

Are line charts lying to us?

By smoothing and joining points on a chart, we are “lying” to our readers. We guess data and except it to be linear, which is not the case. The author is analyzing a line chart and suggesting to use bar chart instead.

https://m.signalvnoise.com/lets-chart-stop-those-lying-line-charts-60020e299829

How to design error message

Should we use orange instead of red for error message? We want to warn the user, not scare him. That’s the type of question treated in this post.

How To Design an Error Message For a Mobile App?

Development

Reduce content shifting on page load

There is something really annoying when you’re reading a website, especially on mobile devices, it’s when the content is shifting and moving below because the image finally loaded. Big image file, slow connection, slow server, there could be multiple reason why the content is not immediately available, but what can we do about that?

This post give us solution for images, advertisements, widgets, web fonts, etc.

Ways To Reduce Content Shifting On Page Load

Responsive image breakpoints generator

The best way to implement images for every devices, is actually to use srcset attribute to provide an image for the right resolution and device. This article explain how to use the open source generator (available on Github) to generate the code and images for this AND is using an algorithm to crop and focus on the subject of the image (Art-direction) for smaller resolutions.

Automating Art Direction With The Responsive Image Breakpoints Generator

Display: grid, our next layout system?

Since a few years we are using flexbox to lay out our responsive websites, but it’s not very intuitive and don’t answer to every needs. The grid system is a new display CSS functionality available soon (probably early 2017) and already implemented as flags in modern browsers. Afraid of browser compatibility? Well, lets use the new @supports CSS media query for fallback 😉

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout

Content Security Policy coming up in 2017

This new feature is actually only available by flags, but it’s a candidate recommendation and the level 1 is actually already well implemented in modern browsers.

Content Security Policy, Your Future Best Friend