Category: Web design

Posted on

Shipping web features for winter 2017

Until you ship a product or feature its just a trello card with a wish. Shipping “things” is the aim of the game.

Performance dashboard

According to the trello card of the request dashboards have been brewing since 17 June 2016. This month the team have finally been able to launch an initial performance dashboard at https://performance.bristolmuseums.org.uk/  We aim to publicly share our performance data so that anybody can see how we’re doing. We want to share our successes and show where there is an opportunity to do better. So far for 2017-18 we’re tracking 14% up from last year with a target of 1 million or more visits across our 5 museums and our Archive.

Exhibitions online

Since I started at Bristol Culture about 4.5 years ago using the web to display our exhibitions has been a recurring dream. Thanks to Mike, Fay, Mark and Lacey this dream has come true at https://exhibitions.bristolmuseums.org.uk/#/ the point of this project was to highlight some of the key aspects of past, current and forthcoming exhibitions. We regularly get asked about past projects so this seemed a good starting point to figure out how we can tell stories in long form format. With an average reading time of 2 minutes its important to be clear and concise.  During its inception originally we were comparing this style of website as being like a weekend supplement of a magazine rather than a full autobiography.

Public timeline

Internally we’ve started to attempt to improve how we visualise some of our most used data. An obvious element is “What’s on” which isn’t always easy to understand from huge spreadsheets or our standard web section https://www.bristolmuseums.org.uk/whats-on/ so we’ve introduced a timeline feature to hopefully make it easier for people to look at on any device.  Internally the timeline also includes things like room booking, install and de-rig periods and can map our KPI data over it. Nobody likes or uses data spreadsheets so i’m hopeful this is the beginning of a journey to make our data more usable for all. Hello https://d1g1t.al/#/timelinef

This work has been made possible in the large part by our own digital team who do a fantastic job under the hood of the museum and out in the galleries. Onwards.

Posted on

Add nth-child to your css toolkit

I have skimmed over nth-child (css) for the past few years, effectively ignoring it and boy was I silly for doing so. Picture this typical scenario:

I often have items in a list that are laid out horizontally and covering multiple rows. Until I discovered nth-child I was closing that list at the end of each row and starting a new list for each row so that I could control the margins and padding to ensure each item was correctly aligned.

Although this works it is very wasteful and assumes that all rows are different which isn’t always true. Then I stumbled across a tutorial by Trevor Davis who works at the amazing Viget. In a tutorial about css-transforms and diamonds I discovered he was using nth-child to change the margin for items that start on each row and it was this explanation that was my light-bulb moment with nth-child.

Over at Css-tricks where I could lose days learning new techniques  they explain how nth-child works very well and I suggest you head over there now to see it in action.

I have just added nth-child to my base templates and implemented it for a current project for CUPP. On the Shop page I have used nth-child to space the 4th and 5th items so they can sit nicely between the row above.

Posted on

Audio recordings from Responsive Day Out

Last week I attended the very affordable one day Responsive Day out in Brighton. It was on the subject of emerging practices within the web industry on responsive web design. I really enjoyed the day and think the format of 3x 30min talks per block is really good and I didn’t miss any of the pricey conference “things” they skipped out on to keep the cost down – more of this please!

All of the sessions were recorded and are now available to listen to, enjoy.

Posted on

Event: Accessible Bristol launch

Last week I attended the launch of Accessible Bristol, a local group who are hoping to gather anybody with an interest or expertise around accessibility. After an introduction from Steve Hilton, director of futures for the Bristol City Council, there were three talks and here are my notes from their talks.

Leonie Watson, Director of Accessibility at Nomensa with a talk called Digital inclusion reasons, challenges and action

Reasons

  • Liberty – Our day to day is now digital – Shopping, council services and travel
  • Economy – 20 percent may not have access and this is money being lost
  • It is digital common sense ( SEO, speed of access is important) to reach a wider and larger audience and is no longer a luxury.

Challenges

  • People’s attitude
  • Technology – we should ensure we kick out all the old technology that doesn’t aid accessibility
  • Lack of education

Actions

  • As a nation we can use the equality act, hopefully give the legislation more weight
  • As individuals be vocal to call out bad practices and technology
  • Change one thing about some technology that you have control over

Joshua marshall, Developer and accessibility lead for Gov.uk

  • Digital by default without leaving anybody behind
  • Getting 30 million visits a month which is the equivalent of everybody in the UK over 16yrs old
  • Why should we care ?
  • All gov.UK stuff needs to meet wcag 2.0
  • They started from scratch to purposefully leave behing crap tech and make it inclusive from the start.
  • Small teams, build fast and iterate, agile with a small a.
  • Aim to deliver the minimal viable product and get it in front of users.
  • Got developers? Ask really nicely or lie, cheat, beg, steal to get stuff done.
  • Start small, making tiny changes is still a step in the right direction and won’t be noticed if you didn’t ask for permission.
  • Add aria roles.
  • Have an ideal. Not all gov guidelines are equal, a WCAG double aa may not be best just because it passes
  • There is always more work to be done
  • Gov are trying to help by being an example.
  • They have the design principles
  • Trying to position digital by default by April 2013 as a service standard similar to BIS.
  • New and redesigned services that no need meet the standard will not be hosted on gov.UK
  • If he can do it for millions so can you for our smaller audiences
  • Gov.uk has had over 1000 releases since launch in October
  • Keep it lean as much as possible, hence no images until everybody complains ha!

Tim Taylor

  • Lloyds bank has around 103,000 employees and has been behind.
  • Laying the foundation for IT accessibility
  • Battery on phone dies…
Posted on

Me the user vs sizing guide

After being entertained watching Cal Crutchlow today in the MotoGP race I thought i’d show my support and buy one of his polo shirts from the official seller Clinton Enterprises.

I very quickly hit a snag.

The problem

Screengrab of shopping page

On the one hand, the folks at Clinton sell clothing in more than one size (yeeeah) but then on the other they FAIL to reference what those sizes are other than the usual “small through large”. This makes buying near impossible for the buyer and a likely large pile of clothing rotting in a warehouse under the end of season sale.

Zoomed in view of shopping page

The clothes item page. Missing the point by failing to let the buyer know what size is small etc. Clothing purchases revolve around the buyer who  a) chooses the clothes I want for a price I am willing to pay and b) chooses the correct size. Generally I am a “Medium” sized kind of guy. But not always. At this point you just lost another customer.

The small solution to a large problem

I would hazard a guess that adding a simple and clear “sizing guide” would reduce lost sales from folks like me, which would see an increase in (lost) sales and reduce support emails or telephone calls. I emailed them yesterday but with a long weekend due to two bank holidays I expect I’ll be lucky to hear back within 5 days…

Go and see that Howies has a great sizing guide table that also rather cleverly shows you exactly where the measurement should be taken.

screengrab of the navigation link to the sizing guide

Which leads to:
Howies sizing guide

The result of which is that I am now a regular howies online customer as the sizing guide allows me to buy with confidence.

Oh and please don’t make it a PDF, mainly because it is annoying but also you’ll be able to measure traffic to the “sizing guide”. If you want to go even further than Howies, put a link to the sizing guide right up near the sizing list – it may be lost in the footer.

** UPDATE 12th June 2012 **
#1 In the second graphic I questioned why it was labelled a 2011 polo shirt… turns out that this week (racing at his home circuit Silverstone) they have released the 2012 shirt just after my 2011 arrived at home…. why the 2012 shirt has only become available 1/4 through a season I have no clue – not happy to have missed this newer shirt!

#2 They emailed me back and it turns out that I am a ‘small’ size.  Great quality shirt.. even if it is a year old!

What is “Me the user VS?”

Whenever I come a cropper using a service I will document the experience. I hope this will be useful to those concerned but also to keep a record of my user experience, as sometimes it will be “it’s me not you”.

Posted on

Snook drops SMACSS

One of my web heroes Jonathan Snook has released a great digital book (website, ebook and print versions) about writing better CSS called SMACSS. I have read and re-read this thing several times already:

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.

Posted on

BUG: The Top Ten Things Every Designer Needs To Know About People

Susan Weinschenk gave an evening talk to the Bristol Usability Group on “The Top Ten Things Every Designer Needs to Know About People“. These are 10 things from her book 100 Things Every Designer Needs To Know About People. Below are my highlighted notes:

  • We have 3 brains (new, Mid and Old) which affects our view and reaction to the world.
  • People use their peripheral vision more than their central vision. Eye-tracking may not be as useful as we think as it is our ‘central’ vision – be careful
  • The Fusiform Facial Area describes our facial recognition system. We pay attention to faces, particularly those staring back at us (e.g. images on a website). Uses our mid-brain. Mixing multiple faces is creepy to us – think Tom Hank’s character in The Polar Express.
  • People want choice but too much choice de-motivates us and we choose nothing. The often referenced 7+/- two items (George Miller) that humans remember 7 items, is a myth. It is more like 3-4 items (Nelson Cowan 2001) and we only focus on one thing at a time. Thus limit choice.
  • We tend to design in a way that works for us rather than the users. This confirms that user testing is vital.
  • Understanding mental models is very important so that we don’t just design for ourselves. Our experiences between the ages of 8-12 shape our views for life. The demographic (30-40) are designing most of the UX experiences, yet are the smallest demographic which is a problem.
  • The speaker and listeners brain’s sync ‘speaker-listener neural coupling’ (Stephens, Grey + Husson, U 2010). Hence why video is so powerful as it has movement to grab attention and then the audio allows us to get in sync unlike text.
  • People have ‘weak ties’ of 150+ and ‘strong’ ties of -150 according to Prof Robin Dunbar. Something like Facebook is typically used for fewer people and is an example of a strong tie. Twitter, where people tend to follow larger number of people is an example of a weak tie.
  • Beauty is important to us. Based on research, websites should take advantage of beauty. A site could aim to be clear yet slightly unpredictable. People prefer curves to straight things). Beauty is in the eye of the unconscious, Tractinsky, et al.
  • Story telling is great. The brain processes information best when told a story.
  • Images can tell a story. For example if we hear a story about pain we know we are safe but our brain still acts like we are in pain without the ‘physical’ pain. Singer, T., et al. (2004). Empathy for pain involves the affective but not the sensory components of pain
  • People expect technology to follow human to human interaction.

 

Posted on

Make expressionengine links work

In Expressionengine, if you want to make a custom field work as a URL / link instead of plain text,  under channel preferences for the required channel ensure ‘Automatically turn URLs and email addresses into links?’ is set to NO.

Otherwise the link on the page will add the URL of the page you are currently on e.g example.com/url-of-custom-field which of course won’ t work.

This catches me out often enough that I need to document it here.

Posted on

Github confusion

Every now and then I find a useful plugin on Github to use on a project. However sometimes when I grab the plugin it won’t work with the expressionengine CMS and I could never figure out why, until now.

It might just be me but when I see the plugin folder on github (illustrated below A) I assumed this was what I needed. Grabbing the files and then installing them caused the plugin area of the control panel to fail and return me to the github page – i then delete the plugin from the server in order to get the plugin area to work again.

I completely overlooked the ‘zip’ button which gives me the correct folders/files and work…. (illustrated below B).

Problem solved,

View the github page in full

Screengrab of github page