All posts tagged ‘user interface’

File Under: CSS, Visual Design

A Universal Solution for Rounded Corners in Your Designs

Say what you will about the aesthetics of rounded corners in web design, the reality is you’re probably going to have to implement them some day.

It used to be that rounded corners required four separate images. Then came a clever trick that used just one circular image. But creating rounded corners was still a pain — the task topped our wishlist of CSS features back in 2008. Now, with the arrival of CSS 3, it’s getting much easier to create rounded corners without using any images at all. For people who are into rounded corners, it’s the greatest thing since tabbed browsing.

Of course there’s one big problem with CSS 3 — not every browser supports the whole spec. And some of them (cough, IE) don’t support any of CSS 3′s rules. So while it’s all well and good to create rounded corners with CSS 3′s border-radius, Internet Explorer and Opera won’t render it properly.

Thankfully, the next versions of both browsers, Opera 10.5 and IE 9 respectively, will support border-radius. But in the mean time (and to deal with legacy browsers visiting your site), web designer and blogger Jon Raasch has come up with a handy mix of solutions that creates rounded corners in every browser without resorting to images.

Raasch starts with the best case scenario — browsers that support CSS 3′s border-radius — and creates a pure CSS solution in the form of a class:



.rounded-corners {



    -moz-border-radius: 10px;



    -webkit-border-radius: 10px;



    -khtml-border-radius: 10px;



    border-radius: 10px;



}

    

For many that might be enough — Safari, Firefox and Chrome will all render rounded corners. Note the actual border-radius rule without the browser-specific prefix, which should cover any future case as well.

Given that rounded corners are generally not a make or break design element, you may be happy to let Opera and IE users see square corners on your pages. If, however, you don’t want any of your users to suffer the horror of angular corners, check out Raasch’s post to see how he solved the problem for Opera and IE.

Sliced bread photo: Emiline220/Flickr, CC

See Also:

File Under: Glossary

Banners

Banners are a basic unit of advertising on the web.

They were pioneered by GNN and HotWired back in the frontier days of 1994 and are now nearly ubiquitous, appearing in all sorts of shapes, sizes, and locations. You can probably see one right now at the top of the page.

Designers, Step Away From the Photoshop

In many cases, web design begins in an image editor. A designer mocks something up in Photoshop (or some similar tool) and that design is eventually translated into HTML, CSS and JavaScript to create a live website.

But why do we work this way? It violates one of the fundamental tenets of good design, that design should follow content. It also means working with static documents. You submit a design to a client, the client likes it, but wants all the corners rounded. Have fun changing the corners in Photoshop — meanwhile, we’ll be adding a single line of CSS 3 to our live mock up.

In the final post to this year’s 24 Ways (see our coverage of other 24 Ways highlights), Meagan Fisher picks up what’s become a popular idea among many of web design’s most respected voices — that web designers should do their mockups in markup. That is, start with a live HTML and CSS page to create your designs.

Citing Photoshop’s shortcomings (not to mention expense) Fisher argues that tools like CSS 3 make writing — and more importantly updating — your mockups pure code just as fast, if not faster than the old Photoshop methods.

But there’s an added benefit Fisher touches on only briefly that bears further emphasis. Working with the code from the begin gives you chance to refactor, refine and improve it before production work ever starts.

Part of the reason lies in something designer Jeffrey Zeldman once posted to Twitter, “design in the absence of content is not design, it’s decoration.”

Starting with content — whether actual content, or simply the markup of the page — will force you to focus more on structure and making sure that your design fits the site from the ground up. In our experience this leads to slimmer, more semantic and easier to maintain code. As with writing in any language, the real process is not writing, but rewriting.

Even if you’re thinking that the world can pry your Photoshop markups out of your cold dead hands, give Fisher’s piece a read and, even better, try starting with code and see what happens. For some it might mean learning a new skill set, for others merely a shift in thinking. Regardless of whether you decide to switch to this method for good, we guarantee you’ll learn something new in the process.

See Also:

File Under: Browsers, UI/UX

Help Mozilla Improve Firefox’s New ‘Home’ Tab

If you’ve got ideas about how the Firefox home page should look, now is the time to let Mozilla know. The company is hosting a new design challenge focusing on how to improve the home tab for Firefox 4.0.

The current plan for Firefox 4.0 is to move the home button down into the tab bar as a standalone and always-accessible tab. If that’s not to your liking, you’ll still be able to disable the home tab, or simply set it to a web page as you might be doing now, but Mozilla is hoping to make the home tab a bit more powerful.

Pulling the “home” concept out of the menu bar and putting it in its own tab means that the page can access much more than just the web. It could, for example, filter through your history, add-ons, bookmarks — or pretty much anything stored in Firefox — and present that data in novel ways. What sorts of novel ways is the part that Mozilla is leaving up to you.

While some browsers are using the blank “new tab” page to display a gallery of thumbnails of favorite sites or recently visited pages — Chrome, Opera and Safari do this — the dedicated “home tab” is a new twist on browser interfaces.

One thing worth mentioning: Mozilla isn’t looking for a My Yahoo or iGoogle-style start page. That use case is pretty well covered by iGoogle and its ilk. Instead Mozilla is interested in seeing what a browser start page can do with full access to your browser.

One example cited in the Mozilla Labs post is the About:Me extension, which shows you trends in your browsing habits — which sites you visit the most, where you spend most of your time and so on. As the Labs post says, “unlike mainstream portals like Yahoo and MSN, the locally hosted Firefox home tab can potentially offer users an experience that is innately personal.”

If you’ve got ideas and would like to participate in the challenge, create a short video explaining your idea(s). Be sure to include some sort of a mockup showing how your idea works — a wire frame, an image mockup, even a doodle on the back of a napkin. Once you’ve got your idea on video, upload it somewhere on the web and submit your entry using the design challenge submission form.

More details can be found on the Mozilla Winter ’09 Design Challenge site. The deadline for submissions is Feb. 14, 2010. Winners, both “people’s choice” and those picked by Mozilla, will be announced in March 2010.

See Also:

File Under: UI/UX, Visual Design

Debunking the Myth of the Page Fold in Web Design

Web standards give developers a way to build websites so that anyone can access them. Unfortunately web standards don’t cover more difficult problems, like how to make sure people can find what they want on your site.

For that developers need to turn to common design patterns, but unfortunately many design patterns are outdated. For example it was long held as a common belief that most users would not scroll down the page, so your content needed to be “above the fold” if it was to be noticed — a term leftover from newspapers where the primarily headlines are above the fold, so those walking by a newsstand would see the important stuff even though the paper was folded in half. The web equivalent of above the fold is the area you can see without scrolling.

However, that conventional wisdom is not nearly as true today as it was back when Jakob Nielsen encouraged developers to keep everything above the fold. Of course Nielsen’s own site has plenty of content below the fold — after all, the web isn’t a newspaper.

CXPartners, a U.K.-based design agency, recently posted the results of a study involving some 800 user testing sessions, and on only 3 occasions did the page fold stymie users.

Part of the reason for the shift can be seen in CXPartners’ hotspot study, which used eye tracking software to reveal that users nearly always spend some time glancing at the scrollbar to judge page size. Now, that doesn’t mean you bury your best content below the fold, but it does mean that you shouldn’t worry too much about things that simply don’t fit above the fold.

But one surprising thing thing comes out of the study is that having less above the fold actually encouraged exploration below the fold. According to CXPartners’s study, the judicious use of white space and visual clues that lead the eye down the page significantly increase the chances a user will scroll.

The key is to make sure there are no barriers that would make your users think there is no “below the fold” content. One example cited in the study had a large horizontal bar running across the page, which acted as a barrier — it looked like the bottom of the page even though it wasn’t. Eliminating the horizontal bar encourage users to scroll the page.

Although it might run against your aesthetics as a designer, clipped text and cut off images are also high on the list of things that encourage scrolling.

Here’s CXPartners’ suggestions based on their user testing research:

  1. Less is more — don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration.
  2. Stark, horizontal lines discourage scrolling — this doesn’t mean stop using horizontal full width elements. Have a small amount of content just visible, poking up above the fold to encourage scrolling.
  3. Avoid the use of in-page scroll bars — the browser scrollbar is an indicator of the amount of content on the page. iFrames and other elements with scroll bars in the page can break this convention and may lead to content not being seen.

So what would Jakob Nielsen think? Well, actually he seems to have weighed in in the comments, suggesting that what CXPartners discovered is old news. That may be true for Nielsen, but the CXPartners’ write up is much more readable than the technical, jargon-filled document Nielsen points to, and even if “below the fold” is a myth, it’s a well established one and there’s no harm in debunking it again.

Be sure to check out the comments on the CXPartners site for some helpful design tips and techniques from readers, as well as some thoughtful criticisms of the study.

Photo: Matthew Bradley/Flickr, CC

See Also: