Surfing the net from a dedicated gaming console is not something new, in fact the ability to connect your gaming device to the internet was first introduced back in 1997 with the Game.com which allowed user to connect a dial-up modem and then check their email and browse the internet. However still to this day many designers ignore or pay very little attention to game console browsers when designing a new site. However there are some things that you need to remember when you are designing for a gaming console, added here are some of the most important things to remember, feel free to let us know if you think we forgot something.

Perhaps the biggest reason why so little importance has been given to the gaming consoles is that even though many households own either a Wii U, Wii, Xbox or Playstation, there is still a relatively small number that uses these devices to surf the web. The biggest problem is that these devices were not built for internet browsing and therefore they simply feel clunky when used to navigate the web.

According to StatCounter, the Sony PS3 accounts for just 0.1% of all web activity. Wii and Xbox browsers don’t even appear in the chart, although that’s possibly because they’re intermingled with Opera and IE9 statistics.

What consoles should be tested?

So the first thing you should decide when making your website more console friendly is what consoles will you test your site on, of course we know that you will not be able to test your site on every gaming device on the market, however it is recommended that you test on at least two major platforms so you can create as user friendly a website as possible.

1. Consoles that plug into a TV screen, such as the Nintendo Wii, Sony PS3, and Microsoft Xbox 360.
2. Handheld consoles such as Sony’s PSP, PS Vita and Nintendo’s DS and 3DS.

Different Consoles, different Challenges

Each different console brings with it different challenges, the biggest challenge is that even though the resolution is often higher than normal screens gamers sit much further away from their consoles, furthermore since they are not using a mouse to control the browser their clicks might not be as precise, another problem is that many game console browsers don’t support flash or CSS features.

What can designers do about it?

As more and more users will visit your website from a gaming console you can use different progressive enhancements that make it possible for people to access your site’s content even on a device that doesn’t support certain features. Another thing you can do is make sure your website loads as fast as possible. Even though some users will visit your website from a TV capable of showing HD quality you need to remember that not everyone has a Smart TV and therefore you should make sure your site also looks good on older screens.

console.maban.co.uk is really a great resource for information on how browsers function on different gaming systems, UK developer Anna Debenham created the site that provides descriptions, controller details, screen resolutions, user agents, JavaScript support, Flash versions, HTML5 test scores and a wealth of other information.

The post Things to remember when designing websites for gaming consoles appeared first on Design Reviver - Web Design Blog.

Those involved in the web design process knows that this is one of the most important elements for the success of a website. It is not secret that designing a good website takes time and dedication. While most designers handle the task well, there are still a lot of designers making simple mistakes that can easily be avoided. Here is a collection of the 10 biggest mistakes that should be avoided when designing a website.

Fixed Font Size

Personally if I run across a website where I can’t change the font size I will most likely leave the page never to return.  Always allow users to resize the fonts on your pages based on their own preferences. Some people just don’t have 20/20 vision and would like your text to be a little bigger, now if you are forcing them to squint just to read your text then you are doing something wrong!

Confusing the visitor with many versions

In the past web designers made several different versions of their websites, Flash or HTML, Fast Bandwidth or Slow Bandwidth. Today there is nothing more annoying that trying to enter a website only to be greeted with a plethora of different versions. Your website should work flawless despite the speed of the visitors connection. This also goes for size with responsive design today there should be no reason to ask your visitors which screen resolution they want to experience your website in.

Spelling Mistakes 

While this should seem like a no brainer, not only in web design but in general, you would be surprised to see how many website have spelling errors, however with spellcheck there is no excuse for not spelling something correctly. It really does improve a website if there are no spelling mistakes. Also make sure your headings don’t have spelling mistakes.

Fancy fonts that are unreadable

So you found the perfect font that will look amazing on your website, great but can your visitors read it? Remember the main aim of your website is to deliver a message. If no one can read the font then the message is bound to get lost in translation.

Playing Music

It used to be that many web designers would integrate music into their websites. Honestly there is nothing worse than having to go through all your open tabs to find the one spewing out some hideous music. If your website requires an audio file to get the message across, then make sure it is user controlled allow the visitor to push the play button when they are ready to listen to your audio.

Using Harsh Colors

Back when the internet was first gaining in popularity it used to be that web designers would use a lot of flashy colors to get the visitors attention. However not only will these colors look different on different screens, but the harsh colors are not good on the eyes, making your site a chore to view.

Unreadable CAPTCHA

Yes I know some sites simply require CAPTCHA filters as a way to reduce the spam comments that make it through, or in order to prevent bots from registering on a site. However honestly there is nothing worse than trying to decipher  an impossible CAPTCHA.

Links pointing nowhere

There is Nothing and I repeat Nothing worse thank clicking on a link only to be met with a “page not found”. If you are going to link to something then please make sure that the link actually works. Sometimes links become dead without you noticing, therefore it might be a good idea to once in a while go over them and make sure they are still working.

Hard-to-Find New Content

Unless the website you designed is just filled with static information, chances are you will be updating the site on a regular basis. One big mistake web designers make is that they hide the new content from the visitor, but instead of sending them on a scavenger hunt for the news you are actually guiding them closer and closer to the back button.

Unnecessary  registration

Let me say this ONE more time, there is nothing worse than wanting to read something only to be met with a “please register” page, unless this is absolutely necessary then please don’t ask visitors to register. And if you do ask them to register don’t bombard them with useless spammy messages.

No cross browser testing

Remember not all browsers are created equal, this also means that not all websites will look the same on all browser. This is why it is very important that you test your website on several different browsers before publishing your website. I used to work for a company that not only checked their website compatibility with the different browsers but with different versions of the same browser going all the way back to those being used in 1999 just to be safe.

The post 11 Mistakes web designers should avoid appeared first on Design Reviver.

With bounce rate and time-on-site assumed to be the top trump cards in Google’s new algorithm; there is most certainly a push from Google — and subsequently advertisers — for websites to become more user, in addition to search engine, friendly. Read on to find our top ten tips for enhancing the user experience including everything from Search Engine Optimization (SEO) and rich media, to navigation and mobile device optimization.

1. Faster is always better.
It is not a newsflash that speed and load times rule the web. Every second a user has to wait, the more likely they are to leave your site. If you’re experiencing some lag time, try reducing the number of HTTP requests by simplifying the design, using CSS and CSS Sprites, combining images into a single file, and reusing elements — like page headers — which can reload from the cache. You can also create the illusion of speed by placing style sheets in the header. This will allow the header and navigation menus to load first thereby showing progress and pacifying user impatience.

2. Simply site navigation.
The foundation to every webpage is the sitemap and navigation. Clear and concise menus are essential as well as a single page showing all links. Online reading patterns lend themselves to the typical “F” pattern (example below). To ensure that the user can easily interact with your content, keep a relatively short list of menu option down the left side and across the top. Be sure that all navigation info stays above the fold and that the logo links back to the homepage. Intuitive navigation outlasts number of clicks, so go ahead and forget about that 3-click rule. Not to imply that the user will stick out a lengthy path, but ultimately clicks don’t cause user frustration, poorly organized sites do.

3. Embed Rich Media
Tickers, videos, animation and other rich media options have changed the landscape of the web and help keep the user on your site for longer while they interact with more content options. Nowhere is this more valuable than on education, news and entertainment sites. The biggest hurtle to overcome with rich media embeds is software compatibility. Consider using a third-party hosting site like youtube.com and embedding the video directly on your site. This will level the compatibility playing field and remove the server-hosting burden from you.

4. Optimize for Mobile Devices
While designing (or redesigning) your site, the need to factor in mobile devices is pressing. There are several schools of thought regarding site optimization, but the most all-encompassing and user-friendly option is to simply use the same URLs as the standard website. Strip down the site content to only the bare essentials. Simplicity is of the name of this game. Avoid using scripting languages or Flash components, as most devices are not equipped to support them. Keep in mind the small screens and use small graphics or ads and content that are scalable.

5. Bookmarking
Listing your site on social bookmarking websites like Digg can drive quality traffic to your way and bump your page views. It can also have a cascade affect where a user will tag your site for yet another site where yet another user will tag it again, and so on. Bookmarking is a handy tool that is relatively easy and doesn’t require a ton of time to achieve.

6. Utilize Social Media links.
Social media sites have taken over the way users share information with one another. Give viewers an easy way to link content they like from your site to their profiles. Not only will it spread the word, it will also get the attention of like-minded users who will not only click out of curiosity, they will probably spend quality time on your site which will help bolster your chances in the search engine pool.

7. Clearly Identify and Brand.
Brand identity is essential in all forms of media, but is most important on a large and complex website. Be sure the company’s logo or name is clear in the header. Choose, colors, fonts and graphic treatments compliant with brand style guides and reinforce that look at every opportunity. The more comfortable the user is with the style, the more familiar they are with the brand and are more likely to come back time and time again.

8. Search Bars are Essential
The more complex the site, the more essential the search bar . For user ease, stick to the tried and true method with an input field and a “submit” or “go” button located at the top, right of the page. Design the search bar cleanly with the font and color style already established for the overall look. In regards to search fields, less is more. Take Google for instance (see below), their entire brand is built upon the search bar and it remains simple and straightforward.

9. Strategically use Keywords and Titles
Be true to your content. Of late, Search Engine Optimization (SEO) has been all the rage, but don’t sell your digital soul for a few extra clicks. Google is working hard to filter and outsmart spammers who abuse the algorithm. Instead of getting caught up in the hype and fortifying your site with endless keywords, focus on how the user would look for your information and what words they might use. Be strategic in your keyword choices and get to the kernel of the matter to effectively garner the largest audience who will also spend the most time looking through your content.

10 Design. Design. Design.
Place big, attention-grabbing headlines above the fold, but don’t be overly concerned about making a user scroll. If you’ve successfully filled your site with quality content that is organized and clearly designed, scrolling won’t deter a user. The presentation of information requires a designer’s eye to ensure a site that is both aesthetically and functionally sound.

The post Web Usability: Top 10 Tips appeared first on Design Reviver.

There is a plethora of ways to increase conversion rates, but a couple of ways are often disregarded as important, when they truly are. In order to show the importance of accessibility and usability, here we’re going to take a look at a variety of tips that’ll help increase conversion rates through them.

Accessibility

Flexible

Accessibility is all about flexibility in design. The design should be able to stretch and cope to resolution sizes. The reason this is important in accessibility is that if the design does not cope for many different resolutions, it becomes unbearable for users to use or browse about, making it inaccessible indirectly.

Cross Platform

A website is all about being cross platform compatible. The website should be able to easily work on mobile devices ranging in size as well as large displays and other mainstream devices. In addition to making your website cross platform compatible, you should also bring your service to different platforms so your users can take your service wherever they go.

Take Netflix’s online service as an example. It started as an online service for instant streaming, and then it was brought down to mobile devices via native applications, and so on and so forth. This allowed them to increase conversion rates from their online service as it became accessible and native to many devices they utilize.

Touch Safe

Mobile devices are migrating from stationary qwerty keyboards and keypads to touch screen interfaces. This also means your website needs to be touch screen safe and compatible as a part of accessibility. Small links and navigations make it impossible for touch screen mobile platform users to easily navigate about. With that said, assure your website is scalable and adjusted for different platforms as a part of accessibility.

Weight Adjustable

Weight adjustability refers to the weight of the available content on your website. As different users access your website from different devices and platforms, the weight of your content should adjust to the real estate or screen space available, getting rid of unimportant content, and leaving that of which makes your website important, such as the shopping of goods as well as the purchases of goods, and getting rid of latest news and other unnecessary items and or content.

Printable

Many disagree about the fact that accessibility includes making pages printer friendly. However, accessibility refers to the availability of content, which includes making certain pages printer friendly. If users need to print out their invoice or receipt, the page needs to be customized specifically for printing for best results. Therefore, printability categorizes under accessibility.

Usability

Usability is all about making your website and or service easy to work with, use, and navigational. Imagine having an instructional booklet on putting together a personal computer. If the instructional booklet is not clear on its instructions, you are bound to make mistakes as a first timer to personal computer building.

Similarly, if a website is not clear and easy to browse about, users will most likely leave the site, which loses potential customers or clientele, which decreases conversion rates. To show the importance of usability, we cover several tips that are sure to get you started on making your website and or service more usable or user friendly.

Clean Layout

A clean layout is always the first step to usability. Getting rid of unneeded clutter, organizing elements and objects across the design grid, helps make the website easier to navigate about and reduces eyestrain for the users who cannot handle too much information and very tiny content.

Feature Filled yet Simple

Users love features, but they also love simplicity. What this means is, when implementing features to your service or website, usability should be top and key on your list when adding new features to improve your service or website.

Generally speaking, features should be very easy to use and not require instructions to get them working or to get your users to use them about. Therefore, focus on the complexity of the feature in the back-end, but for the user or front end, make sure it appears as simple as possible, yet satisfying feature wise.

Easy To Understand

Your website’s layout should be speaking for itself. What this means is, you can display as much content as necessary on many different pages, but the layout of how the content is displayed should be clear and precise in terms of understanding.

A user does not want to spend time searching through clutter to get to a piece or feature they were looking for, and they also do not want to go through many navigational links to get there. Therefore, make everything easy to understand as if they have put the layout together themselves, knowing every corner, and where everything is in an instant.

Versatile

If your website or service is designed for users to access or use it on Earth and on Mars, make it versatile and adaptable so it works well on Earth and on Mars.’

What I mean is, your website or service should be able to adapt between many different situations and platforms, and be very useable as it would be, being viewed on the intended platform and resolution.

Expandable

Your audience could anyone, folks who are losing their eyesight, others who are dyslexic or color blind to certain colors. What this means is, your website should offer features that allows them to expand on your website. For example, many users do not tend to stick to the text size you initially designed your website around and use their browser’s tools to expand it.

This not only destroys the layout, it is also very tacky and more difficult. Instead, make your layout or design expandable to such changes, and offer a feature that allows your users to increase or decrease the font size. The same principle applies for font colors, or background colors.

Add a nice color palette of which users can choose from to change the background or foreground colors, it gives them the flexibility and adaptability they need without having to leave your website or use a third party service to do so, increasing conversion rates, and returning customers or visitors.

Web forms are used for all different types of data submission, video submitting, contacting, blogging, registering, or for ordering items online. All the forms come in different flavors, large or small, black or white, short or long. Therefore, forms are very important to you and your users, thus, making them just right is the key to increase usage.

Below we cover six tips to improve your forms for better exposure and usability.

Not Too Large, Not Too Small

A major issue with many forms out there is their sizes, many developers or designers try to fit long forms into small spaces, reducing the size of the input boxes greatly making it difficult for users to proofread what they enter. A good ideal size for each input box, which includes large text boxes and the likes, really depends on the amount of data you expect a user to input.

For example, let us say you run a blogging service, you know that blogs can be short or long, thus, giving the textbox a good width and height is really the key. Users want to be able to easily proofread their blog post before it makes it live via the textbox, so fairly large text is also a plus, so they can easily catch typing mistakes or missing punctuation.

JavaScript Effects

A great addition to form textbox fields would be some simple JavaScript effects such as auto expanding features or character counting features, depending on the type of data being imported. Despite these effects sometimes being of no relation to your service or form, users do find them handy, especially if a lot of text is being submitted or edited.

To give a good example of a situation where an effect like this can help, let us look at a forum script. Suppose you are creating a forum script where users will be able to discuss certain topics, as you know, posts can be short or long. If a user’s post happens to be long, scrolling through the textbox is an undesired thing to do, as the user cannot quite view the entire posting. Therefore, providing an auto-expanding effect is quite helpful. As the user’s text gets near the bottom of the textbox, it will automatically expand a few lines, keeping your users satisfied.

Easy to Understand

Many users are turned away from forms that are difficult to work with. Hence, it is a definite must to be clear and precise about the information being collected as if they cannot understand what you need, chances are you will not receive what you needed. Another aspect to look at is just because it may be understandable to you, does not mean it will be understandable to your audience. Therefore, it is in your best interest to ask for feedback on understandability of your forms.

Not Too Much, Not Too Little

Another key aspect that causes users to turn away from completing your forms is that your forms ask for too much information. Users want to be completing the form to continue rather than spend the time filling them out. Thus, it is key for you to keep your forms as short as possible. For example, if your form is a registration form to an online service, leaving account settings whether optional or not out of the registration forms makes the form look shorter and easier to fill out increasing the chances of user registrations.

Moreover, leave the information you do not need immediately out of the form, and have them choose to enter the information later at their own leisure or when it becomes necessary. If the information that you may taken out is absolutely necessary within a few days of signing up, have them fill the information out a day later, such as when they sign back in, you can easily prompt them to fill the information out before continuing. This splits the lengthy form into two easy to fill and understand forms, keeping them happy.

A Simple Uncluttered Design

The design of a form additionally impacts the users experience. Your users do not want to bounce back and forth to get to each form field in order; they want to be able to easily fill the fields sequentially without trouble. Therefore, the design for the form should be as simple as possible leaving the fields easily accessible in the order intended.

Understandable Security Measures

While users understand security measures applied to forms help prevent spam, they also do not want to struggle to complete a form. With that said, complex spam prevention tools such as CAPTCHA images cause less completed form submissions from frustrated users. I myself have left many forms that I had intended to fill out due to their hard to work with security measures. Thus, as a developer or creator, creativity is what is needed to avoid the spammers but not the users.

Many new ideas and techniques have become apparent such as mathematical questions, slider prevention systems, as well as others. My personal favorite that I found very intuitive and easy to use is a drag and drop security measure. The user simply drags a shape requested from a palette of shapes right into the shape box, if you selected the requested shape, the form will submit. As it is simple and easy to use, your users will enjoy playing with the tool, as well as keep spammers out of the way.

To Conclude

Overall, getting your users to complete your form is a process that requires thought and ingenuity. With that said, creating a form is easy, but getting it properly designed, formed, and well laid out is tricky however an attainable aspect, but if it is done correctly, it can rewarding. To conclude, keep your forms as simple as possible and as down to the point as it can possibly get.

Ask around for feedback about the design and layout for whether the form can be easily filled out, whether it is easy to understand, and if it is easy to follow. Improve your form accordingly, and it would be ready to hit mainstream.

Today’s news focuses on only one single design resource… and what a FREE resource it is! It is The User Interface Design Framework from webalys.com, which is basically a huge design framework that consists of a complete GUI library, a set of of 260 minimal vector icons and a massive Illustrator style library. This is a must have resource for any professional designer.

License: The framework has been released as a complete web designer kit for free, even for commercial use.

You can download the UI Design Interface here: User Interface Design Framework
You can view the details of the framework below:

GUI Library

The GUI elements are based on common interface patterns (accordion, expandable panel, progress bar, tags, slide show…), that integrate usability good practices and are perfect for wireframes and interface design.

Vector Icons Library – 260 Minimal Icons for Free

This pixel precise icon collection have been created specifically for interface and web designers. They are based on a precise 16 pixels grid, which means that they stay clear and have a crisp look even at small sizes.

Graphic Styles Library

The Graphic Styles Library consists of 200 graphic styles for buttons, navigation menus or panels and 330 swatches harmonized with graphic styles for backgrounds, typography and other GUI interface elements.

You can download the UI Design Interface here: User Interface Design Framework

By Paul Andrew (Speckyboyand speckyboy@twitter).

Today’s news is a refreshing look at some of the most recent jQuery tutorials and techniques. Accompanied with the recent popularity of CSS3, some of these new techniques are groundbreaking and others simply take a fresh look at older design techniques.

CSS3 Rounded Image With jQuery

In this tutorial you will use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot above.
CSS3 Rounded Image With jQuery

Image Highlighting and Preview with jQuery

In this tutorial you will be shown how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow your users to view a bigger version of an image that is relevant to some context.
Image Highlighting and Preview with jQuery

Simple AJAX Commenting System

In this tut,, you are going to build a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.
Simple AJAX Commenting System

Interactive Photo Desk with jQuery and CSS3

The idea of this tutorial is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
Interactive Photo Desk with jQuery and CSS3

By Paul Andrew (Speckyboyand speckyboy@twitter).

We love reading the discussions that develop on Answers. We love the fresh and innovative dev solution’s, the sometimes heated discussions over age old issues and appreciate all of the inspiration that is offered by Answers’ users.
Sometimes though, we come across a question that is neither controversial nor difficult to answer. And that is the point of Answers, its not just about the tricky questions and complex solutions within web design, it is also there to help beginners and amateurs. And that is what we would like to highlight in this post.

You can leave your thoughts on this topic in the comment section below or you can leave your solution on the original question here: Why do Some People Use HTM Rather Than HTML? on Answers.

Why do Some People Use HTM Rather Than HTML?

This question was originally asked by Rollback999, and you will find the favorite answers below:

Best Answer from Scunliffe:

Unanswered Answers

There are no unanswered questions this week, what a great week it has been!

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.