logo-bs logo-dxn logo-odl Group 19

The Design Team’s November Round-Up

This time it's Dwayne Codling's turn to round-up what's caught the team's eyes.


Web Typography: Designing Tables to be Read, Not Looked At

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

5 Common Usability Pitfalls of Custom Design Drop-Downs

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.

Why online shoppers abandon their baskets and how to stop them

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).


Designing for Performance by Lara Callender Hogan—An Event Apart video

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.


Case Study: Personal Logo Design

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.


The Portfolio of Nathan Riley

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.



Designer’s July Round-Up

Designer’s July Round-Up

Read More >

The Design Team’s October Round-Up

The Design Team’s October Round-Up

Read More >

The Design Team’s September Round-Up

The Design Team’s September Round-Up

Read More >

Start the conversation

Whether it’s a new site or an existing one, Jamie’s ready to respond to you on
jamie@wearejh.com or +44(0)115 933 8784