When you have a long line of text separated by hyphens, they will not normally be wrapped automatically onto the next line. This can be awkward, as it may break a perfectly good layout by breaking the content out of its containing box.
Some text like this for example, will not wrap if its container is quite narrow (say, in a table column).
466456-34635645-346346346-3463456
There is a solution - it’s the ’soft hyphen’:
­
Which will create a hyphen which will happily wrap onto the next line.
Though it is easy to criticise sites that are somewhat lacking in design smarts, not enough attention is paid to the opposite problem - overdesign.
Though it may seem logical to highlight important information on your site, overdo it and you could put off your users. If they see a panel which tries a little too hard to grab your attention, they could assume it’s an advert and ignore it completely.
This is illustrated beautifully by Jakob Neilsen, who uses the US Census Bureau website as an example to show how easily this can happen. Although the site has the US population in large red letters, when users were asked to find it, 86% would miss it entirely, assuming it was an advert.
Another example to illustrate the overdesign problem is the website of Boots the Chemist:
The site’s main content is made up of variously coloured, attention grabbing panels, which are likely to be ignored by the user. The large numbers in bright red font also add to the problem. (more…)
You may remember a previous post of mine, where I explained a method of using only CSS to create tooltips. Well here are two creative uses for that technique. Firstly - this map of the capital cities in the UK and Ireland. The locations are revealed when you hover your mouse over them:
This is done by creating a <div> which has the map image as the background. Links are placed inside this <div> for each location, and are positioned absolutely over the map. Inside each link is the tooltip text <span>, and a <div> with the class ‘dot’ to define the hotspot area. On the map shown, I have outlined these divs with a square, white border so you can see where they are. But of course you could make them entirely invisible if you wanted to. (more…)
Posted by Leonie under Interesting Links.
Here’s a nifty trick to make the content of any website editable - simply copy and paste this line of Javascript into your browser window, then play around with the content to your heart’s content:
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
Of course it doesn’t alter their code in anyway, it just changes the way you see it in your browser. There isn’t much of legitimate use for this, but it’s an interesting Javascript curiosity nonetheless.
(Shamelessly stolen from Blogstorm.)
Eyedropper is a useful little program which I couldn’t be without. It will tell you the hex, RGB or CMYK of any colour on screen if you hover your cursor over it, and so is invaluable for web development. Many people use Colorzilla for this, which is a Firefox plugin. However, the advantage of Eyedropper is that it works anywhere on screen, not just inside the browser window.
In addition, it also gives you the x and y mouse coordinates, which is very useful for checking that things line up properly. The program is very small and unobtrusive, it sits in the systray until you double-click the icon to pick it up. Then it will follow your cursor around, until you double-click its icon in the systray again to put it back. (more…)
Here are some free vector florals, made by me, in .eps format. For use in all your personal, non-commercial projects. An easy way to add a touch of elegant sumptuousness!
Here’s a nice easy method for making link tooltips entirely in CSS, without any Javascript. For a demonstration of what I mean, hover over this link This is a tooltip. with your mouse.
To do this, you will need to create a class for the links which require tooltips, and a <span> within that link to include the tooltip text:
<a class=”tooltiplink” href=”#”>this is a link<span> This is a tooltip</span></a>
I have put some spaces inside the tooltip span on both sides, so those with CSS turned off don’t view the link and tooltip text as being scrunched together.
Then add the following styling: (more…)
Here’s something useful - repository of logins and passwords for many different sites: www.bugmenot.com
It’s very handy for sites such as Stock Xchng (royalty free stock photos), Youtube, or the New York Times. Or really any site which tries to glean personal information for no real reason.
They also have a ‘disposable email’ feature for creating temporary email address. This enables you to sign up to sites you know will send you spam, without divulging your personal email address.
This is something I get asked about from time to time. The aim is to have some text which is there in the code, but is hidden when viewing the page.
You may be wondering why replacing images with text could be useful. The reasons are twofold. The first reason is to improve your site’s SEO (Search Engine Optimisation). Having a <h1> title makes it easier for spiders to correctly categorise your page, and a relevant and well-worded tag can improve the page’s ranking. However, for reasons of aesthetics, it’s often nicer to have an image as the header, perhaps with a unique font, or your company’s logo. Rather than have this potentially comprise your page rankings, it makes sense to use CSS as an easy way of having a nice looking page and good SEO.
The second reason is to enable accessibility, to maximise the amount of users who are able to make full use of your site. Pages which rely entirely on images for headers and menus are hard to navigate in text-only browsers. This may mean those with screenreaders have difficulty accessing your content. (more…)