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 ?
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)
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 :).
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.
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.
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.
Also, here is the best icon library (in my opinion) for designers AND web developers, with PNG, SVG, smart icons, etc.
Design for mobile users and theirs thumbs
A quick reminder on how to design a mobile app and reduce thumb stretching.
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.
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.
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.
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.
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.
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 😉
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.