Design>Web Design>Software

Seven Website Mockup Tools

I am working on a number of website projects right now. My mission is to banish ‘lorem ipsum’ by working text into page designs before development starts. I wanted to find a tool that would let me create page mockups quickly and try out different combinations of copy and layout. Eventually, I settled on Balsamiq Mockups, which is an awesome tool. The rest of this article describes the different alternatives I considered and concludes with a detailed review of Balsamiq.

The Pencil Project

The Pencil Project's unique mission is to build a free and open-source tool for making diagrams and GUI prototyping that everyone can use.

CSS Layout Generator

This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

Grid Designer 2

This web-based service will develop a CSS file (with appropriate resets) for a multi-column web design to suit your preferences.

How to Make Accessible Web Content Using Dreamweaver

Dreamweaver allows developers to be prompted when inserting certain web elements that may need accessibility attributes added to them. Unfortunately, these options are disabled in the preferences by default.ImportantBy default, the accessibility options are disabled in Dreamweaver MX. Once selected, Dreamweaver will display a prompt for accessibility features when each of the identified elements are inserted into a document.

How to Make Accessible Web Content Using FrontPage

When designing with FrontPage, some basic accessibility features must be added manually. Despite some of these shortcomings, it is definitely possible to create accessible web pages in FrontPage, often without leaving the WYSIWYG environment.

Introduction to Django: Helping Perfectionists With Deadlines

Django is an open-source Web framework, written in Python, that allows you to easily and rapidly develop interactive, data-centric web applications. It came into being when two Web developers—Adrian Holovaty and Simon Willison—in Kansas, after moving their newspaper’s website from PHP to Python, found themselves repeatedly solving similar problems. They decided to extract the common functionality and released the resulting framework in 2005.

Exploiting Web Tools to Make HTML Documents Accessible

More accessible documents through authoring tool supports. Exploit mainstream tools for easier information retrieval and document manipulation.

Conditional-CSS

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

Subversion for Designers

There’s no question that developers need version control when working on an app. But what about designers? In this article Chris Nagele, founder of Beanstalk, talks about the benefits and basics of Subversion for designers.

How to Select Your Web Conferencing Tool

New conferencing and collaboration solutions are being announced at the pace of one or more tools per week. New versions and upgrades are promoted even more frequently, and in this avalanche of "this is the best, don't look anywhere else" claims, it is hard to distinguish the good from the average. How should you select your web conferencing tool? Which companies are more reliable and how do you find out? How can you be sure you will not be disappointed? These are tough questions to answer, as there are a million vendors out there and an army of supposed experts all claiming to have the best solution while offering different ones.

Dreamweaver Tutorial

Defining a site is one of the more complicated procedures in Dreamweaver, so do not attempt this process unless you have some time, patience, and knowledge of how to transfer files to your server space.

The Stomper Scrutinizer: Web Browser w/Visual Simulation

The Stomper Scrutinizer is a webkit based browser that includes a simulation of human foveal and peripheral vision. By providing a realistic distortion of non-focused page content, the Scrutinizer reveals the perceptability of design features. It is also useful for conducting usability tests, design reviews, and has a number of features (including screenshots) for talking about design.

Web Indexing: Extending the Functionality of HTML Indexer

HTML Indexer is a commercial stand-alone indexing tool that is designed solely for the indexing of web sites. This article shows how to extend the functionality of HTML Indexer by including special codes in the entries, then post-processing the generated HTML to obtain final HTML.

Make Your PDFs Work Well with Google (and Other Search Engines)

In Google's search results, and in the results of most other search engines, the listings of most PDF files appear at best unprofessional, and at worst, downright embarrassing.

Lock Down that Layout!

Dreamweaver's Layers let you position images, text, movies and more with the same drag-and-drop ease print designers enjoy. Here's how to use them.

Dreamweaver 8 Tutorial

Whether you're creating a personal page for your family, a school or classroom web site, or one for your small business, Dreamweaver is a powerful tool that will help get the job done. Each Dreamweaver tutorial features text and screen shots, and some include narrated multimedia tutorials in Flash.

Style Master CSS Tutorial

This tutorial teaches CSS using both hand-coding and Style Master for Windows. You can also follow it using instructions for Style Master for Mac OS X. By working through the exercises you will learn all about CSS for text styling and page appearance including layout, and create a stylish looking page like this. If you want to learn CSS by hand-coding alone, simply work through all the exercises and code examples and skip all the specially styled Style Master instructions.

Web-Based Alternatives to PowerPoint

Presentation software has been stuck in neutral forever. Web applications, however, are firing on all cylinders. Some say Word and Excel are about to be Web 2.0 roadkill. Not me. The browser can’t yet substitute for those applications. But for PowerPoint? Any day now.

Precisely Positioning DIV Tags in Your Page From Design View

Not everybody likes working in code view, indeed I would guess that many folks purchase Dreamweaver just so they don't have to work in code view. In this article we will look at how you can insert DIV tags into your code, precisely. We will do this from Dreamweaver's design view by making good use of the insert div tag function that can be found on the insert bar.

Web Accessibility Evaluation Tools: Overview

Web accessibility evaluation tools are software programs or online services that help determine if a Web site meets accessibility guidelines. While Web accessibility evaluation tools can significantly reduce the time and effort to evaluate Web sites, no tool can automatically determine the accessibility of Web sites.

Flash: Friend or Foe?

Macromedia Flash is spreading rapidly across the Internet and many web designers and developers believe Flash, as it is commonly called, is the future of Internet design. The use of Flash includes moving graphics, sounds, motion, and interactivity. These are great from a graphics standpoint although the areas most important to web surfers are content, speed and simple navigation. Of course, Flash has its benefits it has its drawbacks as well and an evaluation of both the pros and cons of Macromedia Flash will help you determine whether Flash is your website's friend or foe.

To Dream, Weave, or Read The Front Page?

What You See Is What You Get Editors (referred to as WYSIWYG editors from here after) are programs that have been written specifically to aid in the development of Websites and their components, I say components as in this day and age database management and script setup have major parts to play within the editors. In the next ten minutes you will realise that WYSIWYG editors are not the way to go.

Word to xHTML Revisited

It's ironic that the process of exporting a document from Word to HTML would have the effect of breaking the web page in Internet Explorer only. It's also pretty darned annoying.

Cleaning Your Web Pages with HTML Tidy

A detailed article on using the HTML Tidy utility to clear up problems in an HTML file.

Web Accessibility Toolbar

The accessibility toolbar is to aid the manual process in validating web sites. Developed by AIS and provided in Europe and the UK by Southbourne Internet Ltd.

HTML Conversion Tools: The Good, The Bad, The Ugly

The documentation conversion tool market is relatively new, but several vendors have established reputations in the market.

Site Building With Dreamweaver's Power Tools: Templates

Templates are a core tool in Dreamweaver--and one that's gaining in importance and use. Many designers employ templates at the most basic level to ramp up their production efforts; however, an equal number of designers now avoid them because incorrect setup and application left a bad taste. The benefits of templates far outweigh the time required to master them and it's definitely worth understanding how to do them right.

Create a Fun Section Divider

How to create interesting graphical dividers in Adobe GoLive to use in web designs.

Jazzing Up Your Links

You can take what you learn here to create as many different looks as you’d like for the links on your pages.

Object-Oriented ActionScript

Ironically, Flash users who are new to object-oriented programming (OOP) are often familiar with many object-oriented concepts without knowing their formal names. This chapter demystifies some of the terminology and brings newer programmers up to speed on key OOP concepts. It also serves as a high-level overview of OOP in Flash for experienced programmers who are making their first foray into Flash development.

How to Link from an HTML Page to a Specific Page in PDF File

HTML pages can contain links to PDF files that enable you to view the files by using an Adobe Acrobat 4.0-or-later product from within Netscape Navigator or Microsoft Internet Explorer. You can also view the files by using the Acrobat product as a helper application in which PDF files appear in a separate Acrobat window. By default, the PDF file opens to the first page. To open the PDF file to a specific page, you can use named destinations in the PDF file. You can also target an HTML link to a specific PDF page by adding the page number to the end of the URL in the link. When you target an HTML link to a specific PDF page, however, the link works only when you view the PDF file within the browser.

Consistent Web Design with Dreamweaver Templates

Templates are a fantastic time-saving tool. They allow you to create pages that share the same design but contain different content. If you modify a template document, you immediately update the design of all pages that were created from that template.

Flash Design: Does It Really Deliver What Is Promised?

Flash design? Is it all it's cracked up to be? In this article, we'll be confronting all the questions head on: What is Flash? What's good about it? What's bad about it? And, most importantly, what will it do for your online business?

Flash: 99% Good

This site is for Flash designers who want to skip the piss and vinegar of the so called 'usability' experts and get right to the solutions for your Flash usability problems. Named in response to Jakob Neilsen's influential 2000 article Flash: 99% Bad.

GoLive: The Interaction Designer's Hammer and Nail

In web development projects, HTML based prototypes have some advantages when it comes to usability testing. In this article we'll take a look at the HTML editor Adobe GoLive, which has a number of features that makes it a decent prototyping tool.

Dreamweaver MX: Insert an Accessible Table

Dreamweaver can create accessible Web content for users who have impairments. The Insert Accessible Table feature creates accessible table content for users who use a screen reader to experience the Web. Dreamweaver supports JAWS for Windows, from Freedom Scientific, and Window Eyes screen readers, from GW Micro.

Dreamweaver MX: Site Cloaking

Use site cloaking to prevent certain files and folders from being uploaded or downloaded.

HTML Conversion Tools: The Good, The Bad, and The Ugly

The Internet has taken the world by storm. It is now one of the most widely used sources of information available. Every day high-technology companies are finding new ways to use the Internet for advancement in their fields. Though getting a perfect conversion without added steps is the dream for all writers, this is not possible. HTML Conversion tools such as HTML Transit 2.0, Web Publisher 1.1, and FrontPage can help decrease the time needed to make great looking paper documents into great looking web pages. The tool a company chooses should be based on its needs, budget, and the time allowed for tweaking.

Converting FrameMaker to HTML

Many FrameMaker users need to publish their documents on the World Wide Web. The best approach is to use a converter, which preserves the format and organization of the original FrameMaker document. Good converters can handle long, complex documents that contain elements such as table of contents, index, line drawings, bitmap graphics, tables, footnotes, and equations. We discuss the benefits of having a single source document for paper and Web, the techniques for creating documents that can be converted easily, and the powerful conversion tools available today.

MSWeb: An Enterprise Intranet #1

We're pleased to bring you the first of two excerpts from upcoming second editon of 'Information Architecture for the World Wide Web.' The excerpts look at MSWeb, which the authors say provides a glimpse of what most intranets will be doing in three to five years.

Results From a Survey of Web Prototyping Tools Usage

In June 2002 GUUUI conducted a survey on web prototyping tools usage. The purpose of the survey was to find out what tools are used for prototyping, what requirements interaction designers have for their tools, and how happy they are with the tools they are using. This article presents the results of this survey.

Designing Better HTML Authoring Tools

A collection of proposed new tools and features for adding structure to the Web.

Using Opera to Check for Accessibility

There are a lot of tools available to check your Web content for accessibility. Some tools are Web-based (such as WAVE 3.0). Other tools are stand-alone software products that you install on your hard drive. One tool that you may have overlooked is the Opera Web browser. Opera is not an accessibility validator—it's a Web browser—but it can act like an accessibility validator if you know how to use it that way. In fact, it's one of the best available. This article explains why.

Una Perspectiva Global de Flash

Salta a la vista que Flash en la web tiene muchos problemas de usabilidad y accesibilidad pero hay que juzgarlo por lo que es, y no por el buen o mal uso que se hace de él. Antes de poner mala cara ante todo lo que huele a Flash, como hacen muchos desarrolladores, hay que ver la herramienta desde un punto de vista global, con más perspectiva.

The Creative Toolbox: Packing Up InDesign Layouts for GoLive Pages

With the Creative Suite, Adobe application integration has never been tighter, especially between InDesign CS and GoLive CS. See how you can turn an InDesign layout into a GoLive Web site in a few steps.

Designer's Cafe

A page with links to facilitate users who build website with Macromedia Dreamweaver and Flash.

Acrobat 6 Pro, a New Forms Layout Tool?

I was recently asked by my employer to do some research on various form designer packages to see what they had to offer. Right around that time Acrobat 6 was released, but to consider it a fully featured forms 'layout' tool was the last thing on my mind. Little did I know that I would soon change my mind. After working with Acrobat 6 Pro for a while and getting to know all the new and useful tools it has, it gradually started to dawn on me that it offers form design and layout capabilities that one could only dream about with the previous versions of Acrobat.

Inside "Skip Intro": An Author Interview

Flash has been in the news quite a bit these days, partly because of the current release and partly because of the ongoing fallout over the Jakob Nielsen article (Flash: 99% Bad). Even Macromedia has gotten into the act, working with Nielsen to improve the face of Flash and the challenge of usability. 'What Nielsen said, apart from the sensationalistic nature of the headline, was bang-on,' said Duncan McAlester, co-author of ‘Skip Intro.’ 'Flash, for the most part, had been used in a very poor manner up until that time (and still is in many cases).'

Repent from Flash Sins

If I see another goofy Flash interface I am going to scream. Please do not take my prior statement as rejection of everything Flash. I love Flash. I think Macromedia Flash is a wonderful tool with wonderful potential. But along the way, we have a lot of learning to do.

Sizing PDFs for Posting Online

What is the preferred maximum target file size for PDFs that will be accessed online by average users?

Kinetic Energy

Spaceships flying across your Web page? With dhtml and GoLive, you can make anything move.

DENIM, del Lápiz a la Web

El diseño de sitios web suele empezar con bosquejos hechos con papel y lápiz. Denim convierte directamente los diagramas que salen de una tableta gráfica o del dibujo con el ratón en prototipos de sitios web funcionales.

Dreamweaver Primer

So, you’ve read the article, 'HTML Wireframes and Prototypes: All Gain and No Pain' and now want you want to make an HTML wireframe or prototype. This an easy and pain-free process, using Macromedia Dreamweaver 4.0. Follow this step-by-step guide and you'll be up and prototyping in a jiffy.

Help! Tips for Working in Dreamweaver MX

Before starting work in Dreamweaver, sketch out basic screen layouts, a site map, and a system of navigation. Knowing everything you want to include and how you want it to look before starting to build your site will save time and frustration.

Add Interactivity With Rollovers

Want to spice up your Web pages with rollovers? Learn how to use GoLive CS to create two types of rollovers.

Create Queries and Dynamically Update Collections

Use GoLive’s new query functionality to simplify complex file management chores by creating queries and attaching them to collections.

Create Web Sites That Others Can Easily Update

You can use the Co-Author feature of Adobe® GoLive® CS to create sections of a Web site that others can update quickly and easily. You specify the layout and format of the content while other people (the co-authors) provide the actual content, update it, and even publish the revised Web pages.

Source Code Made Easy

The new source code features in Adobe® GoLive® CSmake it easy to enhance the appearance of source code and specific HTML elements.

Adobe Dreamweaver

A collection of dozens of Dreamweaver resources and tutorials.

Macromedia Dreamweaver Tips

Tips and tricks for using Macromedia Dreamwaver - all versions. Get the most out of Dreamweaver with extensions, tools, and other tips.

CSSCheck

Enter the URL of a Cascading Style Sheet, or enter your style sheet directly. CSSCheck is primarily a CSS1 checker.

ActionExt

A resource with links to Actions and Extensions for Adobe GoLive.

Creating Time-Triggered Events

In this column, we'll show you how to add GoLive Actions to the Timeline, enabling things to happen at specified intervals within the Scene's playback.

So Many Tools — So Little Time: Selecting the Right Online Tool

There is a systematic and methodical approach to picking an online authoring tool. First, define the online requirements. Once this is done, match the available online technology to your online requirements. Finally, prototype using a number of different tools.

ActionScript.org

A collection of resources for writing ActionScript programs within your Macromedia Flash projects.

Flashgeek

The home for Rick Turoczy's Flash and Powerpoint tutorials.

Macromedia Flash Resources

Resources for beginner, intermediate, and advanced Macromedia Flash developers. Learn about the tools and features, plus techniques for animation, interactivity, application design, drawing techniques, and more. Find free vector clip art, audio files, sound loops, FLA source files, and add-ons.

OpenSWF

OpenSWF.org is the source for information on the Flash File Format. Here you will find file format specifications, sample code, links to 3rd party tools and more.

Serving Up Web-Friendly Animations in a Flash: Macromedia Flash Basics

You've undoubtedly heard of Macromedia's Director and have oohed and ahhed over Shockwave movies on the web after, of course, they finally finished downloading. Flash, however, may be less familiar. The May release of Macromedia Flash 2, formerly FutureSplash, marked a new phase in web animation -- one that streams. Working with Flash will enable you to create sophisticated frame by frame animations that stream and include sound. Flash movies require a plug-in; however, you can export your final flash files in one of 12 other formats, including GIF89. So if you're of the anti-plugin crowd, don't hit your back button yet. Besides, if you're relatively sure your audience is using a 'new' browser, then they'll likely have the Shockwave plug-in built in (once both browsers 4.0 are out, that is).

SWFnews

A site with news about new products and techniques for Flash development.

Will Macromedia's Flash Plans Cripple the Web?

Macromedia's Flash-everywhere approach brings new innovations to Web design but carries hidden potential liabilities that could negate its benefits.

A Standards-Compliant Publishing Tool for the Rest of Us?

Publishing with web standards is not for experts alone. A new tool hopes to make it easier for anyone. ALA interviews Six Apart’s Anil Dash about what might be the first standards-compliant web publishing tool for the rest of us.

Auditing Software Tools for SENDA Compliance

This project has identified a number of tools that may be of use to the academic community. The starting point of this investigation was the W3C WAI web page that lists existing evaluation, repair, and transformation tools for Web Content Accessibility.

The Speechlet Project

Speechlet is a system which allows blind students of the Java programming language to use existing course material. Most Java courses use program examples that generate graphic output. The main reason for this is that students enjoy writing programs that produce interesting and exciting outputs. However, a blind student is unable to see the output of their program and is unable to even gauge that their program has worked. Speechlet was therefore produced to allow a blind student to move the mouse pointer over the screen and hear a spoken description of what is there. This paper discusses the reasons for the development of Speechlet, followed by a description of its operation and finally a discussion of its use in practise.

The UsableNet (LIFT) On-line Web Accessibility Tool

TechDis and UsableNet are working together to bring you this FREE online web accessibility evaluation tool. The tool automates many of the 'Technical Accessibility' requirements for your web pages.

User Style Sheet Wizard

This is a simple 'wizard tool' to create a User Style Sheet. These can be extremely useful for students with visual impairments, scotopic senstivity or visual processing difficulties such as some forms of dyslexia. User Style Sheets are a client-side application of Cascading Style Sheets (CSS), they can be used to overide the presentation of HTML based web pages. They can be extremely powerful in enforcing the way in which the user desires a web page to be presented. You can set option of text font, size and colour. The font colour of hyperlinks etc. The user style sheets can be used in Internet Explorer, Opera and Mozilla.

WebWorks Publisher 6 Tips and Tricks

A presentation covering some techniques for using WebWork Publisher to produce online versions of FrameMaker documentation.

WebWorks Publisher Resources

This is a page with links to various resources for WebWorks Publisher users. WebWorks Publisher is a 'best of breed' solution for single source publishing with Adobe FrameMaker. Using WebWorks Publisher, you can convert FrameMaker documents to a wide variety of online formats, including Web formats (HTML, HTML + CSS, XML, XML + CSS, XML + XSL), as well as online Help formats (WinHelp, HTML Help, JavaHelp, and WebWorks Help).

Software for Building a Full-Featured Discipline-Based Web Portal

The University of Wisconsin-Madison's Internet Scout Project [1] received funding in the fall of 2000 from the Andrew W. Mellon Foundation [2] to build an open source software package that would allow collection developers to share their collection's metadata via the web. The resulting software, the Scout Portal Toolkit (SPT), is virtually turnkey, very inexpensive to maintain and operate, and easy for non-technical staff to download, set up and populate with metadata. Conforming to international standards for metadata, data harvesting, and Web technology makes SPT useful for and usable by a wide variety of projects and organizations, allowing and encouraging collaboration and record sharing among projects. Over the SPT project's two-year period, beta testers and in-house quality assurance testing provided valuable feedback, helping to ensure that the software was robust, easy to use, and well-suited to the needs of the intended audience.

HTML Editing Tools Come of Age

Compares and contrasts three HTML editing tools: Macromedia Dreamweaver, Microsoft FrontPage, and Adobe GoLive.

Creating Forms From Scratch

Starting with a scan is honestly not the very best. The new forms designer from Amgraf is a power tool and gives you many good features. If you have to edit the base scan, your best bet is indeed to recreate it. You might try Adobe Illustrator, or Deneba's Canvas 8 helping you. Another possibility might be OmniForm by ScanSoft. You also might look at the new tool from Adobe's Capture suite, also known as Tea Party, which might help a bit as well.

Adobe GoLive 5.0

Wallia reviews the latest Adobe Web-authoring software.

Large-Scale HTML Conversion Using a Word Processor

The authors describe a process for converting Microsoft Word documents to HTML.

The Trellix 1.0 Development Project

An overview of the history of the project that helped us come up with the ideas presented in Good Documents.

Converting FrameMaker to HTML

How to Use FrontPage to Design a Corporate Intranet

Microsoft FrontPage is used extensively in small and medium-sized companies to create both Intranet and Internet Web sites, even though professional Web designers turn up their noses at it. This article reviews some of the factors that led to its widespread usage, and gives some pointers to non-professional webmistresses.

A FrontPage Tutorial

When it comes to Web authoring tools, none is as simple to use at Microsoft FrontPage. With its generous amount of wizards and it's library of templates and images, it's a beginner's dream. You won't need a large staff to create a site that's both useful and professional.