DESIGNED DEVELOPED DELIVERED

Mob: 07760 392284edward@ee-web.co.uk

ee-web thinks... a bit

Go on, make my day ... leave a comment

Kusuma Trust header

September 8th, 2016 by Edward

Recent clients, the Kusuma Trust have some really beautiful photography that draws the viewer in and helps to tell their story. From the outset it was decided to place different pictures across the top to act as the Kusuma Trust header, upon which various menu items would go. They were keen however, not to have a background strip for the menu text to sit on – which clearly creates potential usability issues regarding textual contrast.

The brief suggested that the image was to be :

  • full width
  • fixed depth
  • look good on all screen widths
  • possibly have some headline text fixed to its bottom on a semi-transparent background
  • and… easily maintained by the user

read more Read more…

categories
tag

Long bits of text – how to “Soft break” them

February 4th, 2014 by Edward

The more that responsive websites take off, and just about every job I do now is responsive, the more I came up against the same, silly little problem.

Namely – how do you avoid long email addresses sticking out of their containers?

Like this – you can see how the long string at the bottom has pushed the table outside of its container.

In the pre-responsive days you used to be able to get around this by careful use of a
tag or font-size. But as virtaully all my work is responsive now the need to sort this problem has become more pressing.

There are several complex ways of doing the job, with js and/or regular expressions for example. One way that is talked about is simply to insert the tab <wbr> which stands for “word break opportunity” and therefore lets the browser insert a break, if its needed. So you’d write something like hellofromavery<wbr>veryverylongstring

However, this doesn’t seem to work across the browsers, or at least not for me. Apparently the tab has been adopted by hhtml5, but IE hasn’t got there yet…

So then I tried inserting &#8203; into the string thus:

hellofromavery&#8203;verylongstring.

This was much more successful and seemed to work across the board – and best of all, when I stuck it into the middle of an email address, so it was on two lines, and clicked it the email still worked. FAB

So job done, at least in this case!

categories
tag