Screenshot of https://xarta.co.uk on a portrait monitor on 21st June 2017

xarta.co.uk online – woohoo

CONTENTS:: 1 2 3 4 5 6

The Good

Click on image to download pdf

The site works reasonably responsively – tested on Android (Lollipop, Marshmellow) & Windows 10 (Chrome, Firefox, Edge):

  • Samsung Galaxy S3
  • Samsung Note 4
  • Circa 2009 Core 2 Duo laptop with discrete GPU
  • Haswell I7 with on-die GPU, portrait and landscape
  • Sandy Bridge I5 with discrete GPU
  • https://app.crossbrowsertesting.com for OSX and IOS (Safari)

 
I particularly like the “usability” of the flyout menu for touchcontrol … e.g. tapping again to close the flyout menu. (Note to self: use pseudo :focus rather than hacky opacity checks for active <li> !!!). And I like the JavaScript generated “beep” noises to indicate interaction.

The menu design I adapted from an existing left-hand-flyout menu is quite space-efficient and for limited items works well on different touch/non-touch devices with different display sizes. The controls-surface sizes are large enough such that the menus shouldn’t close spontaneously too easily from lost hover state while still using hover state for persistence (except for keyboard and touch interaction) so no inconvenient extra clicks required.

Print Friendly, PDF & Email


CONTENTS:: 1 2 3 4 5 6