Grayscreen Prototypes: The Secret Sauce

Grayscreen Prototypes: The Secret Sauce

Effective web development

This is especially true in web development. Sitemaps and wireframes more often create illusions of communication than resolve them. That's because they cannot demonstrate subtle aspects of a site's content, structure, and functionality, which can only be understood through the experience of clicking.


Grayscreen Prototyping video by Newfangled Web Factory

In contrast, grayscreen prototypes do effectively communicate a site's content, structure, and functionality before design and development begin. Building a thorough and detailed prototype is the key to a successful website development project.



Effective web development

This is especially true in web development. Sitemaps and wireframes more often create illusions of communication than resolve them. That's because they cannot demonstrate subtle aspects of a site's content, structure, and functionality, which can only be understood through the experience of clicking.

In contrast, grayscreen prototypes do effectively communicate a site's content, structure, and functionality before design and development begin. Building a thorough and detailed prototype is the key to a successful website development project.
Read more!

7 Incredibly Useful Tools for Evaluating a Web Design

n effective web design is one in which your users are able to find information quickly and in a logical fashion.

Do they visit the content you want them to visit? Are they looking in the right places of your web page? Are you able to keep your user’s attention, or do they just leave quickly?

It’s not just about the content either. If your design loads slowly - or if moving from one section to another takes a long time - it affects the user’s experience.


7 Incredibly Useful Tools for Evaluating a Web Design

An effective web design is one in which your users are able to find information quickly and in a logical fashion.

Do they visit the content you want them to visit? Are they looking in the right places of your web page? Are you able to keep your user’s attention, or do they just leave quickly?

It’s not just about the content either. If your design loads slowly - or if moving from one section to another takes a long time - it affects the user’s experience.

These things can be the make-or-break factors between a user clicking on a link to find more information, or the back button to find it elsewhere.


Some things to consider:
Are important information being seen by the user?
Are the navigation and action items intuitive?
Is the user being directed to sections in a logical manner?
Does the web page load quickly enough to not turn away the user?
If you’re interested in analyzing and optimizing your page layout - here’s some extremely useful tools that you can use to help.


Read more!

Building a site with web standards

Building a site with web standards

Why and How to use Web Standards?

1. What are web standards?
“Web standards are intended to be a common base… a foundation for the world wide web so that browsers and other software understand the same basic vocabulary“.
Eric Meyer



Who sets the webstandards?
The World Wide Web Consortium (W3C) and other standards bodies have established technologies for creating and interpreting web-based content. These ‘web standards’ are carefully designed to:

deliver the greatest benefits to the greatest number of web users
ensure the long-term viability of any web document
simplify code and lower the cost of production
deliver sites that are accessible to more people and more types of Internet devices
continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market

2. The web standards
Structural Languages
Extensible Hypertext Markup Language (XHTML) 1.0
XHTML 1.1
Extensible Markup Language (XML) 1.0
Presentation Languages
Cascading Style Sheets (CSS) Level 1
CSS Level 2
CSS Level 3
Object Models
Document Object Model (DOM) Level 1 (Core)
DOM Level 2
Scripting Languages
ECMAScript 262 (the standard version of JavaScript)
Additional Presentation Languages (Markup)
Mathematical Markup Language (MathML) 1.01
MathML 2.0
Scalable Vector Graphics (SVG) 1.0

3. What are the benefits of using web standards?
Benefits for you:
Less code means sites are easier to maintain
Less browser specific coding - compatible with current browsers
Less revisiting of old sites - compatible with future browsers

Benefits for your audience:
Less code means sites are faster downloads
More accessible - will work in a wider variety of user agents

4. What do standards mean to web developers?
Web designers and developers should be aim to build sites that use:

Semantic markup
Valid code
Accessible code
Separation of style from content

5. Semantic code
Semantic code uses html elements for their given purpose. Well structured HTML will have semantic meaning for a wide range of users and user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)

In simple terms, this means:

for headings, use heading elements starting with h2
for paragraphs of text, use a paragraph element
for lists, use a list item element
You should use standard HTML elements for your markup and avoid styling HTML elements to look like other HTML elements. For example, avoid styling

elements to look like headings.

6. Why use valid code?
Valid code will render faster than code with errors.
Valid code will render better than invalid code.
Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML

7. How do you make your code valid?
Start with the right doctype
Be aware of doctype modes (standards compliant, quirks mode etc)
Use a character set
Close HTML elements
Use alt tags for images
Avoid HTML hacks
Use HTML validators regularly
Fix any bugs you find before you go live
Make validation part of your normal work process

8. What is accessible code?
Allows your site to be accessible to a larger audience (vision impaired, motor skill impaired, cognitive impaired)
Allows your site to be accessed by wider range of devices (hand helds, screen readers, text browsers, search engines)
Is a requirement for Federal and State Government sites

9. How do you make your code accessible?
Provide text equivalent for non-text elements
Use accessible data tables (identify row and column headers)
Use accessible forms (label for, id, fieldset, legend)
Use markup rather than images to convey information.
Provide visible skip menus
Provide access keys
Use style sheets with relative units to control layout and presentation
Make sure documents can be read without style sheets
Provide metadata to add semantic information
10. Separating style from content
Easier to make site-wide changes - one css file rather than all pages
Smaller files/faster download - less code on the page
Less code on the page - easier to code
Allows users to customise to their own needs - style switchers
More control over code - can deliver code in preferred order for screen readers
Files are more accessible to a wider variety of mediums - separate css files for other devices

11. How do you separate style from content?
Decide on a browser support level and code methodology
If full CSS is the chosen methodology, decide on a CSS positioning method
Place content into containing boxes
Use CSS positioning to control layout of containing boxes
Use CSS to control the visual appearance of all html elements
Test on a wide variety of browsers at each stage

Read more!

Front End Developer ( who is ..)

Front End Developer ( who is ..)

You have been working with (X)HTML and CSS for anywhere from 1-4 years. You prefer front end development because you're creative and visual and have a good eye for design. You write standards-compliant / semantic (X)HTML and CSS without Googling the syntax or using WYSIWYG editors.

You understand the difference between standards mode and quirks mode. You know what the box model hack is and what versions of IE it works for. You may love Firebug because it saves your life or you are so good you don't need it. You can use Gimp, Fireworks or Photoshop to cut up images and are handy with designing an icon or two in a pinch.

You are not uncomfortable working in the context of a complex Java web application even if you don't understand its intricacies. You won't get scared off by scripting markup like Velocity or JQuery showing up in the code here and there.

You are a self starter who loves working with technology and you stay up late putting the finishing touches on your code. You don't need to be told what to do to see what needs to get done. You are excited about working with a leading open source software company with cutting-edge opportunities at Fortune 500 companies around the world.

Read more!

Printing the Web: Solutions and Techniques

Printing the Web: Solutions and Techniques

Users don’t read, they scan. In fact, after many years, reading online still didn’t manage to assert itself against reading offline. Therefore long articles are usually printed out and read on paper. However, not every page will be printed out correctly by default - sometimes layout doesn’t fit, sometimes font size isn’t chosen properly or leading simply isn’t big enough. It is also important to include some further references to the printed version of the page, so users can get back to you, once they’ve read the printed version of your article.
Good news: web-developers can control the way web-site looks on the paper.To make sure that no data will lost and the legibility of content remains optimal after the printing, you can, of course, use CSS.
There are many options and techniques you can use developing print layouts. Here is a quick overview of some interesting solutions you can use to generate print layouts “on the fly”.
Printing the Web: CSS-Techniques
Five Simple Steps to Typesetting on the web: Printing the webMike Boulton gives an example on how to design a nice print layout, which looks like print layout in traditional magazines.
Footnote Links: Improving Link Display for PrintAaron Gustafson presents a CSS+JavaScript-based method, which replaces all links on a page with corresponding footnotes. Elegant and extremely (!) useful solution.
10 Minutes to Printer-Friendly PagePrint-layouts can be generated with PHP. Marko Dugonjic shows, how.
From Screen to Print: Creating a Print CSS in DreamweaverThis article will examine how our layout displays one set of elements on the screen, yet when printed, prints a different layout using elements that do not display on screen.You’ll learn about media types and how to take advantage of them and using the cascade to create lightweight, compact pages for print. Since Community MX constantly tweaks its site, some things may be slightly different if you read this article a few months from its publishing date.
A Print CSS PrimerA detailted introduction and tutorial by Kenji Ross.
Print DifferentQuite an old article by Eric Mayer, in which he describes different media types you should consider designing print layouts.
ALA’s New Print StylesEric Meyer about A List Apart Print-Layout. The article is a “follow-up” of the article CSS Design: Going to Print, which was published in ALA 2002.”Say no to “printer-friendly” versions and yes to printer-specific style sheets. CSS expert Eric Meyer shows how to conceive and design print style sheets that automatically format web content for off-screen delivery. Includes tips on hiding inappropriate content, styling text for the printer, and displaying the URL of every link on the page.”
CSS Styling for Print and Other MediaIan Lloyd about the media-attribute and development of user-friendly print layouts.”There are many different media types that you can apply to CSS, some of which are more useful than others, and they let you specify the look, feel, or sound of the web page that is linked to the CSS files. In this section, we’ll look at the various media types that are available.”
Complete CSS Guide: PrintingIn CSS2, the page properties are defined by the @page rule, while several new properties help control page breaking. John Allsopp explains in detail, which guidelines you should keep in mind designing print layouts and how you use @page-rules such as page-break-before, Widows, Orphans etc. efficiently.
Printing The WebJames Kalbach describes common mistakes and discusses important aspects of print layouts regarding usability.”Consider how users interact with other formats and media, particularly paper, and address the reality that people print web pages. With a little planning and foresight creating printable pages is relatively easy and extends a positive user experience to paper.”
Dive Into Mark Print-friendly Linksworks just the way Footnote Links work, but also adds the URLs of Links in the brackets after the links.
Print-Friendly CSS and UsabilityRoger Johansson discusses, whether print layouts, which are different from the page structure, are user-friendly. Themaninblue’s post on the same topic.
Print to PreviewPete McVicar’s JavaScript creates a preview page with a warning message users can use to navigate back to the original page.
Printing Web documents and CSSJim Wilkinson explains, what print layouts should have, (e.g. the URL of the original web-page), which elements should be removed (e.g. navigation) and what how you should handle links, footers and headers. Also problems in different browsers are taken into consideration.”This document describes some of the issues concerning the use of CSS to reformat Web documents for printing (using the media type “print”). We also discuss those aspects that CSS is not able to control or even influence. We assume a good knowledge of CSS and concentrate on practical issues, given the current deficiencies in browsers in implementing print-related CSS.”
Read more!

Web Design Basics

Web Design Basics

Guide to Web Design / HTML
Web design uses all the same elements as print design. You need to explore the space and layout, handle fonts and colors, and put it all together in a format that puts your message across. These resources will help you learn Web design whether you are already a professional Web developer or just getting started in the Web arena.
Elements of Good Design
Fonts and Typography
How to Use Color
Graphics and Images
Web Layout Basics
Tackling Web Navigation
Accessibility and Usability
Web Design Software
Elements of Good Design Read more!