This time it's Dwayne Codling's turn to round-up what's caught the team's eyes.
In this extract based on his new book Web Typography Richard Rutter dives deep into what is essential for designing a table and gives us designers and front-enders a breakdown on why less is sometimes more relevant. Richard states that “your reader should still be able to be comfortably read and interpret the table from their normal position, without needing to lean in.” He elaborates on this point by stating that “Your design process should be an investigation into making the data undemanding to read, simple to follow, and easy to extract. Readability on every table should be planned way in advance.” One of the main takeaways from this article is that Table columns should be sized according to the data they contain. As a starting point, avoid any border or frame surrounding the table. This is a Victorian embellishment which is entirely unnecessary as text alignment will shape the table perfectly. Web browsers are very clever when it comes to table layout, and most will do all that hard work for you. Some rules include:
- Left-align text, right-align numbers, and align headings with data
- Align to the decimal point, Use tabular lining numerals in tables of numbers,
- Put white space to work to group and separate
- Keep table furniture and fills to a minimum
- Don’t stretch tables
- Do not over-stylise tables
- Adapt tables to small screens and Make tables responsive according to their purpose
Drop-downs provide many key interactions of eCommerce sites, from sorting lists to configuring products, not to mention many checkout inputs. This article provides data-based insights that show what are the best approaches. Keyboard navigation, and the associated interface feedback, is an issue that commonly affects custom drop-downs . For example, using a keyboard to navigate and fill out a checkout from can be affected by no styling for keyboard focus, or a user unable to tab and use the up and down arrows to auto-fill selections. 31% of all custom designed drop-downs have significant usability issues like these. There might be some cases where custom drop-downs may be better than a native drop- down. For example, where the drop-down shows an image of the item colour and related price points, making it clearer to the user what option they’re selecting. But more than likely, custom drop-downs are used for branding and styling, and not usability. If it’s just for styling purposes, the ‘Shell Approach’ is often a better alternative, and is significantly cheaper to implement initially, requires far less maintenance, offers better compatibility with older devices and browsers, and is more flexible in supporting future web evolvements (i.e. accessibility, voice control, interface-less sites, etc.). This is because all of the selection logic relies on the native HTML element.
This article by by Nikki Gilliland for Econsultancy, gives a list of the different reasons why carts are abandoned and offers practical real world examples and solutions that some of the best brands follow.
What we loved: Fontplop is an OSX/macOS application which takes ttf and otf files and outputs a webfont bundle: woff2, woff, tff/otf. It’s the simpler, faster, free successor to FontPrep. Crafted by the Gonzalez Bro’s (Brian and Matthew).
What we loved: informative 60-minute presentation, captured live at An Event Apart Orlando: Special Edition, the design and front-end conference, Lara Hogan focuses on performance basics from a design and front-end perspective.
What we loved: Michael Loscalzo has shown how, over the years, he has grown his personal brand. This is a well-presented blog entry that shows how you get better year on year during your own personal development.
What we loved: Nathan Riley Portfolio website uses animation, and parallax scrolling, throughout this beautifully detailed and sculpted website. Kudos on how well this works on mobile and how better it gets on the desktop. Really great work here.
- Powerful Start in Sketch Want to level up on your Sketch Workflow? Find out what are the best plugins that’ll get you on your way to being a Sketch Guru.
- Samsung The Frame + Wallpaper* This new innovative idea from Samsung uses the television as a picture frame, turning your living room into an art gallery. No longer will your television be a black screen sitting idle in the corner when off, simple stunning.
- Winners of the 2017 Epson International Pano Awards If you love beautiful photography and want to see what the best in world can produce, have a look at some of the winners of the 2017 Epson International Pano Awards.
- Halide 1.5: A camera app made for iPhone X There are some camera apps that stand above the rest. This Halide is made by Ben Sandofsky (development) and Sebastiaan de With(design) is made from the ground up for the iPhone X.
- Sketch Syntax Highlighter If you are someone that loves to code in Sketch, and you need a syntax highlighter, this is the one to look at. This plugin automatically highlights the syntax of any code snippet, right within Sketch itself.
- Warby Parker’s app is cleverly using the iPhone X’s face mapping to recommend glasses With the release of the iPhone X putting face mapping technology in the palm of your hands, Warby Parker has taken this feature to enhance its glass selection process.
- Building Flexible Design Systems by Yesenia Perez-Cruz This presentation by Yesenia Perez-Cruz, gives you a detailed walk through on how to build a flexible design system from scratch. Published on Speaker Deck,his presentation offers a great deal of insight into how to make you design systems more modular and easy to scale.
- Review: iPhone X Pondering whether to get the latest iPhone X but want a different type of review than a 15 minutes laboratory specialise feature lead YouTube video? How about using it in an everyday setting?
- Seven things we learnt at Canvas The write up by Deliveroo’s gives you a nice summary of the talks given at Canvas Conference.