Design

The User Is The Anonymous Web Designer

Smashing-magazine-advertisement in The User Is The Anonymous Web DesignerSpacer in The User Is The Anonymous Web Designer
 in The User Is The Anonymous Web Designer  in The User Is The Anonymous Web Designer  in The User Is The Anonymous Web Designer

We invest time, money and effort into understanding our audience, and the movement toward a more socially networked Web has made us realize the power that visitors have over how our designs are engineered; and we try to meet their ever-growing needs. Community is integral to the evolution and functioning of a website, and visitors and website owners have become dependent on each other. This reflects a change in the industry: the user has turned into an anonymous designer.

This article will explore the influential figure ‘user’ and uncover the power of your community. Whether you boast social applications, interactivity or a stream of regular visitors, your audience might be a powerful untapped resource at your fingertips. You, the website owner, have the power to make decisions and override them (for better or worse), but the user deserves to be recognized as more than a statistic.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Traditional Roles

Back in the Web’s infancy, the roles of the Web professional and visitor were clearly laid out. Technologies such as email, bulletin boards and Internet Relay Chat (IRC) rooms existed, but most Web users were technologically inclined — cost and complexity of computers and Internet access were the biggest obstacles for many in the early days. Additionally, website were simple and the power of users was restricted; users had little sway with designers and developers.

The Professionals

The role of the Web professional used to be — famously, in the ’90s — to build websites that delivered certain information. Asking the user for feedback was an afterthought; this was evidence of the commonly held belief that we, the experts, knew what was best for users. Usability and accessibility were a luxury, and many website providers ignored them in an attempt to control the way the medium was used.

SM-01 in The User Is The Anonymous Web Designer
Historically, the Web professional’s role was to maintain websites.

The following were considered the primary tasks of the Web professional:

  • Providing content and services to the client;
  • Creating a website to hold the information;
  • Dealing with technical requests about the information.

The Audience

Traditionally, the role of the audience was to give feedback, but it had — and still sometimes has — no influence on the website. The romanticized notion that a website owner should do whatever they want is to blame. In the past, a website’s popularity was determined mostly by content; marketing was restricted to directories and search engines; empowering the user and improving the feedback process was far from the designer’s mind.

The following were considered the primary tasks of the user:

  • Give the owner financial incentive to continue offering the service.
  • Popularize or endorse the website;
  • Put the professional’s creation, free or not, to good use.

Those times have (mostly) come and gone. Without visitors, our websites would hardly exist, and when we realize that, we will abandon our old-fashioned ways and quit imposing our assumptions on users. Visitor interaction has become vital to the experience of a website, and the need for positive feedback — now visible everywhere and uncontrollable — has reversed the roles: our audience now has the voice and tools it needs to be satisfied.

Playing The Part

It has become important for us to define what roles the Web professional and user play in the dynamic process of building and improving websites, especially given the new-found focus on user experience and the development of tools that allow visitors to engage with and become attached to our services. Furthermore, ensuring that these roles are, in fact, played is essential to the process.

The Professionals

Professionals hold the keys to the castle. While many designers focus on the result, understanding what audiences need, what problems need swift solutions, which visitors require these solutions and how best to implement them is paramount. You might have some control over your users, but they can still dampen your popularity.

SM-03 in The User Is The Anonymous Web Designer
The user experience should actually serve the needs of users.

Here are some skills that professionals bring to the table:

  • Knowledge of how to build a website and how it works;
  • Experience with anticipating user needs;
  • Delivering services and content that users need.

The Audience

Audience members play a different role. Most websites don’t offer a broad spectrum of customizable features (for good reason) or feedback options that give insight into how visitors use the website or what they’d like to see improved — specifically, what they’d like to see improved that would make them return on a regular basis. Word of mouth has become a serious force on the Web with Twitter, Facebook and their kin; and while you control the code, they control users’ wallets, attention and referrals.

SM-04 in The User Is The Anonymous Web Designer
Visitors know what they like, and negative feedback can spread quickly.

Here is what visitors contribute:

  • Essential feedback on core service failings;
  • Word-of-mouth promotion;
  • Knowledge of what works, not just what’s pretty.

The roles of professional and user can be reversed on occasions when one expert helps another improve their website, resulting in a mixture of a professional perspective and visitor-oriented goals. Being both visitor and expert gives you empathy for the user and a valuable perspective, especially if you’re lucky enough to be in a position of power.

Nature Versus Nurture

Both sides bring goods to the table. Professionals bring the service and content into existence, thereby providing the “location for the party.� New visitors share vital details about how you can encourage them to be more involved, and they spread your website to the masses. Maintaining equilibrium between the professional and user is required if your Web presence is going to survive.

The Professionals

As it stands, the professional designer still plays the traditional role, but it should be expanded to encompass the evolving needs of our audience. The ability to nurture and cultivate is a skill ignored by many in our industry. In the past, “If you build it, they will come� described the Web fairly accurately, especially given the limited competition, but easy enterprise and designing for yourself have failed by their own merit.

Here are some problems that face a Web professional:

  • Subjective opinion;
  • Too many tasks to be able to master one;
  • Fixated on success and reward (depending on the service being offered).

The Audience

Even if your visitor has no understanding of Web design, they will know what works for them, so you should encourage them to share their ideas. You can do this through code, design, experience and interactivity (or functionality). Playing to your audience’s strengths makes sense (if only to avoid the MySpace effect: going stale).

Some of the problems facing users are:

  • Lacking knowledge of the Web’s limitations;
  • Their diverse backgrounds and characters lead to quirks;
  • Subjective opinions.

Survival of the fittest is the name of the game, and with the increasing pressure to focus on the needs of users and encourage them to connect to your services, it’s important that your designs are user-centric: contextual and interactive. The anonymous designer who knows what they want is well equipped for the Internet’s future. We can’t overlook users as we did in the past.

Elements Of Success

At this point, you’re probably wondering why we should place so much trust in users. That’s a fair question. Distinguishing between constructive advice and useless drivel can be difficult when many users don’t even know what a Web browser is, and determining the relevance of reviews is a challenge when manipulation is commonplace. All interaction with users should be done with respect (and perhaps a grain of salt), but it’s still worth encouraging the crowd to take action.

The trick is to use your knowledge (from statistics to semantics), experience, research and trust (of information sources) to your advantage.

By using a mixture of both quantitative data (numbers, statistics, etc.) and qualitative data (opinions, ideas, etc.), you can make informed decisions about what will work best for your clients. Putting the onus entirely on visitors is unfair, but giving them a channel for input will make a difference. If you don’t please them, they’ll surely take their business elsewhere.

SM-07 in The User Is The Anonymous Web Designer
The ABCs of experience: appreciation, balance and communication.

A few of the ideas you get from users are bound to be cringe-worthy, but it’s surprising how many good ones you’ll get if you implement feedback functionality properly. The stereotypical designer who leads with his gut is a testament to the lack of awareness of user expectations and needs. We must acknowledge this co-dependency, this need for an exchange of perspectives, and the value of the anonymous designer.

Appreciation

Your visitors are so much more than statistics. They deserve to be appreciated. You, the professional, can re-engineer a website until the cows come home, but it’s ultimately up to users to decide whether to make use of your services. Acknowledging and understanding their needs, and encouraging diversity, is critical to breaking down barriers.

Eighthour in The User Is The Anonymous Web Designer
Appreciate your users and the issues they might encounter, and be patient. That also means having a clean, attractive design that communicates. Example: EightHourDay

Ask your visitors the following questions:

  • What, if anything, could my website offer to better meet your needs?
  • Do you have any technical difficulties with the way the website functions?
  • What more could we offer to deliver additional value?

Balance

Balance is integral to life, and it’s probably more critical to design than other Internet-related fields. Designers forge open bonds with visitors that often lead to social relationships that enrich not only our websites but our lives. Visitors hold greater value for our communities than many of us care to admit — think of Wikipedia or Facebook. Maintaining good relationships with them is paramount.

SM-09 in The User Is The Anonymous Web Designer
Stay level-headed by maintaining the balance between contribution and ownership.

Ask your visitors the following questions:

  • How can we encourage you to participate more often?
  • What content or services would you like to see in future?
  • How much time do you spend on our website?

Communication

Communication is fundamental to our social and interactive experiences on the Web, and the staggering amount of rich content (not even counting spam!) that visitors contribute could exceed our wildest dreams. The user’s job is to come forth and help us help them, but our job is to act as intermediaries between them and the website so that they achieve the ideal experience. We are the Web’s “interpreters.�

SM-10 in The User Is The Anonymous Web Designer
Communication is paramount. Make sure you can be contacted easily.

Ask your visitors the following questions:

  • Are we missing an essential feature that would help us help you?
  • Do you have any concerns or complaints that we need to address?
  • Is there anything you want to ask about our website or services?

The Sociological Switch

Of all that has been addressed in this article, the most important is the process of planning and implementing mechanisms for visitors to interact with your services. So, put time and effort into studying how to make your website better. There are many methods of doing this (audits, surveys, statistics). What’s important is that lines of communication with your users stay open, so that you can go about your business successfully.

SM-11 in The User Is The Anonymous Web Designer
Planning and research make up a huge portion of the creation of the user experience.

The future of the Web will be about being socially connected, and a role reversal that I call the “sociological switch� seems to be taking place. Simply put, we Web professionals are becoming the audience of our users’ demands, and users are becoming anonymous designers, deciding where they visit, how the Web should evolve and how media are constructed and consumed.

As you leave comments below, just think that by contributing here, you’re making a difference in Smashing Magazine’s relationship with its audience and the world. By leaving space for your comments and your participation, Smashing Magazine is trying to meet your needs. Think about how you can use your audience to your advantage and improve design beyond even your own expectations.

(al)


© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,


50 New Useful CSS Techniques, Tutorials and Tools

Smashing-magazine-advertisement in 50 New Useful CSS Techniques, Tutorials and ToolsSpacer in 50 New Useful CSS Techniques, Tutorials and Tools
 in 50 New Useful CSS Techniques, Tutorials and Tools  in 50 New Useful CSS Techniques, Tutorials and Tools  in 50 New Useful CSS Techniques, Tutorials and Tools

These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing!

In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use JavaScript, or JavaScript-libraries as well.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

CSS Techniques

Now Playing: transitions and animations with CSS
Tim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. Also, notice the use of favicons as background-images for attribute selectors. Unfortunately, the demo works best in Webkit-browsers, but it degrades gracefully in other modern browsers. Unfortunately, we didn’t find the documentation of the technique.

Css-technique-394 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS3 range slider, checkbox + radio button
A demo of HTML input elements made with CSS3. They include realistic range sliders, checkboxes and radio buttons. The designer used minimal markup, no JavaScript and no images. Downside: there is a ton of messy CSS3 code, and Safari renders the page best. Chrome is close, but the 3D perspective doesn’t quite work.

Css-technique-409 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS3 Media Queries
CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

Css-technique-323 in 50 New Useful CSS Techniques, Tutorials and Tools

Proportional leading with CSS3 Media Queries
A fluid layout should be responsive to the width of the columns of text. This problem, of proportional leading, is what holds many designers back from adopting fluid layouts. In this article, Andy Clarke explains how you can achieve proportional leading for your typography using CSS3 Media Queries.

Css-technique-408 in 50 New Useful CSS Techniques, Tutorials and Tools

Responsive Web Design
This article by Ethan Marcotte explains how to use fluid grids, flexible images, and media queries to create elegant user experiences with responsive web design. Check out the demo — of course, don’t forget to resize the browser window.

Css-technique-414 in 50 New Useful CSS Techniques, Tutorials and Tools

Popout Details on Hover with CSS
This tutorial describes a technique that presents details of a content item on hover. The solution is quite simple and uses position: relative and z-index to achieve the effect.

Htmldemo2 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS3 Border-Radius and Rounded Avatars
Trent Walton came up with a clever technique to create rounded images (in this case, rounded avatars) with the border-radius property. The solution is simple: create a frame class for your image, and give it a border. Then, round both the frame and image with the border-radius property, and you’re done: a simple technique with no additional images or scripts — just an extra line of code. You may want to check Tim Van Damme’s similar CSS technique, too.

Css-108 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS3 Rounded Image With jQuery
“The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn’t display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image.”

Css-technique-379 in 50 New Useful CSS Techniques, Tutorials and Tools

The Simpler CSS Grid
Why restrict your layout so that it can fit into this 960gs? A grid is supposed to help you in design, not to limit your creativity. The 978 grid is not just about increasing the page width, but to loosen the gutter space, so users can read it more comfortably.

Css-technique-321 in 50 New Useful CSS Techniques, Tutorials and Tools

Correcting Orphans with CSS Overflow
When typesetting, designers try to avoid leaving just one or a few words hanging on a line at the end of a paragraph. Doing so is considered poor typography because it leaves too much white space between paragraphs and interrupts the reader’s eye movement (see the example below). A simple typographic solution is to rework the line by adding indented paragraph endings. But the problem is particularly annoying when aligning a paragraph next to an image that exceeds the paragraph’s height. Soh Tanaka has come up with a simple and quick solution to this problem with CSS.

Css-technique-412 in 50 New Useful CSS Techniques, Tutorials and Tools

Apple-like Retina Effect With jQuery
This tutorial explain how you can recreate the effect displayed on the image below, using jQuery and CSS.

Css-technique-500 in 50 New Useful CSS Techniques, Tutorials and Tools

How to create a kick-ass CSS3 progress bar
New features introduced in CSS3 allows developers to create stunning visual effects: this post exaplains how you can create a fancy progress bar using CSS3 and jQuery, without Flash or images.

Css-technique-335 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS pseudo-element Solar System using semantic HTML
This is a complete reworking of another author’s basic reproduction of the classic model of our solar system using CSS. By using pseudo-elements (again) I wanted to reproduce as much as possible without presentational HTML and JavaScript. In addition, by hooking into HTML microdata I’ve put together a rough scale model of the solar system that demonstrates some further uses of CSS generated content.

Css-technique-415 in 50 New Useful CSS Techniques, Tutorials and Tools

Advanced Columns using the :nth-child(N)
Imagine this task: you have to display product listings as columns laid out in a zig zag pattern. The first instinct is to split each section into its own list, but if the site is running on a CMS, all products had to be spit out in one giant list. Given this scenario, you can use pseudo-selectors :nth-child(N) and a bit of jQuery to help with IE support.

Css-technique-324 in 50 New Useful CSS Techniques, Tutorials and Tools

Lost World’s Fairs
Trent Walton explains the workflow and design techniques used to create the Lost World’s Fairs website to celebrate the launch of Internet Explorer 9. The result is truly remarkable.

Css-technique-404 in 50 New Useful CSS Techniques, Tutorials and Tools

New Twitter Design with CSS and JQuery.
This post explains the techniques used by Twitter’s new web interface and re-creates its interactivity using CSS and jQuery.

Css-technique-314 in 50 New Useful CSS Techniques, Tutorials and Tools

Europe, CSS & jQuery clickable map
CSS converts a simple list of countries into the fully clickable map. Works with disabled style sheets and JavaScript, as well as on mobile devices. A simple code does not require Flash Player or other plug-ins!

Css-technique-413 in 50 New Useful CSS Techniques, Tutorials and Tools

Simple Tooltip w/ jQuery & CSS
There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. I would like to share how I’ve created mine today, and am also open to any critiques and suggestions for those jQuery ninjas out there. Lets take a look.

Css-technique-325 in 50 New Useful CSS Techniques, Tutorials and Tools

Super Cool CSS Flip Effect with Webkit Animation
Webkit support some fancy transform and animation effects that can really spice up the web experiences for users with Safari or Chrome browsers. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a Transformers themed top trumps design.

Css-technique-399 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS3 Border Images for Beautiful, Flexible Boxes
The CSS3 buzz is in full swing, and many of CSS3′s most useful properties are receiving a fair bit of attention. Properties like border-radius, text-shadow, custom gradients, and even CSS3 transitions have been shown to be quite practical, resolving real-world design issues with minimal markup and maintainable code.

Css-199 in 50 New Useful CSS Techniques, Tutorials and Tools

Animated wicked CSS3 3D bar chart
Create a beautiful 3D bar chart. But instead of creating a “stacked” one, several bars are placed under each other. When hovering, the animation shows and the bar grows to the appropriate size.

Css-technique-411 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS Border Tricks
Since I released my new redesigned blog, a lot of people have asked me how I styled the pressed effect on my category navigation. I would like to share some simple border style tricks to get various effects for your next project.

Beveled in 50 New Useful CSS Techniques, Tutorials and Tools

The Background Trick With CSS
This page provides links to a couple of examples for the trick used on Design Made In Germany 5 where a couple of layers are used and the middle layer has a fixed background, while other layers have absolute positioning. The visual effect is unique and interesting. Unfortunately, the explanations are in German, but the demos are self-explanatory.

Css-technique-403 in 50 New Useful CSS Techniques, Tutorials and Tools

Footnotes With CSS
in their simplest implementation — using sup tags and linking within the page — footnotes aren’t very user-friendly. They interrupt the experience, requiring the user to click the link, read the information and then return to the page with the browser’s “Back” button.” Lukas Mathis has come up with an elegant solution to improve this user experience: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it — i.e. when they move the cursor over the footnote symbol.

Css-166 in 50 New Useful CSS Techniques, Tutorials and Tools

Why and how to create Microsoft Office Minibar with jQuery and CSS3
Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

Css-technique-388 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS image replacement with pseudo-elements (NIR)
An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off; works with semi-transparent images; doesn’t hide text from screen-readers or search engines; and provides fallback for IE6 and IE7.

Css-technique-416 in 50 New Useful CSS Techniques, Tutorials and Tools

Diagonal CSS Sprites – Aaron Barker
So you’ve got your sprite created, and it’s working great. 30+ icons in one image, and major HTTP connections saved. You have made your little corner of the interwebs a little happier and faster. Steve Souders would be proud.

Css-110 in 50 New Useful CSS Techniques, Tutorials and Tools

Sneak — Fixing the background ‘bleed’
I recently came up with an issue in Safari where the background colour of an element seemed to “bleed’ through the edge of the corners when applying both borders and a border-radius (see the image above). I then found a solution, and it came in the form of the -webkit-background-clip property.

Css-121 in 50 New Useful CSS Techniques, Tutorials and Tools

Zebra-striping rows and columns
Zebra-striping tables is certainly not a new thing; it has been done and discussed for years. They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another. We can create zebra-stripes using the nth-of-type selector — but we can apply it not only to rows but also columns.

Css-technique-341 in 50 New Useful CSS Techniques, Tutorials and Tools

Feature Table Design
“I ran into the feature table design and I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool stuff you find on the web is definitely an excise I recommend (a few days after, I read this – couldn’t agree more). As these exercises typically do, it lead me down some interesting paths.”

Css-technique-372 in 50 New Useful CSS Techniques, Tutorials and Tools

ShineTime – A jQuery & CSS3 Gallery With Animated Shine Effects
This article shows how you can create an animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

Css-technique-373 in 50 New Useful CSS Techniques, Tutorials and Tools

The Mac-style Skype Application Menu with CSS3 and jQuery
This tutorial re-creates the Skype application menu in the web browser. The final design mimics not the full layout — only the menu where all your friends are listed. For the nifty layout CSS3 is used and jQuery is used for the extra functionality.

Css-technique-381 in 50 New Useful CSS Techniques, Tutorials and Tools

Further Interesting Techniques

Object-oriented CSS
All the resources you need to get started are linked from the left navigation. Start by downloading the base files. Exercises one and two can be completed in Firebug if you are comfortable with it. Then you can download the finished file at the beginning of Exercise 3.

Css-technique-326 in 50 New Useful CSS Techniques, Tutorials and Tools

clearfix Reloaded +
clearfix and overflow:hidden may be the two most popular techniques to clear floats without structural markup. This short article is about enhancing the first method and shedding some light on the real meaning of the second.

CSS3 text-shadow and box-shadow trick
All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today. That’s handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend.

Data theft with CSS
Mozilla has released security updates to Firefox 3.5 and 3.6 that include defenses for an old, little-known, but serious security hole: cross-site data theft using CSS. These defenses have a small but significant chance of breaking websites that rely on “quirks mode”Â� rendering and use a server in another DNS domain (e.g. a CDN) for their style sheets.

Show Markup in CSS Comments
“Let’s say you are creating a CSS file for a modular bit of a webpage. Perhaps you are the type that separates your CSS files into bits like header.css, sidebar.css, footer.css, etc. I just ran across an idea I thought was rather clever where you include the basic markup you will be styling as a comment at the top of your CSS file.”

Css-114 in 50 New Useful CSS Techniques, Tutorials and Tools

How to Micro-Optimize Your CSS
Minification shrinks file size significantly, by as much as 30% or more (depending on input code). This size-reduction is the net result of numerous micro-optimization techniques applied to your stylesheet. By learning these techniques and integrating them into your coding practice, you’ll create better-optimized CSS during the development process. Sharper skills, cleaner code, faster downloads — it’s a “win-win”Â� for everyone.

Css-157 in 50 New Useful CSS Techniques, Tutorials and Tools

Transparent Borders with background-clip
Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.

Css-130 in 50 New Useful CSS Techniques, Tutorials and Tools

Showing and hiding content with CSS 3
One very common feature is the expanding/collapsing or shown/hidden box, whether this is a tabbed interface, a content “tray” on the side that can be slid out and then put away again, or a complex tree menu with expanding/collapsing sub-menus. Generally, these features are implemented via JavaScript, however using CSS3 it is possible to create such content using only HTML and CSS — no JavaScript required.

CSS for Blockin’ Stuff
If you want to use user stylesheets, ad blockers, flash blockers, or whatever else, more power to you. Here are some CSS projects intended for blockin’ stuff.

CSS Tools and Services

ProCSSor: Advanced CSS Prettifier
This online tool allows you to submit your CSS (either copy and paste the code, upload the file or point to a URL) and choose your formatting options. You can save options and reuse them every time you run code through ProCSSor. You can separate properties and selectors across multiple lines, indent up to four levels with either the space bar or tab key and even sort properties. The tool also has a “Columnize” mode, which groups elements into columns, making for a more elegant style sheet; you need to deactivate “Fail-safe mode” to use it.

Css-technique-417 in 50 New Useful CSS Techniques, Tutorials and Tools

Selectivizr – CSS3 selectors for IE 6-8
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations.

Css-127 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS Desk
CSSDesk is an online HTML/CSS sandbox. The tool allows you too experiment with CSS online, see the results live, and share your code with others. You may want to check Rendera , too.

Css-technique-423 in 50 New Useful CSS Techniques, Tutorials and Tools

The Square Grid
A quite simple CSS framework that is based on 35 equal-width columns. It aims to cut down on development time and help you create well-structured websites. The total width of the grid is 994 pixels – which the majority of modern monitors support. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3 and 2. The pack contains sketch sheets for printing (PDF), design layout templates for Photoshop, InDesign and Illustrator and source code files with explanations.

Css-188 in 50 New Useful CSS Techniques, Tutorials and Tools

Instant Blueprint
Instant Blueprint allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster. You may want to check Project Deploy, too.

Css-technique-418 in 50 New Useful CSS Techniques, Tutorials and Tools

HTML5 Boilerplate
HTML5 Boilerplate is the professional base HTML/CSS/JS template for a fast, robust and future-proof site. You get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on. You may want to check HTML5 Reset, too.

Css-technique-421 in 50 New Useful CSS Techniques, Tutorials and Tools

HTML5 Starter Pack
A a very basic HTML5 starter pack with a clean and ordered directory structure that will fit for most projects. The pack contains the most common files (HTML, CSS, JavaScript), as well as a basic Photoshop web design template, again with a group’s structure that would fit for most projects.

Css-technique-419 in 50 New Useful CSS Techniques, Tutorials and Tools

PrimerCSS
Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet. Paste your HTML in to get started.

Css-technique-363 in 50 New Useful CSS Techniques, Tutorials and Tools

Hardboiled CSS3 Media Queries
These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes that you may be interested in making responsive designs for. The stylesheet covers smartphones in portrait and landscape modes, iPads, iPhone and large screens.

Css-technique-422 in 50 New Useful CSS Techniques, Tutorials and Tools

Grid Generator
This tool allows you treate your own custom CSS grids. You can select base unit, number of columns, column width, gutter width and margins and download PNG as well as a CSS source code.

Css-technique-382 in 50 New Useful CSS Techniques, Tutorials and Tools

Baseline framework
Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system.

Css-technique-426 in 50 New Useful CSS Techniques, Tutorials and Tools

Gridulator
Gridulator is a quick and easy grid calculator for web designers and developers. You can choose the overall width and number of columns, select the column width and gutter width and download the PNG of the grid.

Css-technique-309 in 50 New Useful CSS Techniques, Tutorials and Tools

Dust-Me Selectors
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.

Css-technique-330 in 50 New Useful CSS Techniques, Tutorials and Tools

zen-coding – Project Hosting on Google Code
Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions — similar to CSS selectors — into HTML code.

Css-technique-356 in 50 New Useful CSS Techniques, Tutorials and Tools

Turbine
Turbine is a collection of PHP-powered tools that are designed to decrease CSS development time. It includes packing, gzipping and automatic minification of multiple style files, “CSS variables”, selector aliases as well as nested css selectors and OOP-like inheritance, extensions and templating features.

Css-technique-338 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS Usage
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.

Css-technique-331 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS Reloader
CSS Reloader is a browser extension for Mozilla Firefox and Google Chrome, that allows you to reload all the CSS of any site without you have to reload the page itself. The goal for this browser extension is to enable developers to become more productive.

Css-technique-332 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS Frame Generator
This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure — each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better. It’s essential to use a predefined properties order, such as this one:

Css-technique-327 in 50 New Useful CSS Techniques, Tutorials and Tools

Switch CSS
Switch is a full featured, production ready CSS preprocessor. It runs under Apache with mod_python, or as an environment-agnostic command line tool.

Css-technique-317 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS Tools: Diagnostic CSS
Validation is great, but it won’t catch everything. For example, if you have a link where you forgot to add a URL value to the href attribute, the validator won’t complain. The syntax is valid, even if it’s a broken experience. Similarly, the validator will be happy to let through empty class and id values.

Css-technique-301 in 50 New Useful CSS Techniques, Tutorials and Tools

IE Print Protector – ieCSS
IE Print Protector is a piece of javascript that allows you to print HTML5 pages in Internet Explorer. IE Print Protector helps IE render HTML5 elements correctly, both on screen and in print.

Css-technique-302 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS reset, CSS framework, Toucan CSS reset
It is a reset stylesheet. Unlike Meyer’s or YUI’s, it not only removes the default styling of HTML elements, but also rebuilds the new generic rules for the typography, headings, paragraphs, lists, forms, tables etc. It’s light-weight, flexible and browser-friendly.

Css-technique-359 in 50 New Useful CSS Techniques, Tutorials and Tools

PHP CSS Browser Selector
CSS Browser Selector is a very small javascript with just one line php function which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

Css-technique-362 in 50 New Useful CSS Techniques, Tutorials and Tools

CSS3Machine for iPad
CSS3Machine makes the most advanced CSS3 styles simple. Easily create stunning gradients, drop-shadows, and 3D transforms. CSS3Machine also builds, edits, and exports WebKit animations.

Css-technique-391 in 50 New Useful CSS Techniques, Tutorials and Tools

minify
Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Css-186 in 50 New Useful CSS Techniques, Tutorials and Tools

Modernizr
Modernizr adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.

Css-149 in 50 New Useful CSS Techniques, Tutorials and Tools

Spritebaker: Easy Base64 encoding for designers
This free tool parses your CSS and returns a copy with all external media “baked”Â� right into it as Base64 encoded datasets. The number of time consuming http-requests on your website is decreased significantly, resulting in a massive speed-boost (server-side gzip-compression must be enabled).

Css-technique-427 in 50 New Useful CSS Techniques, Tutorials and Tools

My DebugBar
IETester is a free application that allows you to have the rendering and JavaScript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE at the same time.

Css-technique-311 in 50 New Useful CSS Techniques, Tutorials and Tools

Less Framework 2
This framework is a CSS framework for cross-device layouts. The framework has a minimal set of features, and does away with things like predefined classes. All it really contains are a set of media-queries, typography presets aligned to a 24 px baseline grid and a grid, with its column sizes noted down within CSS comments. You can select what features you want to have in your framework files, and the tool will provide you with a zipped archive right away. Note that this framework isn’t related with LESS CSS, another framework that extends CSS with variables, mixins, operations and nested rules.

Css-technique-428 in 50 New Useful CSS Techniques, Tutorials and Tools

Last Click

Never Mind the Bullets
HTML5 is coming to modern browsers, and developers are already pushing its limits. To this end, Microsoft has created an online comic to show off HTML5/CSS3’s features (SVG background, JavaScript acceleration, etc.) as they function on IE9. It’s a fully interactive experience, complete with animations and other features that were until now possibly only with JavaScript or Flash.

Css-196 in 50 New Useful CSS Techniques, Tutorials and Tools

The comic is a Western in a fairly traditional comic-book style, but with a lot of extras. It’s viewable in other browsers, but not as fully as with all of the features built into IE9. There’s also a feature that lets you create your own comic strip using the same characters. We never thought we’d say these words, but the website is actually best viewed in Internet Explorer 9.

Have something useful? Get in touch with us!

Our job is to promote good, high-quality content and resources. If you wrote or developed something useful, contact us — we will do our best to spread the word and help you out.



© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


Three Cool and Fresh Design Tools

In today’s news round-up we have a small, yet cool, selection of useful tools, apps and resources for web designers. First up, we have a wonderfully useful jQuery plugin Quovolver) for displaying quotes in a stylish way, next up we have a small, yet very handy app for generating a grid (Gridulator) and finally a fun time-killing bookmarklet that can destroy everything on a web page.

Quovolver – a simple jQuery plugin for revolving quotes

Quovolver - a simple jQuery plugin for revolving quotes

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.
Quovolver – a simple jQuery plugin for revolving quotes

Gridulator – Make pixel grids, lickety-split

Gridulator - Make pixel grids, lickety-split

Tell Gridulator your layout width and the number of columns you want, and it’ll spit back all the possible grids that have nice, round integers. Just the thing for pixel-based design folk. There are inline previews, courtesy of the canvas element, and when you’re all set Gridulator can crank out full-size PNGs for you, ready for use in your CSS, Photoshop docs, or what have you.
Gridulator – Make pixel grids, lickety-split

Hello, want to kill some time?

Hello, want to kill some time?

Hello, want to kill some time?

By Paul Andrew (Speckyboyand speckyboy@twitter).


5 New CSS and HTML Web Templates

One of the most sought after resources for a web designer are high quality and, preferably, free CSS/XHTML/HTML web templates. And this exactly what we have for you in today news round-up: 5 New High Quality CSS and HTML Templates.

Schizo Octopus Website Template

Schizo Octopus Website Template (XHTML+PSD's)

This template has a fixed layout one page portfolio template with two columns with the download containing the Photoshop Files, XHML/CSS Coded template and also includes documentation.
Free for personal or commercial use. No need to credit.
Schizo Octopus Website Template

CSS Heaven 2

CSS Heaven 2

CSS Heaven 2 is a free CSS Template suitable for small business websites and blogs.
This template is released under GPL License.
CSS Heaven 2

Euphoria

Euphoria

Euphoria has been licensed under a Creative Commons Attribution 3.0.
Euphoria

Template 6

Template 6

This template could be used as a corporate website & blog, it contains: Two template pages , valid HTML & CSS and all of the PSD files.
Template 6

SilverBlog

SilverBlog

SilverBlog is a minimal template suitable for blog designs that has been built with HTML5 and CSS.
It has been released under GNU GPL license.
SilverBlog

By Paul Andrew (Speckyboyand speckyboy@twitter).


Test Usability By Embracing Other Viewpoints

Smashing-magazine-advertisement in Test Usability By Embracing Other ViewpointsSpacer in Test Usability By Embracing Other Viewpoints
 in Test Usability By Embracing Other Viewpoints  in Test Usability By Embracing Other Viewpoints  in Test Usability By Embracing Other Viewpoints

As Web technology improves, users expect Web-based widgets to be useful, content to be relevant and interfaces to be snappy. They want to feel confident navigating a website and using its functionality. They crave being able to get things done with little friction and on demand. And demand they do.

People are picky. When a website gives them problems, they are less inclined to use it. From a design perspective, testing for a good user experience entails making improvements based as much on critical feedback as on design expertise. As long as your website is around, offering a good user experience is critical. And like the website itself, improving the user experience doesn’t end when the website launches.

A good user experience leaves people with a sense of accomplishment.

User-testing-lifecycle in Test Usability By Embracing Other Viewpoints
Unlike certain other phases of production, testing for user experience is an ongoing process.

Developing a website or app often takes up several phases. These include discovery, design, implementation, internal testing, soft launch and delivery. But unlike the development phases, user testing is ongoing. Certain questions will arise at any time:

  • Does this solve a problem or serve a purpose?
  • Is it easy to use?
  • Is it meaningful?
  • Is it useful?
  • Is it clear?

These questions are relevant when the concept is being refined, half-way through development and six months after launch… in fact, they never stop being relevant.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Regular Upkeep And Rigorous Pruning

If a website is to serve its visitors well, then the people who maintain it must address the problem of relevance. Relevant content answers questions that people have right now. But technology advances, events come and go and people’s needs change over time. The information that a website launches with may not be as useful to users six months later.

Regular content audits—asking how well each piece of the website’s information benefits the users—ensures that when visitors come, their trip is worth the effort. To do this, a website manager should ensure that every piece of content addresses these questions:

  • How does it benefit or persuade the end user?
  • How does it support the website’s purpose or agenda?
  • Is it easy to find?

If content might be useful, then it also might be unnecessary. Here are other questions to ask about whether a piece of content deserves a place on the website at all:

  • Who would miss it if we removed it?
  • Could it be combined with something similar?
  • How often do people who don’t visit the website ask about this?

For example, if a website’s “About usâ€� page is only a paragraph long, it might be better served on the home page—unless it could be expanded with meaningful information about company history, staff biographies or contact details. Likewise, a website about, say, soy milk products may not require information about the inhumane treatment of cows—unless the website’s goal was more to promote a viewpoint than to sell soy milk.

Whether content belongs on a website is determined by the website’s purpose. If something doesn’t quite fit, then the website won’t quite work.

Ask “What If� Of Unlikely Scenarios

Sometimes the hardest part about questioning one’s assumptions is determining what those assumptions are. Learning to consider the pros and cons of silly, risky or impractical changes is a creative way to shake up established methods and discover potentially better ideas.

User-testing-change-methods in Test Usability By Embracing Other Viewpoints
Traditional methods of updating content include adding, removing, rearranging and recasting information.

While conventional thinking leads a designer to experiment with, say, the background color, an unlikely “What if� question considers the nature of the background itself. What if the website had more than one background? Would one act as a mid-ground, floating above the very back? Would the background change as visitors wandered through the website?

When you’ve finished asking the obvious, try the unlikely:

  • What if the website’s “Aboutâ€� page became its home page?
  • What if we turned the website’s sidebar into a footer?
  • What if we organized all content with tags instead of in a hierarchy?
  • What if we swapped the colors of the heading and background?
  • What if the contact form was a puzzle that visitors had to solve?
  • What if products were arranged with the least popular at the top?
  • What if we disabled the CSS and images one day per week?

Impractical? Perhaps not. Enlightening? Perhaps. Playing “What if� is about questioning the rules that govern a website’s design. Is there a better way to arrange the information? How else could the content be presented? Is this design really clear enough?

Undertaking to improve the user experience is an admission that the current design has problems. If the problems are unclear or user complaints are vague, then exploring radical changes may force designers to question their initial assumptions. If nothing else, then it’s an exercise in creativity. If it ain’t broke, break a copy.

Case in point: when one business owner in particular wanted to sell products online, the initial website design filled the center of the home page with clickable product categories. This didn’t suit the owner, whose business name was well known in the field. The proposed solution moved categories to a thin left-hand column and put business information, customer registration and contract details in the center.

A week after launch, a long-time customer asked when the website would have products. The categories seemed to have gone unnoticed by an indefinite number of visitors. Fortunately, one decided to speak up.

Interface-problem in Test Usability By Embracing Other Viewpoints
The original design put product categories (the white bars) in the center. The client wanted more emphasis on information about their company (black bars). When customers complained, the client requested an arrow pointing to categories on the left.

This problem could have been prevented if the people involved had put higher priority on the user experience. No further user testing was done. To date, it is unknown how many customers, if any, are still having trouble with the website.

Keep Content In (Other People’s) Perspective

Clever designer don’t attempt to answer these questions themselves. Rather, they ask two types of people: those who use the website often and those who use it casually.

Website designers often begin with certain goals about how a website’s interface and content should be used. Interfaces are designed around particular problems: how do I make it easy for people to navigate or manipulate data? This is natural because many design processes are intended to solve problems in communication.

But visitors will approach the same design from another angle. Given an interface, they ask: how do I use this to get what I want?

To learn how visitors use a website, designers must observe without interference. The designer’s goal isn’t to teach someone how to use a website, but rather to learn how people might interpret its interface.

Once visitors start teaching the designer (pointing out how they accomplish a task, or clicking from page to page), insights emerge about what’s easy and what’s relevant to the people whom the website serves.

Other Points Of View Benefit Everyone

Designers must understand that the refrain “You’re doing it wrongâ€� isn’t always true. Even if someone uses a website the hard way, they’re doing so for a reason. Maybe the easier path isn’t clear to them. Maybe they’re less comfortable with the easier way than what they’re accustomed to. Maybe the hard way has an advantage that the designer hasn’t thought of.

Wrong or right, a user’s view deserves respect for two reasons. First, designs that serve the designer’s ego at the expense of user needs have failed both. Secondly, a great interface today will be average next year. Striving for a good user experience helps designers not just to stay current but to continually improve their work.

A good user experience is reliable, useful, responsive and unambiguous—to the people who use the website. Although users may not follow the anticipated method of accomplishing a defined task, their solution is based on what makes sense to them.

Designers who seek other points of view may find ways to make a website easier for visitors to find the information they want. The better the user experience, the more willingly users will return.

Not Every Perspective Leads To Improvement

Of course, not every viewpoint is always relevant. Sometimes crazy ideas lead to improvements, and sometimes they’re just crazy. Most design conventions exist because they’re genuinely useful, convenient or familiar to designers and users alike.

Seeking to understanding other points of view doesn’t mean trying to keep everyone happy. It means asking if there’s a better way to meet user needs. Catering to every possible view is a recipe for failure. In the end, the website’s owner is responsible for deciding how best to serve their audience.

User-testing-possible-layouts in Test Usability By Embracing Other Viewpoints
Which layout is best? It’s the designer’s call, not the audience’s.

Tips For Testing

  • Ask specific questions.
    “What would you improve?� is helpful only if the user already has gripes. “How would you find (certain information)?� gives users something to focus on.
  • Encourage feedback.
    Incentives for completing a survey, for example, compensate visitors for their input.
  • Ask the “wrongâ€� people.
    If one assumes that only a certain type of person will use a website, then they might only get the feedback they expect. But if one gets feedback from someone with no experience in the website’s subject matter, they might get a fresh point of view.
  • Keep testing.
    Websites and people change over time. If possible, seek new input and review the website’s content every other month.
  • Track visitors.
    Software that records who visits what, such as Google Analytics and Mint, tells you what people are after and what’s easy (and hard) to find.
  • Allow time for changes.
    Feedback may show oversights in the website’s design or structure. Deadline pressure is bad enough without the realization that your initial assumptions have led to problems at the last minute.

Tools For Testing

Do you really know your project? See it from other points of view with these online resources.

  • Color can prevent people from viewing a layout objectively. Check your websites with Graybit.
  • Do you need to check your websites in different versions of Internet Explorer? Regardless of your browser, review your websites in IE 6, 7 and 8 with IE NetRenderer.
  • What exactly are your users looking at? Collect live observations of their experience with Morae and Silverback.
  • How does your website sound to screen readers? Try the University of Washington’s WebAnywhere non-visual interface.
  • Which elements do people see in their first five seconds on your website? Learn more at Five Second Test.
  • Does your website load quickly for people with slow connections? Use the LinkVendor Speed Check or the Aptivate Low Bandwidth Simulator to find out.

Further Reading

How do you test for a good user experience? How far, if at all, should designers go to find other points of view? Share your thoughts in the comments below.

(al)


© Ben Gremillion for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress