Most Gripping and Valuable Content First

A number of sites choose to organize content based on the date it was either posted or in alphabetical order. While neither of these organization methods are necessarily bad, they aren’t likely to keep your customers coming back to read more. You will want to put together new content at the front, but from there, you should organize it based on the most gripping and valuable. Articles reporting on the general state of the business or press releases should be farther down in the order.

Blog Pages Make Bad Home Pages

For an eCommerce store, a blog as the home page is a bad idea. Linking to the blog on the home page, on the other hand, is a great idea. It makes it easy for your customers to find the content, but it also keeps the front page a clear eCommerce store design. The problem with using a blog as the front page is the fact that it is dynamic and loses that sense of professionalism, among other things. Remember that your content does need to be upfront, but at the same time, you’re running an eCommerce store. Just as you would expect an artist who uses art website templates to keep his art at the front of the website, your customers expect your general storefront to be at the front of the website. Instead, just put a window with a link or a snippet from the blog, making it a tantalizing option for curious readers.

Categories Matter

When you have a lot of high quality content, the organization of the content should be such that people can find the information they’re looking for. Use categories to your full advantage. You don’t have to put all of the categories on the main tabs or even in their own menu. Just make sure that you have a link that connects readers to those categories so that they can quickly browse what items or services you have. You should also make the category titles active. This way they can also click on the links.

When organizing content, your primary goal is to make sure that your customers can find everything that they need. You can make this easier by putting your most gripping and valuable content first. You should avoid setting up the blog pages as your home page. Instead, just include a link or window. And finally, make sure that you provide good categories so that readers can find the information they need as they need it.

Why a Mobile Website?

While many potential customers might research new restaurants at home, there are an increasing number of people who use mobile devices when they are at home as opposed to using their laptop or desktop computers. When people are hanging out in their living rooms or drinking their morning coffee, many of them use smartphones or tablets to surf the web, even when they are within reach of their home computers. Even more people use mobile devices to search the internet when they are away from home and, if you want your restaurant to be on the radar for as many people as possible, you need to make your website accessible from mobile devices. If someone is visiting your city, or just out and about after work or shopping, he or she may use a mobile device to search for a place to have dinner. If you have a mobile website, your restaurant page will be available to all your potential customers, whether they are at their homes or not.

What Content Should Your Mobile Website Include?

If you are planning to create only one website for your restaurant, a mobile website has the potential to reach more people than a regular website might. If you already have a regular website, think of your mobile website as an extension of your original page. The number one thing your site should include is the information about your restaurant’s days and hours of operation. Make that information visible on the homepage. Then make sure you include the best phone number to call for questions or reservations and, if you are linked to an online reservation service, the link for that service. The other big thing that customers will want to see on your mobile website is your restaurant’s menu. New customers will likely make a decision about whether or not to eat at your restaurant based on the menu, so make it easy to read and keep it updated. If you change the menu regularly, make sure your website is updated each time your menu changes.

A mobile website is a great way to attract new customers to your restaurant. People who are on the go will be able to quickly see your restaurant as an option when they are looking for places to eat and visitors to your city will be able to access your hours and menu if they are searching from hotel rooms on mobile devices. Don’t forget to include any specials or events on the site, as well, giving potential customers even more reason to try your restaurant.

In our roundup posts, we feature news, articles, resources and tutorials written by designers and developers just like you! We hope you’ll find our roudnup useful – all articles featured on the post have been hand-picked to ensure the highest quality and usefulness!

The State Of Responsive Web Design

Pure CSS Based Multi Level Responsive Navigation Menu: BootM

Simple JS Library for Creating Guided Tours: Tourist.js

 A JavaScript Library for Building User Interfaces: React

Movie Lorem Ipsum Text Generator Alternative: Picksum Ipsum

Turn a Single Div Into a Lovely Color Palette: Color Swatches

A Lovely Set of Thin Free Stroke Icons: Thin Stroke Icons (PSD)

Pure CSS3 Lightsaber Checkboxes

Tool for Removing Backgrounds and Clipping Images: Clipping Magic

A Free Design Blog Template HTML/CSS: Infinite

The Playground Vector Animation Process

JavaScript GIF Encoder That Runs in Your Browser: gif.js

Collection of Free Sketch Files: SketchMine

Reactive CSS Transitions

Historically the main problem with using CSS/JavaScript has been lack of browser support and here comes the hacks.

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.

I came across an interesting infographic showing the lifestyle priorities for those men and women who have an internet addiction.

Via: broadbandexpert

1. jQuery Basics: A gentle introduction to what jQuery is, and what it can do.
2. Selectors: Search & walk through the DOM with selectors and traversing.
3. Manipulating the DOM: Add & remove from the DOM, more traversing, and user events.
4. Events: Listen for events, handle them, and change the default event behavior of web browsers.
5. Styling: Before landing, tame CSS with jQuery and animate elements on the page.

All of the tutorials on Html5CanvasTutorials are organized by chapters and sections and are accompanied by live demos and working code. You can use this site to learn about HTML5 Canvas for the first time, as an HTML5 Canvas reference, or as inspiration for your HTML5 Canvas projects.

The Tutorials tab contains basic and advanced HTML5 Canvas tutorials for the 2d context and Three.js tutorials for WebGL (3d context). The Labs tab contains cool HTML5 Canvas experiments and the Showcase tab contains HTML5 applications and demos from the community.

CSS3 features like transitions, animations and transforms can add extra spice to your designs.

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

Before we actually dig into details, let establish a common understating of what usability is. Usability is mostly defined as ‘ease of use’, but this is over-simplification of the art and science of Usability. In a broader sense, usability is “effectiveness, efficiency and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment.” – ISO 9241 Standard

Usability is ultimately concerned with the following factors:

• Effectiveness: Effectiveness is the completeness and accuracy with which users achieve specified goals. It is determined by looking at whether the user’s goals are met successfully and whether all work is correct.
• Efficiency: Efficiency can be described as the speed (with accuracy) in which users can complete the tasks for which they use the product. Efficiency metrics include the number of clicks or keystrokes required or the total ‘time on task’.
• Engaging: An interface is engaging if it is pleasant and satisfying to use. The visual design, graphic images, colors, use of any multimedia elements, language, font size and style, links, buttons all affect the relationship between the user and the application.
• Error Tolerant: An ideal system has no errors; and there is no ideal system. Errors are expected. An error tolerant program is designed in a way that it prevents errors in the first place and helps the user in recovering from any errors that do occur.
• Easy to Learn: Last but not the least; a ‘useable’ system is easy to learn. It allows its users to get familiar with different functions and perform them without much effort or the need of training.

Usability Guidelines

1. Design Process

• Set Primary Goals: Clearly define the primary goals of the website before starting the design process. Goals of a website may be education, information, entertainment, trade etc. Goals also determine the audience, content, look and feel and functionality.
• Set Performance Goals: Set performance goals that include the overall performance of the website in different scenarios. For example, the website will be displayed correctly in Internet Explorer 8.0 and above with screen resolution 1024×768.
• Set Preference Goals: Preference goals address end user’s satisfaction. Set preference goals such as allowing the user to view the website with small, medium and large font size.
• Create & Evaluate Prototypes: Create and evaluate prototypes in iterations. The iterative process ensures that all goals are met.

2. Design Considerations

• Establish Level of Importance: Establish a high-to-low level of importance for each category and carry this approach throughout the design. Important categories should appear higher on the page so users can locate them quickly. This is applicable to links, buttons, form fields etc.
• Reduce User’s Input: Automate as much of the site’s function as possible. Eliminate the need for users to perform tasks like performing mental calculations, making estimations, recalling account numbers and passwords, etc. This helps the user concentrate on main tasks.
• Be Consistent: Maintain consistency in page titles, font size, style, color, header, graphics, buttons, positioning, forms etc. A consistent website allows the users to get familiar with the environment and learn to retrieve information and perform tasks in less time.
• Provide Feedback: Provide appropriate feedback to inform users while they interact with the website. For example, intimate the users after they have successfully submitted any information.
• Include Logos: Differentiate your website from others by placing a logo in a consistent place on every page. This is useful when the user is browsing several websites at the same time.
• Limit Maximum Page Size: Keep Web page size at or below 30,000 bytes, which is maximum allowable time. Users do not wait long for a page to open in their browser and move on to other website.
• Limit Use of Frames: Do not use frames in websites, unless there is a strong reason to do so. Frames can be confusing and may behave unexpectedly in different context.

3. Content Organization

• Provide Useful Content: Provide useful and usable content that supports the Web site goal on each page. The content should be arranged logically and must be free from errors and ambiguity. Avoid irrelevant details.
• Use Short Sentence/Paragraph Length: Write sentences with 20 or fewer words and paragraphs with fewer than five sentences. Use lists to break up long sentences or display important points. This improves readability.
• Provide Printing Option: Many users want to keep printed copies of website for reference or taking notes. Provide printable version of all pages, files and documents on the website.

4. Title & Headlines

• Provide Page Titles: Put a descriptive and different title on each page. Title should be meaning and descriptive of the type of information the page. Meaningful title helps the user in creating and sorting bookmarks. Similarly, appropriate titles improve Page Rank on search engines.
• Use Proper Headlines: Use meaningful and descriptive headlines. A good headline is brief and clearly suggests the following text. It helps the reader quickly scan the page and understand the main theme. Headings can be used to classify information under different categories or break up long texts into small bits.

5. Page Length

• Determine Page Length: Decide length of page according to the information it contains. It is better to have short pages for home pages, navigation pages and pages that need to be quickly browsed. Use long pages for printable/downloadable versions or when you want to maintain, fewer web page files.
• Determine Scrolling vs. Paging Needs: If reading speed is important and response time is reasonably fast, use paging (linking) rather than scrolling. In this way, users will be able to move from page to page by following quick links without always scrolling to important information.

4. Page Layout

• Align Page Elements: Align text, elements, graphics etc consistently to improve readability and ‘look and feel’ of web pages.
• Reduce Unused Space: Reduce the amount of unused space on pages used for scanning and searching. On pages that are primarily links or categories, like a home page, the greater the density, the faster the scanning. “Density” is defined as the percent of the screen filled with categories and text. Density has no impact on user accuracy or preference. On content/text pages, using some white space to separate paragraphs and ideas is important.
• Format for Efficient Viewing: Determine actual utility of a web page before designing. Pages based on content do not need graphics. Similarly, pages based on graphics should not be filled with text.

5. Font Formatting

• Use Readable Font Size: Use at least 10-point familiar font style. Do not use fancy fonts unless there is a strong reason to do so. Use serif or sans serif font to achieve the best possible reading speed. Do not mix serif and sans serif fonts within the text, because it may decrease reading speed. Recommended fonts are: Times Roman, Georgia serif fonts, Helvetica, or Verdana sans serif.

6. Reading and Scanning

• Enhance Scanning: Users tend to scan, stopping only when they find something interesting. Enhance scanning by providing clear links, headings, short phrases and sentences, and short paragraphs.

7. Links

• Show Links Clearly: Hyperlinks should be clearly distinguishable from normal text. Preferably, use blue underlined text for all unused links. Do not require users to move the mouse over text to discover hyperlink. Avoid graphic link. If a graphic link is used, make sure that it is easily recognized. Usually, “click here” is used for graphic links. However, some automatic screen readers may have problems deciphering what “click here” refers to.
• Indicate Internal/External Links: Clearly indicate when a link will move users to (a) the same page, (b) a different page in the same Web site or, (c) a page on a different Web site.
• Use Descriptive Link Label: Link should be self-explanatory. User should be able to instantly guess what information in liked to the hyperlink. For example, use About Greepit instead of Company Information.
• Repeat Text Links: Ensure that the most important information can be accessed from more than one related text link. Some users find important links easily when they have a certain label, while others may recognize the link best with an alternative name.
• Present Tab Effectively: Place tabs (used for links) at the top of the page and ensure that they look like click-able.
• Show Used Links: Visited links should be clearly distinguished otherwise users repeatedly bounce among a set of pages not knowing that they are going back to the same page again and again. Make links that have not been clicked blue, and clicked links purple or red.

8. Graphics

• Use Graphics Sparingly: Excessive use of graphic increases download time of the web page. A graphic can be used only if it enhances content or leads to a better understanding of the information being presented. When using graphics, try to use small and few graphics in order to reduce download time.
• Avoid Graphics on Search Pages: Avoid use of graphics on pages that are primarily used for searching. In general, graphics do not have either a positive or a negative impact on the success of users when searching, but they take time to design, implement, and maintain and may slow downloading.

9. Search

• Provide Search Engine: Carefully consider whether there is any advantage to including a search engine. Search engines are helpful on some sites, but do not add value on others. Web sites that can benefit most from search engines are those that are large and complex.

10. Navigation

• Keep Navigation Consistent: Use consistent navigation aids such as menus, tab links etc on all pages. Common navigation type ensures that users can locate and remember frequently used links and explore the website easily. Prefer text-based navigation aids to graphic based aids.Group navigation elements in close proximity and place them with the right margin for the web page. Users may need to scroll to navigation elements, if they are placed with left margin.

11. Hardware and Software

• Consider Connection Speed: Design for connection speeds of 56 kilobytes per second (kbps). Remember that actual connection speed is about 38% lower than modem speed capability. This means that users with a 56 kbps connection actually have a connection averaging about 35 kbps.
• Reduce Download Time: Create web pages that load quickly. Slow download times may result from too many graphics, unnecessary use of applets and slow server performance. Average wait-time is 8.6 seconds.
• Consider Monitor Size & Resolution: For best results, design for computers with 17-inch monitors and screen resolutions of 1024×768 pixels.