Web Site Workflow – Part 1
I have busy designing a new site lately. While doing this I thought it would be interesting to document my work flow. As always this is in note form giving you a general overview of what to do. If you require more detail on any stage then please comment and I will answer.
Part 1 – Preparation
(1) Discuss the requirement with client
(2) Submit a design document to the client for them to fill out.
(3) On your PC create the file structure for the new site. (see Photo)
(3) Based on discussions and the returned Web design document, create the fluid “Site Design Document”. This is a design document detailing all information concerning the site. It acts as the top document and is issues and updated as required through out the development of the site.
(4) Using Adobe Fireworks design a mockup of the home page and submit it to the client for approval.
(5) Once approved Edit the Fireworks design to reflect the accurate final mockup. Attention to slicing, positioning, colours and text must be given such that its components (slices) can be utilised in the final site. Slicing must be appropite for final site assets (make sure images are named and optimised. (see Photo)
(6) Export individual slices to the sites image folder ready for use in Dreamweaver.
(7) Sketch a layout diagram of layout slices and text areas. Note the areas sizes. This will help when you start creating the layout Div’s in Dreamweaver.
You now have the web design layout designed and approved. The graphic elements have been sliced up and imported in to the sites image file ready for uploading.
Exporting Web Site Mock ups
HTML Export
This creates an html prototype for displaying as a web site.
- Slice the images only
- Make sure all pages are named and button links entered (home.html)
- Select File/Export/Html and images (export slices, include areas without slices, put images in subfolder, all others unticked).
Default HTML settings can be set in File/HTML Setup
CSS Export
This creates an CSS prototype for displaying as a web site.
- Slice the images only (Right click on image and select insert rectangle splice)
- Foreground slices are images which dictates layout flow.
- Background slices are images for background.
- File/Export/CSS and Images (set up options)
PDF Export
This creates a PDF document of your design.
- Name each page.
- File/Export (adobe pdf).
- Setup the options like allowing commentating
Exporting an area
- Select the export area tool from the side panel
- Select your area by dragging and then double clicking inside.
- Adjust the export properties
Another method is File/Image Profile. This brings up the export pop up dialogue.
Choosing Export Settings
- Open your image or Photo
- Zoom out and select 4 up
- Change settings in each view to show comparisons for different export settings.
Kuler Colour Scheme Picker
Fantastic colour scheme picker for programs like Photoshop and Dreamweaver. Allows users to upload and download schemes and select from a huge database.
Web page meta tags
META Tags can be used for excluding content from search engine crawlers. It is also used when you cannot upload a robots.txt file. Its purpose is to keep content out of search engine indexes. They should be added between the HEAD section of your page(s) in question:
(no)index determines whether the crawler should index this page.
Possible values: “noindex” or “index”
(no)follow determines whether the crawler should follow links on this page and crawl them. Possible values: “nofollow” and “follow.”
Here are a few examples:
1) This disallows both indexing and following of links by a crawler on that specific page:
<meta name=”robots” content=”noindex,nofollow” />
2) This disallows indexing of the page, but lets the crawler go on and follow/crawl links contained within it:
<meta name=”robots” content=”noindex,follow” />
3) This allows indexing of the page, but instructs the crawler to not crawl links contained within it:
<meta name=”robots” content=”index,nofollow” />
4) Finally, there is a shorthand way of declaring 1) above (don’t index nor follow links on page):
<meta name=”robots” content=”none”>
If this meta tag is missing, or if there is no content, or the robot terms are not specified, then the robot terms will be assumed to be “index, follow” (e.g. “all”). If the keyword all is found in the robots terms list it overrides all other values. That is, a robots terms that is “nofollow, all, noindex, nofollow”, would effectively be “all”.
High google ranking
The German company Sistrix analyzed the web page elements of top ranked pages in Google to find out which elements lead to high Google rankings. They analyzed 10,000 random keywords, and for every keyword, they analyzed the top 100 Google search results.
Sistrix analyzed the influence of the following web page elements: web page title, web page body, headline tags, bold and strong tags, image file names, images alt text, domain name, path, parameters, file size, inbound links and PageRank. Keywords in the title tag seem to be important for high rankings on Google. It is also important that the targeted keywords are mentioned in the body tag, although the title tag seems to be more important.
Keywords in H2-H6 headline tags seem to have an influence on the rankings while keywords in H1 headline tags dont seem to have an effect.
Using keywords in bold or strong tags seems to have a slight effect on the top rankings. Web pages that used the keywords in image file names often had higher rankings. The same seems to be true for keywords in image alt attributes.
Websites that use the targeted keyword in the domain name often had high rankings. It might be that these sites get many inbound links with the domain name as the link text.
Keywords in the file path dont seem to have a positive effect on the Google rankings of the analyzed web sites. Web pages that use very few parameters in the URL (?id=123, etc.) or no parameters at all tend to get higher rankings than URLs that contain many parameters.
The file size doesnt seem to influence the ranking of a web page on Google although smaller sites tend to have slightly higher rankings.
Its no surprise that the number of inbound links and the PageRank had a large influence on the page rankings on Google. The top result on Google has usually about four times as many links as result number 11.
MacMost Podcasts
Welcome to MacMost: The site that helps you get the most out of your Mac, iPod Apple TV and iPhone!
http://http://macmost.com/tutorials/
Adobe TV
Learn how to use Adobe® Creative Suite 4 with video tutorials selected by experts at Adobe. There’s everything from Getting Started videos for beginners to new features, product overviews, and workflows. All these videos can be viewed on the How To channel on Adobe TV. For a listing of each show and its contents, see below.
www.adobe.com/designcenter/video_workshop
A list apart
A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
From the crown of its cranium to the tips of its Ruby-slippered toes, A List Apart 4.0 is both old and new. Old in its mission to help people who make websites see farther and jump higher. New in its design, structure, publishing system, and brand extensions.
The magazine has long advocated accessibility and web standards, providing deep and sometimes controversial insights into these areas and not infrequently presenting ideas and methods that change the way you think and work. We will never abandon this subject area, but we are once more widening our gaze to encompass disciplines and themes beyond those that have obsessed us for the past five years.
I say “once more” because A List Apart started as a broad and inclusive explorer of all things web design. Our visual and structural relaunch provides the perfect platform from which to expand our self-definition and broaden our subject matter.
Web designer wall
Web Designer Wall is designed and maintained by Nick La, who also runs N.Design Studio and Best Web Gallery. I’ve been designing for several years and my work has been published on numbers of magazines. I love to share ideas and design techniques. Web Designer Wall serves as my public blog where I post my design ideas, tutorials, and talk about modern web design trends.
Why Web Designer Wall? As a designer, I often have a lot of ideas that flow in my mind; usually I draw them on my sketch pad and then paste them on the wall. This is how the name was created — a wall of ideas.
