It has now been two weeks since our launch of Design Reviver Answers, and we couldn’t be happier. Even more members, yet more visitors, an abundance of questions and a hell of a lot more answers – we really are building a great web design community portal!

We felt it would be nice to share with you our favorite Questions and Answers, and ask you: “Have you asked a question yet?“

Would I Possibly Be Able To Know What Language My Websites Visitors Use?

This question was asked by Rollback999:

Answer from Themans?:

“Sure! This is mostly used for detection and then translation of a webpage.

Function getPreferredLanguage() {
$langs = array();
if (isset($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
// break up string into pieces (languages and q factors)
preg_match_all(‘/([a-z]{1,8}(-[a-z]{1,8})?)s*(;s*qs*=s*(1
0.[0-9]+))?/i’,
$_SERVER['HTTP_ACCEPT_LANGUAGE'], $lang_parse);
if (count($lang_parse[1])) {
// create a list like “en” => 0.8
$langs = array_combine($lang_parse[1], $lang_parse[4]);
// set default to 1 for any without q factor
foreach ($langs as $lang => $val) {
if ($val === ”) $langs[$lang] = 1;
}
// sort list based on value
arsort($langs, SORT_NUMERIC);
}
}
//extract most important (first)
foreach ($langs as $lang => $val) { break; }
//if complex language simplify it
if (stristr($lang,”-”)) {$tmp = explode(“-”,$lang); $lang = $tmp[0]; }
return $lang;
}

Source: www.barattalo.it“

How Can I Redirect Mobile Users?

This question was asked by Heri Setiawan:

Answer from Joel Reyes?:

“If you’re looking to redirect users that visit your site on a mobile platform then you can embed this within your html file. It’s a very simple JavaSript code.

<!–
if (screen.width

All you have to do is simple replace the mobilevs.php with the location of your sites mobile version.”

Answer from Heri Setiawan?:

“Hi joel. That’s nice trick. But i recommend to use this PHP mobile detection, as it can be used to detect any mobile platform, like Windows Mobile, Blackberry, Opera Mini, Android, Iphone, etc.

Found it here, and official site here.”

How Do I Protect My Email Addresses On My Blog?

This question was asked by Themans:

Answer from Autobots?:

“If you’re trying to run a more secure enviornment by protecting/encrypting emails then you can use the following script to protect against bots and spyders.

Code:
function hide_email($email) { $character_set = ‘+-.0123456789@ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz’; $key = str_shuffle($character_set); $cipher_text = ”; $id = ‘e’.rand(1,999999999); for ($i=0;$i”+d+”"‘; $script = “eval(“”.str_replace(array(“\”,’”‘),array(“\\”,’”‘), $script).”")”; $script = ”; return ‘[javascript protected email address]‘.$script; }

Source: www.maurits.vdschee.nl“

How Can I Customize My UL List?

This question was asked by Themans:

“UL Lists are for the most part the same, there is rarely much you can do when it comes to customizations beyond the links, text color, etc. However, here’s a script that will create a simple slide-out effect for your UL lists. Enjoy!

Create an ID section in your CSS. We then place the following as your HTML:

• Playstation | Hide
• iPod Touch | Hide
• XBOX 360 | Hide
• Nokia N97| Hide
• Dell Inspiron | Hide

Now we need some JavaScript code to allow the Slide-Out effect to take life:

window.addEvent(‘domready’, function() {
/* From the list with ID myList, for each li element of the list…: */
$(‘myList’).getElements(‘li’).each(function(e){
/* …get the ID of the selected item */
e.getElement(‘a’).addEvent(‘click’, function(listID){
/* Enable Fx.Slide effect for the selected item */
var list_element = new Fx.Slide(listID);
/* Enable slideOut() effect */
list_element.slideOut()
}.pass(e.id));
});
});

Source: woork.blogspot.com“

What Books Do You Recommend For A Beginner To Kick Off The Start Of Learning Web Design?

This question was asked by Shu:

Answer from Heri Setiawan:

“These may help beginner:

Principles Of Beautiful Web Design
Adobe Photoshop CS3 Classroom in a Book
XHTML And CSS : A Web Standards Approach   <- this one is awesome
The CSS Anthology : 101 Essential Tips, Tricks & Hacks
WordPress Theme Design (here is the newer version)”

Answer from Heri Setiawan:

“HTML and CSS Web Standards Solutions: A Web Standardista’s Approach.
HTML Dog: The Best-Practice Guide to XHTML and CSS.
The Zen of CSS Design (see css Zen Garden).”

What Next for Design Reviver Answers?

Michael Lajlev asked us this question: Please Make An Option For Showing If A Topic Is Resolved And How Many Comments Is Made To A Q?. Its a fair question and this is our answer:

“Thanks for the suggestions Michael, we will be adding the number of answers onto the question pages shortly. At the moment we don’t have any plans to close questions (and mark them resolved) I know some Q&A sites like yahoo answers have that system so it might be something for us to add in the future.”

If anyone else has any suggestions or ideas on how we can improve the site, we would love to hear from you.

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

Over the past few years we’ve seen an increase in awareness and interactive use for AJAX, it’s becoming more and more popular and it has empowered web apps with the functionality of desktop applications.

This is Ajax, a powerful web-based scripting language that stands for Asynchronous JavaScript and XML. It’s main use is to allow an application to communicate with a server without having to refresh your web page.

Within this article we’ll discuss a variety of ways for you to embed AJAX into your web designs, we will also touch base on how they can benefit you.

Web Forms and Validation

Working with forms for the most part can be a hassle, however, using AJAX you can develop much better web forms with several features such as validation. You can also use AJAX to set-up fields that are auto-complete and call onto a server to cross reference if a user name (i.e.) has been taken or not.

AJAX can be utilized for the entire process of entering and submitting details on a web form. Another common use for AJAX in web forms is the measurement of a passwords strength, or the instant-communication with a user if a field is missing certain details.

Examples and Resources

• jQuery for Designers – Ajax Form Validation Example
• Check If User Name Exists Using AJAX And C#
• Real-time Form Validation using Ajax
• Build Your Own AJAX Web Applications
• An AJAX contact form

Interacting With Users Through Updates and Notification

AJAX can also be used to diversify the way a system or database interacts with a user. For example let’s take a look at Twitter, this social phenomenon took rise and became extremely popular not just because of the service it offers, but also due to the simple and super-functional web interface.

When you’re viewing tweets and you’ve been staring at the same page for a couple seconds, Twitter uses AJAX to send you a small notification of how many new tweets there are, all without having to refresh the page.

Where-as other scripting languages require you to refresh the page before you can view any changes. This is now called the “Reverse Ajax Technique”. You can implement this sort of functionality into your applications as well, it’s just a matter of finding the most effective way to accomplish it.

Examples and Resources

• Reverse Ajax Technique
• Twitter

Instant Messaging and Chatting

Chatting and Instant Messaging through the browser has opened doors for new technologies and applications (such as Twitter, and Facebook), however, what made them standout was their ability to relay information back and forth at an instant without having to open a new window or load a new page.

The way AJAX is used in instant messaging or chatting is these apps update the server by letting it know that you have sent a message/said something and they also check the server at certain intervals to see if you’ve received a new message.

Another way IM and Chat Rooms use AJAX is by updating your profile or user interface with the new message that was delivered after it checked the servers and found a new message.

Examples and Resources

• Aim Express
• Kool IM
• Easy Messenger
• Meebo

“Collaborative” Graphical User Interfaces

With the rise of new and “improved” design trends you really have to use some heavy artillery to have your user interface stand out from the rest. What artillery may be this be (you ask)? Why AJAX of course! With AJAX we can develop not only cleaner and much more functional interfaces, but we can create features that can make a user feel like a kid in a candy store.

You can virtually accomplish more on a single page then on any other number of pages put together. Your web applications will look good, but it they will also feel good with increments of speed. AJAX simply makes things faster for users. Using AJAX can also limit the number of requests to a server which ultimately reduces bandwidth and speeds up the loading of your web pages.

One application that stands out from the heard is Google Maps, the interface is simple, maps load fast (may somewhat depend on your Internet Connection), and you feel as though you have full control over the application. Thumbs up for Google.

Examples and Resources

• Google Maps
• AJAX Interface Design
• Desinging User Interfaces with AJAX
• Better Web-App Interfaces with AJAX

Adding External Widgets

Most sites use widgets calling for an external source for monetary reasons such as ads or for displaying RSS feeds, and updates via Twitter. Because when you’re using AJAX, whatever page that’s using the JavaScript is not limited to whichever server it’s located on.

With AJAX you can call on a server at anytime (24/7). And because of this, a variety of sidebar plugins for CMS’s like WordPress, Joomla, and Drupal (to name a few) can be used. A good example of an external widget utilizing AJAX is Google Adsense and Google’s Ajax Feed API.

Examples and Resources

• Google’s Ajax Feed API
• Building Efficient Widget Container Using Ajax
• Creating an AJAX Rating Widget

Graphical icons offer an opportunity to project to the user an instantly recognizable message – that is something that would normally take an entire paragraph of words. Of course the icons need to be well designed in the first place to successfully convey your message effectively.

In today’s news round-up we have five fresh tutorials that are both easily recognizable and certainly well designed.

How To Create a Detailed Apple iPad Icon in Photoshop

The Internet world exploded with the news of the Apple tablet launch last week. Named the iPad, it’s set to bring yet another revolution to the way people access and browse the web. An iPad icon would be a sensible addition to any web designer’s resources toolbox, so let’s fire up Photoshop and create our very own detailed iPad icon graphic.

How To Create a Detailed Apple iPad Icon in Photoshop

How to Create a Shiny Paint Bucket Icon

Learn how to create a simple three-dimensional icon of a paint bucket, complete with paint splotches, with this colorful tutorial. Harnessing the power of paths, layer effects and consistent lighting you'll obtain an effective, shiny icon.

How to Create a Shiny Paint Bucket Icon

Design Monitor Icon in Photoshop Video Tutorial

Design Monitor Icon in Photoshop Video Tutorial

How to Make a Professional Buddy Icon in Photoshop

In this intermediate-level tutorial, you'll be shown how to make an awesome icon from scratch using Photoshop. You will need basic knowledge of Photoshop and familiarity with the Pen Tool (P).

How to Make a Professional Buddy Icon in Photoshop

How to Create a Photo Frame Social Icon Set in Illustrator Tutorial

In this Illustrator tutorial you will learn how to create a social bookmarking icon that is wrapped in a photo frame and might just be good enough to hang on your wall.

How to Create a Photo Frame Social Icon Set in Illustrator Tutorial

By Paul Andrew (Speckyboy and speckyboy@twitter).

Buttons are a small but critical part of a web site design. In the best designs they create a strong call-to-action — add to cart, sign up, or learn more — as well being one of the details that reinforces the overall quality of the design.

Zendesk button

Here are over 60 examples of great web button design to provide some ideas and inspiration for attractive buttons to enhance your next web page design.

Elements of Design

Looking for examples of good design of the various elements that make up a web site? Check out my Elements of Design showcase. It covers a range of areas, from search boxes to footers, and is regularly updated.

Further Reading

• Call to Action Buttons: Examples and Best Practices
• Button Design Showcase
• Web Design Trends: Call To Action Buttons
• Showcase of Buttons in Web Design
• 80 Examples of Add to Cart Buttons for Design Inspiration
• 20 eCommerce Add To Cart Buttons For Your Inspiration
• “Add to Cart” Button Showcase
• 107 Add to Cart Buttons of the Top Online Retailers

Color is the integral element with design. It can bring a bland idea to life, it can revitalize a boring and dreary web site and can bring lifeless art to, well, life. Why is it so powerful? Because different colors can invoke different emotions with different people, thus altering our perception of how we see art.

In today’s news round up we have collected some color related articles, some tools for your inspiration and learning.

Color Theory for Designers, Part 1: The Meaning of Color

Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself.

This is the first in a three-part series on color theory, were the author discusses the meanings behind the different color families, and gives some examples of how these colors are used.

Color Theory for Designers, Part 1: The Meaning of Color

25 Color Combination Tools for Designers

There are a lot of online tools to help create a beautiful color combination. They all vary slightly to suit each designers with different preferences on how they work. In this article they collected together 25 of the best color tools, with a quick overview on each to help you decide which is best for you.

25 Color Combination Tools for Designers

Colorgorize the Web

The first version of Colorgorize was published in 2007 as a project at the University of the Arts Bremen, Germany. Back then, Colorgorize was a Firefox add-on that could display similar colored websites to the website currently opened. Colorgorize has since changed to a website recently to allow it to reach a bigger audience. Today, thousands of websites are already analyzed and can be searched by colors.

Colorgorize the Web

What If Computer Graphics Ran Under Crayola's Law?

What If Computer Graphics Ran Under Crayola's Law?

By Paul Andrew (Speckyboy and speckyboy@twitter).

Working with CEO’s whether through our peer groups or on site repositioning their companies, the first order of business is always the same; helping them understand the importance of the culture of the organization and more importantly the impact that they have on it. We’ve all heard about the “culture” of the company. There is a major difference however between “talking” about it and “making it happen”.

Unequivocally, change has to start at the top. With you. It is the CEO that “sets the tone” of the organization.

I’ve been involved with companies that run the gamut – from CEO’s that are –

1. Self centered and egotisitical – the “it’s all about me” guys.
2. The CEO’s who are anal and micro manage.
3. The ones that are always working “in the business needing to / making it happen”.
4. The ones that are true leaders, nurturers, cheerleaders and coaches.

It is latter that you want to get to regardless of company size.  If you’re not already there, unfortunately, it’s a process that takes time AND work.

Here are some steps that will help you identify the culture of your organization and how to address it –

• If you feel that your employees don’t work hard enough, only seem to be there for a paycheck or simply don’t work well together, you need to hold yourself accountable and realize that it’s up to you to change this. If it’s an isolated issue, remember “it’s about attitude not ability” and it can be dealt with as per my post.
• If you fall into either 1, 2 or 3, experience has shown me that this is lack of confidence on the part of the CEO caused by what I call “the business running them instead of them running the business.
• You can address this by garnering the knowledge to take control of the business. Some people get MBA’s. History has shown me that the experience we garner running our companies is at least the equivalent of getting an MBA. (Note: I can personally vouch for that as I went back to school after 25 years and got my MBA after selling my business!) When I was asked that particular question, I said that what the MBA did for me was “validate” what I already knew. (Confidence).
• I received a call yesterday from a CEO that said to me that they “felt like they were on an island” running the business. This is a great example of someone that realizes they need to get to step 4.

There are other resources. When I was building my company, I had a partner that I confided in and I installed a board of advisors. I found this to be helpful.

Today, whether it’s on site, guiding the repositioning of the organization or through the Peer Group process, the strategy is always the same. Provide the CEO with the knowledge to be able to confidently manage their companies. The important thing to remember is that you need to be open minded and willing to learn. Without that, you will never be successful. NONE of us have all the answers.

The important point is to never lose site that it is you, the CEO that is ultimately accountable and that the first order of business is to set the proper culture within the organization to be successful.

For more information on WhatTheyThink Peer Groups, click on: http://members.whattheythink.com/peer-groups/

I remember having a conversation with franchise network Allegra’s Carl Gerhardt a few years ago about the impact of more fully featured equipment in corporate environments on the volumes of work available to his franchisees.  At the time, his position was that franchisees should go after what Gerhardt describes as “messy work.”  He said, “With more fully featured copiers and printers being installed in corporations and simpler work being performed in house, we can add value with jobs that have complex front- and back-end needs, including variable data, hand inserting and kitting.  As a result, we are seeing a lot of investment in finishing equipment in the network.”

EFI’s announcement today of Fiery VUE may be a game-changer for Gerhardt and others who depend on “messy” finishing work to bring print into their establishments.  According to product manager Mark McCuen, during a sneak peek at the application last week, “A couple of years ago, as there was growing adoption of 40-70ppm color devices with finishing capabilities in offices and work groups, we wondered what the opportunities and barriers there might be for using more Fiery controllers in those environments.  We did extensive surveys, conducted focus groups and had conversations with customers and resellers, and found that users wanted finished documents but they didn’t want to take the time to learn to do them themselves because the print drivers were too complex.  But they really did understand what they wanted and could articulate it well.”

EFI set about developing a simple, highly visual Fiery interface that can be used as a standalone application or as a Microsoft Office 2003/2007 plug-in that takes the print driver out of the workflow.  The result is Fiery VUE, a slick application that allows users to specify complex finished documents with a few clicks of the mouse and virtually no training.  “Sales reps on the street can do a simple five- to ten-minute demo,” said McCuen, “and the customers really get excited about the ability to create booklets and other finished documents in the workplace.”

Fiery VUE uses plain English and images to allow users to select options. For example, instead of “duplex” it says “print on both sides of the page.”  Stapling and punching options are shown graphically, and users can quickly see if, for example, hole punches are going to infringe on document content. It is also structured to only offer the options available on the specified copier/printer.  Thumbnail views allow you to rearrange pages in a slide-sorter kind of way, and even move pages from document to document, mixing file types at will (Word, PowerPoint, Excel, PDF).

One of the coolest features is the templates and green books.  This allows users to automatically create multiple up pages of presentations and other documents. “About 80% of what the average office worker does falls within one of the templates provided with Fiery VUE, and they can also easily create and save their own templates,” explains McCuen. “Green books allow you to automatically create half-size or mini versions of booklets, taking what might have been as many as 15 pages of slides and publishing them to two 8.5×11” sheets in a booklet format, saving as much as 85% over regular PowerPoint printing.  We also found that when you bring green books into a meeting, people notice them more than typical handouts. And a professional-looking booklet like this can literally be created within three clicks.”

I was impressed with the interface, the ease of use, as well as the extensive work EFI did to address customer feedback and issues in this desktop application. It does seem to be somewhat of a double-edged sword for the already-stressed printing industry, enabling users to bring ever more complex work in-house, although it will surely be a boon for sellers of equipment (and for EFI Fiery sales), as volumes grow on these in-house office/work group MFPs. The application can be downloaded for free, and used on the network as well as offline for later printing when connected. But, of course, it does require a Fiery controller at the other end in order to print.

What this will ultimately mean for smaller printing operations, including independents, franchises, Big Box stores, UPS/FedEx, and even online companies like Mimeo, remains to be seen.  For companies that have fully functional MFPs with Fiery controllers, this will enable them to bring more work in house that might otherwise have gone to smaller commercial or quick printers; however, there is an opportunity for smaller commercial and quick printers, many of whom already have a Fiery workflow, to serve the many companies that do not have these in-house capabilities with a much simpler workflow than they may be using today.

Nonetheless, there is the possibility of storm clouds gathering on the horizon, especially if EFI is as successful with this venture as it hopes to be.