BlogmyQuery – BMQ

Somewhat self-explanatory. Be sure to click the “all the way� button.

In this post, we are presenting a bunch of exciting and awesome jQuery plugins for your use. As we all know very well that jQuery is the most famous Javascript framework available out there which comes with many amazing features and is quite easy to be used.

You can use these plugins to add beautiful effects and functionality in your next project. These plugins will also help you in completing your task easily.

jQuery Menu and Navigation

Collapsing Site Navigation with jQuery ( Demo | Download )
Creating a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom.

Beautiful Background Image Navigation with jQuery ( Demo | Download )
A beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect.

Slot Machine Tabs ( Demo | Download )
Three columns in each content box rotate like a slot machine to reveal the content in the next content box when a new tab is clicked.

Stylish Navigation Men ( Demo | Download )
A stylish CSS + XHTML navigation menu.

SUPERFISH JQUERY MENU PLUGIN ( Demo | Download )
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu.

LavaLamp for jQuery lovers! ( Demo | Download )
Lavalamp allows you to create a beautiful effect over your horizontal navigation bars.

Sexy Drop Down Menu w/ jQuery & CSS ( Demo | Download )
Create a sexy drop down menu that can also degrade gracefully.

SLIDE A NAVIGATION TOOL IN YOUR PAGE ( Demo | Download )
This jquery component let you easly build a sliding panel where to insert any kind of content; it has builtin all the functionalities for managing menu lines and sub panels with accordion effect. It can get the content via ajax and therefore you can dynamically build it by passing DATA via request using the metadata attribute settable on the extruder container.

Stay-On-Top Menu ( Demo | Download )

HoverFade ( Demo | Download )
The plugin is designed to be used with navigation menus, where each menu item is made from an anchor element within a list-item element. You can apply the effect to different collections of elements by supplying new trigger and faderTemplate options.

jQuery Menu Style ( Demo | Download )
An Easy to setup and beautiful Menu Plugin.

jQuery Slideshow and Image Gallery

Thumbnails Navigation Gallery with jQuery ( Demo | Download )
An extraordinary gallery with scrollable thumbnails that slide out from a navigation. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

Minimalistic Slideshow Gallery with jQuery ( Demo | Download )
A simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

HTML5 Slideshow w/ Canvas & jQuery ( Demo | Download )
You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it.

A Slick Content Slider ( Demo | Download )
In this tutorial we are going to make a slick content slider for a computer shop, with the help of jQuery and the MopSlider plugin.

Google Wave History Slider ( Demo | Download )
It shows you how to create a Google Wave-like history slider. Using it, we will enable our visitors to go back and forth in time to view the changes that take place on a comment thread.

Cool jQuery Gallery ( Demo | Download )
A custom gallery that scans a folder of images and outputs a slick gallery, utilizing PHP, CSS, jQuery and the jQuery Lightbox plug-in.

jqFancyTransitions ( Demo | Download )
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

YoxView – jQuer Image Viewer Plugin ( Demo | Download )
YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and feature-rich.

Beautiful Photo Stack Gallery with jQuery and CSS3 ( Demo | Download )
A Beautiful and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

Fresh Sliding Thumbnails Gallery with jQuery and PHP ( Demo | Download )
A full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size.

Auto-Playing Featured Content Slider ( Demo | Download )
This is an alteration based on the jQuery “Coda Slider� plugin. Each “slide� can be any kind of html content whatsoever, or be a full-size image with an overlay.

Slide Deck ( Demo | Download )
SlideDeck is a powerful slider plugin made for web designers. With SlideDeck, you can organize any type of web content into a beautiful and user-friendly slider.

jQuery Table Manipulation

DataTables ( Demo | Download )
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

Scrollable HTML table ( Demo | Download )
This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section.

JQTreeTable ( Demo | Download )
With JQTreeTable, you can have a treeview in your table. With this plugin, users still get the plain table even thought they disable Javascript.

Flexigrid ( Demo | Download )
Flexigrid is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

Tablesorter ( Demo | Download )
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful feature.

Ingrid ( Demo | Download )
Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more)

jQuery ColumnManager plugin ( Demo | Download )
A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.
It’s supporting tables with colspans and rowspans, too!

Table Pagination ( Demo | Download )
This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.

jQuery TableRowCheckboxToggle ( Demo | Download )
This plugin can add toggle checkbox to any rows that can be specified through the CSS class names.

uiTableFilter ( Demo | Download )
uiTableFilter is a jQuery plugin for filtering table rows.

jQuery Form Element Enhancing

Progress Bar ( Demo | Download )
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.

Ajax Fancy Captcha ( Demo | Download )
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers.

Elastic – Make your textareas grow ( Demo | Download )
This Jquery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

jQuery “Highlight� Plugin ( Demo | Download )

FormToWizard Plugin ( Demo | Download )
The FormToWizard plugin help you to turn any webform into a powerful wizard with jQuery with “steps left” information.

File Style jQuery ( Demo | Download )
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Uploadify – a multiple file upload plugin for jQuery ( Demo | Download )
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

jQuery Form Wizard Plugin ( Demo | Download )
The jQuery Form Wizard Plugin will convert your regular forms into step-by-step form wizard without having to reload the page when moving from one step to another. The plugin is unobtrusive and gives you the ability to set up flow of the different steps, by creating specific routes based on user input.

Uniform – Sexy forms with jQuery ( Demo | Download )
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

jQuery.uiSelect ( Demo | Download )

Autocomplete ( Demo | Download )
By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

jQuery Miscellaneous

jQuery Quicksand ( Demo | Download )
Reorder and filter items with a nice shuffling animation.

jQuery PhotoShoot ( Demo | Download )
The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder.

QuickFlip ( Demo | Download )
It flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.

Canimate ( Demo | Download )
If you’ve ever wanted to create an animation using a series of images for your website, but were forced to an alternative because you didn’t want to deal with the constraints of the GIF filetype, like color limit and difficult-to-deal-with FPS controls, then Canimate is the solution.

Tooltip ( Demo | Download )
In this tutorial we are going to write a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.

jQuery Twitter Ticker ( Demo | Download )
Create a pure jQuery & CSS twitter ticker which utilizes Twitter’s Search API.

A Fancy AJAX Contact Form ( Demo | Download )
In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.
We are using PHP, CSS and jQuery with the help of the formValidator plugin for form validation and the JQTransform plugin

jQuery-Notes 1.0.2 ( Demo | Download )
jQuery-Notes is a simple and easy to use jQuery-Plugin that allows you to add notes to any image (even foreign ones) on your website or blog.

jQuery Roundabout ( Demo | Download )

Google Buzz Widget ( Demo | Download )

CLEditor ( Demo | Download )
CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.

jQuery color plugin xcolor ( Demo | Download )

IdmgAreaSelect ( Demo | Download )
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features.

Useful Resources

• jQuery Techniques and Plugins
  40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites.
• Useful jQuery Plugins for Slideshows, Graphs and Text Effects
  35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects.
• 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
  An overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
• Amazing and Fresh jQuery Plugins
  25 of the best newly (or, pretty close to new) released jQuery plugins.
• 40 Exceptional jQuery Interface Techniques and Tutorials
  Explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components.
• 40+ Excellent jQuery Tutorials
  Various jQuery Tutorials for your source of inspiration.
• 50 Useful JavaScript and jQuery Techniques and Plugins
  Useful JavaScript and jQuery techniques, plugins and tools that may help you improve the user experience for your site.

As a web designer, you’re often forced to wear many different hats every day. You’re the CEO, creative director, office manager, coffee fetcher and sometimes even janitor. That’s a lot for anyone, and it certainly makes it difficult to find any time for quality creative thinking. Organization in any operation is important, and for our work as web designers it is important, too. The good news? You don’t have to have been born an organizational machine. Let’s look at what being organized means and a few strategies and tips to help you clean up that messy desk and get your work ducks in a nice neat row.

[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.]

1. Organization 101

What it means to be an organized person or run an organized business is commonly misunderstood. Many people equate being organized with being fussy, which is not the case. Little labeled folders and neatly itemized lists are one way to stay organized, but they are merely tactics. The heart of organization is having a strategy. Being organized is simply a matter of using clearly defined and consistently implemented systems to get things done.

But how do you go about finding and implementing a strategy if you’re starting from square one? It begins with where you want to end up. Think about where you waste the most time or what frustrates you the most on a daily or weekly basis, and start there. Formulate simple clear goals and treat these overarching goals as the finish line in your strategy.

For example, if you have trouble paying all (and I mean every single one) of your bills on time because they are perpetually lost in the mess on your desk, make it a goal to pay every bill before it is due for the entire year. With this broad goal in mind, you can work on cleaning your desk and setting up a routine for paying each of your bills.

2. Building Routines

Very disorganized people tend to do things in a scattershot way, jumping frequently between unrelated activities, wasting time and energy with each switch. So, if you are committed to being more organized, the first things you need to analyze are your daily, weekly and monthly routines. What activities do you do every day, week and month? It helps to make a list for each and add to it over the course of the week or even month.

Original image by garyknight.

Once you have this list, you should start to notice patterns. You can use those patterns to help you plan your time more efficiently. Arrange your activities by location, type or client to minimize the time you take to switch gears (both mentally and physically) between each activity.

Tips for Building Effective Routines

1. Group like tasks
   Don’t stop working to answer each email as it arrives. Instead pick two — and only two — times a day to deal with emails. Schedule all of your meetings together during one part of the day, and don’t stray from this time block. If the block is full on any given day, then schedule the meeting for the following day.
2. Keep the e-mail inbox clean.
   When a bunch of new e-mails arrives, sort and prioritize them right away. You could have three folders — one for important e-mails (“Important”), one that require some work (“Work”) and one for e-mails that aren’t that important and can be replied later on (“Later”). Try hard to keep the first two clean in the end of every day, and set up reminders or to-do-lists for important tasks. If you get way too many e-mails, you could set up a little system that would delete all unreplied e-mails that are older than 10–14 days and send a notification to those who sent these e-mails, so they know that their e-mail wasn’t read. If the e-mail was important, they will follow up eventually.
3. Standardize your working hours
   Freelancing web designers are blessed with abundant freedom in the hours they work. But this can be a blessing and a curse. If you work a few hours here and there during the day, you force your brain to switch on and off multiple times a day. Try to work roughly the same schedule each day and all in one block. This creates a clear divide in your head between work and free time, and the divide will help you stay efficient and organized.
4. Schedule time for administrative tasks
   You’re a designer foremost; but if you’re a freelancer, you are also the office manager. Don’t let those administrative tasks pile up. Schedule time each day or week to take care of bills, filing or cleaning.
5. Time to think
   Similar to the last point, you are also the CEO, and as such you need to think about the overall goals and strategy of your one-person organization. Make sure to leave time (at least some each month) to analyze how business is going and how you are progressing towards your goals.

Important to remember: routines are not (and should not feel) inflexible. You are always free to change the way you do things. Sometimes you may need to put out fires, and sometimes you just need a change. Listen to your instincts.

3. Systems

While being organized is not the same thing as having a mild case of OCD, creating clear and consistent systems that you can use on a daily basis is important. These systems only become more important the busier you get, serving as an anchor to help you remember everyday items and meet critical deadlines.

The Old-Fashioned Way

I’m a big believer in simple solutions, especially for organization. My desk is covered with sticky notes, and I nearly always have a small notebook handy for sudden brainwaves. In addition to creating a written record, the physical act of writing forces you to use another part of your brain, one that ingrains the idea, making you less likely to forget.

Original image by shawncampbell.

Another great thing about using something like a notebook is that it doesn’t need charging (unlike all of those electronic gadgets in your pocket), and it doesn’t rely on a good connection to the Internet (unlike a Web-based to-do list). If you’re accident-prone, you can even get a field notebook (the kind biologists use), which has waterproof pages.

Do you remember life before mobile phones? Do you remember how many phone numbers you had memorized? The human brain is capable of remembering vast quantities of information; but like any muscle, it is only effective when actively used. Give your brain a chance to find the answer before turning to those Web calendars and notifications — it might surprise you!

A note about Web apps: these have become big business. And no wonder; a single-purpose app exists to help you do just about anything. But as with email, people get into the bad habit of being completely unable to move forward without checking, updating and mulling over their app of choice. For teams working together, these apps can be a true life-saver; but often you will also (hopefully) be working with only one or two individuals on each project. Why not simplify and drop the Web app altogether. A well-traveled notebook can do most of what an organizational app can do, without eating a portion of your pay check each month!

If you need a little more structure than just a notebook in your pocket, here are a few “analog” organizational systems to look into:

• Getting Things Done
  Personal organization based on writing down the important stuff.
• The Hipster PDA
  Notecards in your pocket held together with a clip. How much easier does it get?
• The Printable CEO
  Printable sheets to help with task management and goal-tracking.

Digital Control

Analog solutions can work wonders if you’re flying solo, but what if you have to collaborate with others on a product? Sometimes there is just no substitute for a good Web app at your fingertips to help you coordinate a project’s different facets. But be sure that you really need a Web app before wasting two days testing different ones, as I’ve recommended several times already. That said, here are a few stand-out apps to help you navigate your next project:

• Basecamp
  Mentioning Web-based productivity is impossible without a nod in 37signals’ direction. Basecamp is an amazingly mature and powerful app for coordinating teams.
• Campaign Monitor
  To manage email lists and send well-crafted HTML emails, this app is top of class.
• Blinksale
  Invoices, plain and simple. It also integrates with Basecamp.

If you’ve decided that a Web app is required for your project, remember that single-purpose apps are generally the way to go. If the app tries to accomplish too much, it will likely only end up frustrating you with features you don’t understand, much less need.

The One That’s With You

Photographers have an old adage: “The best camera is the one that’s with you.” The point is well made. What item do you carry with you everywhere, without fail? Your mobile phone, of course. And with the likes of the iPhone and Google’s Android platform, your phone is as powerful an organizational tool as your computer.

1. Use the note-taking app.
   If you have a brainwave, write it down. Replace “notebook” with “phone” in the paragraphs above and you’ve got the idea. You can collect and organize your inspirational images, videos and screenshots online with tools such as Zootool.
2. Voice memo yourself.
   Most smartphones record voice memos. Voice memos are a quick way to get information down without having to type everything out on a small keyboard. Just remember that they only work if you listen to and act on them later. No smartphone? Just call yourself and leave a message: you’re sure to pick it up later.
3. Exploit the app eco-system.
   Both the iPhone and Android have healthy eco-systems of app builders who create just about everything, especially productivity tools. Check out what’s available for your phone.

Clearing the Clutter

You have a problem: your desk is completely covered. And I mean every square inch. Pens and pencils scattered about, yesterday’s newspaper lying under there somewhere (the sudoku half-finished, of course) and last week’s lunch rotting away quietly in the back corner. Somewhere in there you have work, too. While this surely doesn’t describe you, it illustrates a few points, so it’s a good starting point.

1. Keep a trash bin next to your desk.
   Having a bin close at hand ensures you will use it. If you can spare the space, add a second one for recycling.
2. Use your desk for work and work only.
   Just as you shouldn’t work in your bedroom, you shouldn’t read the paper, do the crossword puzzle or eat lunch at your desk either. I know: separating life and work can be hard. But the most successful freelancing designers I know clearly delineate the two and wouldn’t mix them up for anything!
3. Sort on arrival.
   One way to clear your desk quickly is to sort information as it arrives. Open and sort mail when it arrives each day. Sort those receipts that pile up in your wallet at least once a week. You don’t have to immediately act on these items, but don’t let them pile up around you.
4. File folders are your friend.
   Yes, they may be a bit dorky and corporate, but file folders are a God-send for staying organized. Give each subject its own folder, and stack the folders neatly in the corner of your desk. You can fill the folders with notes jotted during phone calls, pages from your notebook and designs scrawled on the back on napkins. Just don’t throw them away after using them once. A bit of masking tape allows you to relabel and reuse them until they split apart.
5. Clean your digital desktop.
   If you don’t already have a system for keeping the files on your computer in order, shame on you. Organization on your computer is paramount in importance. A good way to start: match the folder structure on your computer desktop to the one sitting in the corner of your physical desktop. Use it for all of the digital scraps that accumulate over the course of a project. When you’ve finished the project, move both folders — digital and physical — to an archive. After a year or so, you can trash the archive and only hang on to the deliverables (in case the client ever needs them resent).

Original image by The Wu’s Photo Land.

Remember, consistency is the key to organization, so get into the habit of clearing things away before leaving your desk at the end of the day.

Ditch the Paper

There’s no way around it: paper still exists in the day-to-day running of a business, from receipts and bills to invoices, faxes and letters. Here are a few tips to help you organize all that paper lying around.

1. Get a document scanner.
   If you’ve got the money, a document scanner (such as the Fujitsu ScanSnap — see this in-depth review) can nearly rid you of that fire hazard growing in your filing cabinet. These scanners can capture both sides at once, scan odd-sized items (such as receipts) and do it quickly. After your documents have been scanned, shred them for security. But now that you’ve digitized your records, you need a very good back-up plan to make sure they aren’t wiped out by a faulty hard drive.
2. File by month.
   If you don’t have the coin to buy a document scanner, I suggest filing general bills and receipts by month in folders and then archiving them by year once you’ve filed your taxes. Invoices and anything else project-related can go in project folders, again to be archived at the end of the fiscal year.
3. Go paperless.
   If you haven’t gone to the trouble of making all of your bills and statements paperless, shame on you. Stop everything you’re doing and remedy this right now.

Original image by dawnzy58.

The Long and Winding Road

There is no way to soften the truth: people who are well organized are far more likely to succeed in business and life. But now that you know that organization isn’t an innate skill but one that you can learn and improve upon, you have no excuses. Take the time to analyze what you do and how you do it, and then make small deliberate changes. You’ll be amazed at the difference many small changes make!

Further Resources

• Lifehacker
  Perhaps the most famous productivity blog around. Full of good tips.
• Zen Habits
  Another powerhouse blog that specializes in tips and strategies for organizing your life and work.
• 7 Productivity Tips, Plus Tools for Freelancers and Web Workers
  More focused information, tips and tools to help you organize.
• How to Effectively Organize your Freelance Jobs
  Tips to help you digitally organize all of your jobs and keep track of each one separately.
• Using a Whiteboard to Keep Your Home Office Running Smoothly
  Another great analog solution. Let your creativity out.

© Jeff Gardner 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: organization, Workflow

As Web designers and developers, much of our time is spent carving out little corners for ourselves: setting up stops along the information superhighway, creating hangouts to populate the virtual landscape. We shape areas of the Web as we choose to or as our clients command—like Neo altering the Matrix. Unlike Neo, though, we have rules to follow, standards to meet. Web development and design exist in a framework that dictates what we can and cannot do. With this idea of molding the Matrix in mind, we once again turned to our followers on Twitter.

In a recent poll, we asked: if you could make one thing about Web design different today, what would it be? To avoid repetition, we included a caveat: other than making IE disappear? With that, a wide range of answers flooded in on hash tags.

As always, we appreciate everyone who took the time to respond to the poll. Having a strong connection with our readers is rewarding—that’s one thing about the Web design and development community that we hope never changes. Below is a peek at what Web development and design would be like if our Twitter followers and Facebook fans had their say in shaping the industry.

Better Browsers

Even with the proviso in our question, most responses dealt with browsers—just not Internet Explorer. They also brought up how we build for the Web and how our work is interacted with, but browsers seemed to be the topic of the day. Judging by the amount of noise about it, the most frustrating problem is cross-compatibility between vendors. A number of different makers build browsers, and each browser has a unique way of rendering code; in this environment, designing and developing can be a burdensome task, and our readers would change it if they could.

Below are selected responses from our followers that offer a number of approaches to bettering the browser experience, and most of them deal with rendering code. There was variety in the responses, but making all browsers adhere to one set of enforced standards is an extremely popular solution. Compatibility was the focus.

• I’d make every browser standards-compliant… and every website look amazing!
• I would make every browser render the same code the same way.
• Kill vendor-specific codes. No more of this -webkit crap.
• Make all browsers be in sync. They are out of sync now. That’s the big difference between being a Web and graphic designer.
• As many have said, cross-browser standards. So much time is wasted creating cross-browser compatibility. I’d also like to see better methods for separating content and navigation forms.
• I’d ask all developers and companies to create one standard all-in-one Web browser. Need competition anyway? Here: plug-ins!
• All browsers should have a unified rendering engine.
• Standardize form elements across platforms and browsers.
• Force standards. The W3C should have to “allowâ€� browsers to browse the Web—and if -webkit, -moz or 90% of IE’s browser-specific bullshit were there, they’d block the browser. In a week, we’d have development heaven for all.
• Make every browser read visual elements mathematically the same way so that developers wouldn’t have to care about cross-browsing.
• We need a single open-source rendering engine (i.e. WebKit) that every browser could use and contribute to—and then we can scrap all other engines.
• Fix font rendering.

Improving User Interfaces

What else would our readers like to tweak? Another fairly popular response had to do with making alterations to predominant user interfaces, to make them not only more user-friendly but more engaging than the standard ones we so often come across. A UI should never be taken lightly, because it leaves a stronger impression than the overall concept or content of the website itself. The design might be the most spectacular thing to ever grace an app or page, but if the interface hampers the experience, good luck getting people to come back.

We got a couple of suggestions that might steer the community toward a more advanced UI experience. From doing away with roll-over pop-ups to a website-specific history of links for returning users so that they can pick up where they left off, whatever the approach, adjusting the UI was in our readers’ sights.

• Oh bloody hell, that question is easy: NO roll-over popups. Anything that obscures content on the page should require a click!
• Engage people with better user interfaces, lightweight websites and Web apps in order to create great user experiences.
• Great design + great code = amazing experiences = happy people = a better world!
• I would like to see more usability functions and a “resumeâ€� option to bring up the last links seen on a website when you return to it. That way, if you have to leave, you can return and begin where you left off—a history, but saved on the server side of that specific website.
• Push for consistency and usability.
• I’d have two versions of websites: one with no ads at all, the other with ads, etc. The Internet user would have options.

Come Together

Our Twitter friends also wanted to change the Web design community and foster a collaborative mentality that motivates the masses. Many innovative and exciting minds are working in the design field, and some believe that the best possible change would be if more designers came together to encourage a forward-thinking and creative environment. By working together, we could educate and strengthen the community, empower the honest and dedicated designers out there and relegate the con-artist crew to the fringes of the industry.

A handful of replies suggested that through the unity of designers, we could effectively guide the industry forward. This doesn’t mean we would all have to agree on everything and move in the same direction. It just means that a friendlier, more collaborative mindset could take the community to new heights.

• I would reduce hostile competition between designers and increase collaboration. IMO, too many designers do their own thing.
• Improve quality of and access to education relevant to the industry.
• I’d make some sort of service-level agreement compulsory so that clients could see those “freeâ€� and “cheapâ€� website con men for exactly what they are.

Flash: Fix Or Farewell

The next item our followers targeted falls under a couple of the other categories we’ve already discussed, but a few people specifically addressed this platform, so we thought we should too: Flash. Some say fix it and keep it around, others say abandon it once and for all. We know the topic is divisive. On one hand, the platform has been used to create some truly inspired work; on the other, compatibility is not guaranteed. For that reason and others, some people have called for its head. Perhaps there could be a compromise, in the form of a stable and functional version that realizes its full potential.

The responses below make clear that both sides are passionate. Flash has done so much for the art and design communities that not giving it a nod would be wrong. Perhaps, though, that nod should be a final one as Flash quietly exits the playing field.

• I would kill Flash.
• Make Flash disappear.
• Somehow sort Flash so it integrates better. Don’t ever overlook what Flash has done for Web design and digital art!

Standards Approval And Implementation

Next up: the standards that govern the field. More specifically, let’s talk about the process by which those industry standards are approved and then universally put into practice. This does partially fall under the umbrella of browser issues, which kicked this article off. We felt we should also address the overly long time it takes for these standards to actually become standards. In this field, where staying ahead of the game and being as innovative as possible is all but mandatory, lags in the industry don’t help us break new ground.

Below are the responses in this part of the conversation. Speeding up the standards certification process would be a major step forward for the Web design community. Moreover, if the implementation happened across the board for all vendors simultaneously, all of our jobs would be so much simpler.

• I want instant adoption of CSS3 so we wouldn’t have to bother with so many vendor-specific rules.
• Web standards should be approved faster. By the time they are official, there’s a whole new language ready to take their place.
• Make Web fonts standardized and universal, starting immediately!

Modding the Box Model

We also thought it prudent to cover the box model and the way different vendors handle this element of Web-based projects. Much like the Flash dispute, there are a couple of different takes on this, and both turned up in the poll responses. Altering the box model math would work if all vendors, say, adopted the IE approach to setting margins and borders and padding around boxes. Rather than working outside the box like the other vendors (who require you to do math to set them), IE works inside the box to keep your div the size you intended. An approach other than with IE would steer the industry away from the box model altogether and just push the grid.

This would provide some level of consistency among the various browsers. Alterations that simplify our work are always welcomed, and cutting out unnecessary steps from the process would be a change for the better.

• Change box-model math.
• Replace the box model with a grid model.

No-Limit Thinking

The next item we’ll examine also concerns a box of sorts, but this one metaphorical. It’s a box found in the minds of many industry creatives and otherwise innovative thinkers, and changing it would be amazing. If everyone could break free of their mental boxes (the ones they can’t think outside of), the industry would explode. We’d soar to fantastic heights and open up unforeseen trails. No-limit thinking should be a required study for everyone working in creative fields.

Hopefully, the advice offered below will help you break out of your box. Usually, the only reason we don’t try something new is because we haven’t seen it done before. That should be a reason to go forward, not back.

• Make your work free of limited thinking. Why a sidebar? Why a menu? Why a content area? Why not re-invent it all?! Free your mind!

How Design Is Perceived

The last topic that came up in the poll is the way our job is perceived by those outside of it, especially clients. It’s a problem that bothers many in the industry. Unfortunately, some belittle the creative process, undervaluing us and our work in the process. We often hear horror stories of designers being disrespected by former clients. It can make the job much more difficult than it should be. This would be a welcome change.

Easier said than done, but admitting there is a problem is always the first step to solving it. Opening a dialog on the subject, and keeping the tone respectful, is one way forward. Information is usually the best way to combat ignorance.

• Change the client’s ingrained perceptions of cost and value.

Additional Resources

We say a final word of thanks to all who participated in the Twitter poll. Below are a few resources to check out when you have the time and inclination. Feel free to leave comments on what you would change about the world of Web design.

• The Web Standards Project
  A grassroots coalition that fights for standards to ensure basic affordable access to Web technologies for all.
• World Wide Web Consortium (W3C)
  An international community that develops standards to guide the long-term development of the Web.
• The Interactive CSS Box Model Demo
  Just what you would expect. Get a look at the box model in action.
• The CSS Box Model
  A comprehensive guide to the CSS box model for those interested in learning a bit more about it.
• 20 websites to Help You Master User Interface Design
  A useful post that teaches you the basics (and more) of UI design.

It is always surprising how many fresh, innovative and always useful tools and resources appear from week-to-week from within the web design community. In this weeks design news round-up we take a look at four more cool and free new apps that may help you with your next web project.

(continue reading...)