I am building a web app that will have a large number of clickable elements. The problem is if I style this with web best practice i.e. different colour/underlined etc the app looks a mess due to the vast number of links. see image
If I dont style the links I may ruin the usability but if I make them obvious it could look hideous and distracting. Web apps like feedly are using links that are not immediately obvious unless you hover on them but their positioning is quite standard which helps.
Are hover states enough for users to discover links or is there another way to keep a clean style that does not ruin UX?
Have a look at (big) sites with lots of links and see how they do it. Big sites normally have there UI experts, so you can use there expertise for free.
Amazon (and Stackoverflow) for example has the links in blue, the underline is only showed if mouse hovers above the link.
Also you could show links that were already visited in the same style and color as links not visited yet, as by default visited links have a different (purple) color which adds to the fidgety look.
Related
How do I raise the contents closer to the head? The Left column should be closer to the dancing baby. The main area (starts with About Us) should be closer to the menu Fun Fun Fun. Don't worry about the white space above the menu... I have plans for that area. AND... can the answer help with other WordPress themes? ie; is there some CSS coding to do?
http://fun.mrchuckw.com
The best thing to do for long-term learning and development of WordPress themes is to learn how to use the developer tools in Firefox (or Firebug) or Chrome or Safari or IE.
Like this:
Those tools will allow you to see what's loading on your site and in the theme and let you work with and change the CSS and HTML and see the results before you make changes to the style sheet and templates of the theme.
And, make a child theme of your MetroX theme so any changes you make will stay if you update the parent theme. See Child Themes « WordPress Codex
I read through the page's source code, you want to open your theme's CSS page, this link here. Under the "==========Header=========" section, you should reduce the values of (or completely remove) the padding/margin-top.
I have a few "a href" image links and hovers on a website for navigation (www.byrdnick.com, in the non-mobile version of the site). It seems that these image links confuses iOS browsers. When you tap the image link once, it changes to the hover image. When you tap the hover image, nothing happens. When you tap the hover image a second time, you are finally redirected to the link.
Is there any way I can make these image links work or am I going to have to try a whole new method like a map or something?
Thanks in advance to all you gurus who help guys like me out!
This is because of all the strange stuff your psd2css.js javascript does to tweak your divs and links.
I never used this tool, but it seems that your Web page was generated using an tool called psd2cssonline? This tool seems to add some obscure treatments behind the scenes to all your <a href> links. This is easy to see in the psd2css.js file, once the document is loaded, the script adds some magic to all your <img> hover functions.
I didn't study the whole javascript added by this tool, but I'm pretty sure that it is the reason of the problems. This tools does not seem to be compatible with touch-screen devices or somehow does mess with touch events in a mobile environment where "hover" are non-sense (you can't "hover" an item on a touch-screen!), and will probably need to be updated to be able to manage mobile versions of the web sites it generates.
Meanwhile, you may try to disable this script (and everything else that may be generated by this tool to automatically add behavior to your links) when your website is accessed on mobile, to avoid messing with the "hover" events in such cases and simply keep the standard behavior that you have without any similar script.
As long as it's something similar to what I have below and you don't have any odd class that is conflicting, you should be ok.
<img src="some image" />
Assuming there is no og:image or link rel img_source, does anyone have any real-world experience or advice on better-than-random techniques to choose an image that best represents a web page?
Update: All answers are good, so upvoted them all and selected one, although it seems there is no great way of doing this. I will experiment with largest picture and screenshot of what it would like on a low-res client. Thanks all!
PS: I'm finding that quite a few pages seem to have og:image or link rel img_source anyway. More than I expected
Taking a screenshot of the website in its smallest possible form, how it would look on a notebook laptop or even a mobile (but not the mobile site version), would be a non-random approach.
Most good web designers will try to make sure users are able to see what the page is about immediately upon loading and include the most important and relevant information 'above the fold' as they say.
Choose the logo of your page as the og:image. That way your brand becomes associated with all your posts, without having to worry about what image best defines each individual page.
For other pages, you cannot control what image they have.
You could investigate how sharer.php works but other than that there is no silver bullet as to choose which image for a web page that has no definable image.
I don't have any experience with Facebook opengraph, but one trick I've used before is to grab favicons of sites I've linked to and use them as link button icons... They're small and are usually always associated with the company name and/or logo, and they're pretty universal across most professional websites. And the usually univeral filename favicon.ico makes it really easy to pick out of the html (or the link attributes if they change the filename).
Might give that a shot if that could be adapted into what you are trying to do. If you find that doesn't look too good, you can try a more "web 2.0" take and check for iPhone/iPad button apple-touch-icon png images (probably only find them on big name sites though)http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
I would normally suggest that you simply scrape the page of img tags. However, these days, CSS background images are frequently applied to h1/header/div/a/etc. tags to display logos in place of text.
One possible solution is to grab all elements with 'logo' in their ID/class name:
var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');
If this is/contains an img tag, chances are you have the site's logo. Otherwise, if it's a div or other such container, you'll need to dig into the child elements' CSS properties to see if they have a background image.
From this you can build a set of candidate images, which when combined with a heuristic based on (for example) image dimensions, should hopefully spit out a logo every time.
I hope this helps you on your way!
Going for the logo is usually the wrong way. Seeing it from a user of your website's point of view I would rather want no image than a logo all the time. This is the same as in Google+ or Facebook links. Only show images when it really does make sense.
However finding the corresponding image may not always be trivial if there is no og:image or rel="image_source" provided.
An article usually has a title which is presented as <h1> or <h2> tag. The nearest image may be the right one. However the nearest may also be a logo so this can go wrong.
I would do that very pragmatic. I would fetch the most likely image first and read the given EXIF data, if this is a real image there are informations provided. If this is just a logo, spacer or some other kind of layout graphic it does not have EXIF data and therefore is not relevant. If the first picture is not the right tough, I would fetch the next one and so on.
Another clue may be the HTML5 <article> tag which usually has the corresponding image to the post nested.
Nevertheless there are several web designer not using standards and their webpage may not be parable nicely.
This works fine on my computer but im wondering if its a good idea in terms of accessibility, etc.
I have a page of product listings, and I want each listing to link to a product page. The listing is made up of an image and a few photographs of text.
I want the entire listing area to be a link, including white space. So rather than make the images and text links individually, ive put the entire div in a link.
As I said, this is working fine on my computer, but is a good idea for a production site?
Thanks
If it's like a grid or something, and you give a visual cue when the user moves the mouse over the row (background color changing etc) along with the cursor becoming a hand, it should be fine if you use the whitespace as part of your link.
If you want me in your website's audience, I would prefer if you wouldn't. When switching between windows, clicking in the window area is the quickest way to switch focus between windows. If like 80% of your window is really a link, I would find that annoying. I think I am not the only one.
The way it sounds there is also plenty of area which you can make behave like a link, such as the image, and the text in the grid. If that would be clickable, that would be big enough a target to hit.
Also imagine your app being used on a touch screen. These sometimes imsinterpret drag (scroll/zoom) and tick gestures. Which is annoying if everything responds to clicks.
Look at the right-side video links on YouTube. These are block-layout spans wrapped in a tags. (Not that just because Google does it means it's a good idea, but...)
If the area has a :hover color (as these do), then it should be clear enough to the user that this is an action item.
Syntactically it's invalid, you cannot put block elements (div, p, table) inside of inline elements (span, a, strong, em).
Is there a rule that states that all links should be underlined to make them look like links? I have seen many sites where the footer, for example, does not have underlined links.
There's no rule, but it's good design to make your design act as users expect it to (and most users expect links in text to be underlined). So if you don't underline them, make sure the look obviously clickable. See: http://www.useit.com/alertbox/20040510.html
I personally can't stand links that aren't underlined in text (See: Stack Overflow). You shouldn't have to scrub the text see what's clickable.
I would say no, underlining links is pretty gross these days. Do you see any underlined text on this site?
There's no rule, but it does help people navigate your site if the links on a webpage stand out somehow from the surrounding text, and one convenient way to do this is to have them underlined. That way, you can color them however you like, but they'll still stand out.
The biggest argument that I've seen (can't point out where exactly as it has been a while) for using an underline is accessibility. Although changing the color of links may be enough for those users that have the privilege of seeing color, for those who are colorblind they may have extreme issues trying to find the links without any other differentiation.
I find that although the underline isn't the cleanest look, it doesn't look terrible with many pros including the accessibility I mentioned above as well as the instant "know how to use" factor the underline is well worth it. I speak of these points with respect to links in bodies of text. In main site navigation, footers and other very obvious places you can customize more freely of course.
Sorry for resurrecting an old thread, but I saw that no one mentioned the color-blind argument for underlined links so I figured it would be worth it for anyone in the future who reads this.
Such as Stackoverflow for example. =p
Do whatever you want. Personally, I like the clean look of links without underlines for a more "button-esque" feel on my sites.
Links should be distinguishable from normal text. If you do that by underlining them or just by changing its color is your decision. Underlining is just the classic way.
Links don't have to be underlined -- I'd argue that underlining is itself hard to read and a bad default standard we've inherited.
But links should be consistent. In other words, whatever color or style your links are, stick with that same color and style throughout the site whenever possible. Don't make one thing clickable in red, and another thing clickable in green.
And yes, we break this rule on Stack Overflow sometimes. Notice that the title of this question is a clickable link, but it's not in the link color because that would be sort of .. obnoxious.
Its an aesthetic decision - what looks best is up to you. There are no web standards that define this kind of thing.
What other visual cue can you offer a user that the text is a link and not normal text? A different color works, perhaps a style?
Visually an underline is simple and universal, but there is no hard rule. Just make them obvious.
Not necessarily, but when the user hovers the link, it could be underlined instead. And the link should stand out some way, either being bolder or a different color. Blue is an excellent hyperlink color.
There are no "rules" you have to follow. It's a common interface convention that tells people that those words are, in fact, links. If you choose not to underline them, you should find some other method to show people which words are links, if it isn't clear.
As long as a link is distinct on the page as being a link you should be alright.
For example:
a different color than the rest of the text
changing color on hover
having a background color
There's no hard-and-fast rule that says that they must be underlined, however there is a general convention that links should exhibit a noticeable difference to regular text (and should, at all times display the link cursor, e.g. the 'hand' cursor).
It is, however, generally accepted that users recognise underlined links more quickly than those that don't conform to something that someone would 'expect' to be a link.
Links should look distinguishable and clickable without having to hover your mouse over the screen. If you want to go away from the normal layout it's best to have a friend, one that's not tech savvy try out the site to see what they think. If they can navigate from page to page without problems or hiccups then the page is fine otherwise you should reconsider your approach. It's one nice thing to have a good looking site it's another to make it usable.
If you only use colored text for links then the underline becomes unnecessary.
In cases where the design does not allow for a high contrast link color then you may need to use under line.
As long as it is obvious what is and isn't a link, I think getting rid of underlined links is perfectly acceptable.
What I really hate are sites that underline text which are not links, please don't do that.
The page should be kept consistent - if one link is underlined then they all should be. If you don't like underlined links, no big deal - just keep them all the same for a better UI I think.
The important thing with all web design is clarity. If you do not underline your links then you should provide at least a consistent method of rendering (back or fore colour for example) and some intuative visual feedback to the user to indicate that the link is there such as underline on hover, mouse icon change or change in previous fore or back colour.
The best way to test these things is create a mockup and let your gran at it. If she understands first time then you have made it clear!
Happy coding.
I don't mind either way. Well almost.
At least, blue underlines are a clear signal that users identify as links. A well established convention as well as a browser default. That's why most Web design articles advice to avoid underline typographic effect.
And I dislike links that doesn't look like links. For example I recently found a site with black text and dark gray links (or was it the reverse?) of exact same font: it was hard to see links (unless scanning with the mouse! ack!).
Likewise, it is good practice to keep visited links distinguishable from unvisited ones: it is a good navigation help.
It really depends if having them stand out on the page is a useful property to have.
Wikipedia for instance takes the line off, which is probably a good thing considering half of the page would be underlined if left to defaults.