Finished site

Oh, right, I said I was going to post a link to my finished website….Here it is: gnarlycat.com.

Posted in ART 170: Web Design 1 | Leave a comment

Week 15 Summary

This week was entirely focused on finishing my website. It was pretty exciting seeing things come together and begin working functionally as I had envisioned weeks ago when I designed the comps. For a while I was having a hard time really grasping compound selectors but they finally started making more sense to me after 3 weeks of experimenting with site building. I think my confusion was worsened by the fact I’ve been using CS4 instead of CS5…it seems to me like the selector names generated by my version of the software are more complicated/wordy than what CS5 is inclined to make…and the extremely long compound selector names definitely were intimidating me.

I also have a better understanding now of how to wrap CSS rules around an element using the DIV and Span tags. At the beginning of the week I struggled a bit with this because I forgot about the DIV tag. I thought that in order to apply a class or id to something it had to be applied with something like a paragraph tag, or another tag which would somehow alter the content I was applying it to. I wanted to build my thumbnail galleries by wrapping padding around each thumbnail and the caption below it, and then floating the combined elements next to each other. I could not remember a way to do this at first so I tried making my galleries with tables. I looked at some other art sites online and tables seemed like a pretty common way to do that, so I decided to follow their example. Watching the Lynda.com tutorials showed that inserting a table was very easy to learn quickly. I did almost every portfolio page with a table, but received feedback that it would be better if I used CSS to build my galleries instead of tables (which did not surprise me) so I started over on the gallery building and tried harder to figure out how to apply a CSS rule to multiple elements. Looking more closely at one of our earlier homework assignments helped me remember how to do it. I was much happier when I got the galleries put together using floats and padding. The tables seemed like they would be a real hassle to update. When I add new art I will want to make the newest item come first in the gallery, and when styled with CSS it will be easy to add a new element anywhere I want. With a table I think it would only be easy if I wanted to add something to the last cell of the table. To move something in front of the other table elements looks like it would take a lot of tedious code shuffling (and seems impossible to do from the designer mode).

I did have one major stumbling block this week which I still have not figured out. There seems to be something in my code somewhere causing something in my sidebar to interfere with the floats I place in the main content area. I built my galleries by putting a ‘float left’ on all the wrapped elements so that they will all float next to each other. I had a clear float at the end of each row. The first clear float seemed to be interacting with the sidebar somehow, because my second row of thumbnails would get pushed down below where the sidebar ends.

At first I thought I had fixed the problem because I noticed that the links in the sidebar had unnecessary extra tags on them (caused because I inserted the rollover images while in design mode, and the software thought I was adding paragraphs). When I deleted these extra tags for some reason the main content area adjusted back to how I wanted it and everything looked fixed. But a short while later the gap between the first and second rows of thumbnails had reappeared. Then I thought that maybe the problem was that the div box making up the sidebar itself is floated left…but adding a clearfloat inside the sidebar or after the sidebar div only caused the entirety of the main content area to get pushed below the end of the sidebar.  Everything I could think of trying only made my format more messed up instead of better. I compared my code to a new unaltered default of the ‘CSS fixed width 2 column with header and footer layout’ and the code for the sidebar was exactly the same as what I had (minus the interior content). I am completely stumped. In the end I just resorted to removing the ‘clear float’ tags at the end of each row, as I intended for my floated thumbnails to fill the entirely of the box I had them in, and the size of the box wrapped around them forced them to line up exactly how I wanted without breaks. (I kept a clear float after the last of the thumbnails in each gallery.) This seems to me like it works fine for my current set up, but I am unhappy I didn’t figure out what was causing that one issue since it means I can’t change the appearance of the rows of thumbnails without changing the size of the container they are in.

Beyond that though I am very happy how everything came together. I really really like the ability to insert image rollovers with javascript. That is extremely cool. I loved how easy updating uniform sections of the site became when I made templates to build the pages. I made an additional graphic for my contact page (an envelope and pen) because that one part of the site looked too empty to me. I think it is awesome that CSS allows you to even adjust the kerning of the font you use…I wasn’t sure that would be possible when I was making my comp. Overall I am really happy how close to my original plan everything turned out. I feel like I learned quite a lot through working on this project. I also found that I was increasingly more comfortable making my changes in code view instead of design view. I had a lot fewer issues when I typed the selectors in myself instead of inserting things through panels. It also caused me to remember how things worked a lot better.

Here are some screenshots of he finished website:

The homepage:

The main portfolio page will feature an image of whatever my newest piece of artwork is, so the graphics will occasionally rotate:

The pen and ink gallery of my portfolio:

The contact page:

I registered a domain name tonight (gnarlycat.com) hopefully by the end of the week I’ll be able to post a link to a live version of my site.

Posted in ART 170: Web Design 1 | Leave a comment

Week 14 Summary

12 Rules for Choosing the Right Domain Name

Full list of available domain registars: ICANN-Accredited Registrars

Rotating Images with Dreamweaver and JavaScript

Adding a Flash/XML slideshow

CSS Zen Garden

Remember to always designate link, visited, hover and active states for you links, even if only one of those will change color (ie state the color for a visited link even if you want it to stay the same as an un-clicked link). Leaving states undesignated might cause a browser default to override your intended styling. You can group the selectors together in a rule if they are to have the same attributes ie: a:hover, a:active {

When underlining text or links you have an alternative to simply stating “text-decoration: underline”. You can create an underline with “border-bottom” which gives you more control (you can state the width of the line or make it dashed, etc.)

Don’t float things next to headings, they need to always have their own line to themselves.

To keep track of the colors on your webpage you can place a color guide inside of your CSS document. This will not affect the code if you put inside /*……*/

When floating objects if you do not clear between them they will float next to each other on the same line. If you want them on separate lines be sure to clear.

When listing attributes for a link if you include “display: block;” the link will extend for the entire box around the link and give you more click-able space, and not just the text itself.

Pseudoselectors must be used in the correct order.
The correct order for links is: link, visited, hover, active.

In Dreamweaver you can use the behaviors panel to add javascript to your code without writing it yourself. This allows for an easy addition of image rollovers, etc.

You can create an image rollover by either choosing “insert–>rollover image” and then selecting both images and the link to include in the dialog box which pops up, or you can use the behaviors panel and select ‘swap image’ from the drop-down. You can choose ‘on click’ or ‘on rollover’ to determine when the image will change. You can also designate if the change stays after removing your mouse or if it will swap back when you take the mouse away (‘restore images on mouse out’). It is best to select ‘preload images’ so that the images will appear smoothly unless the page has a really significant quantity of images on it, which may cause the page to take too long to load.

Whenever you use javascript with an image it is necessary for that image to have a unique ID or name attribute.

To cause the cursor to turn into a hand when it moves over something interactive, add this to the CSS:
cursor: pointer;

Posted in ART 170: Web Design 1 | Leave a comment

Week 13 Summary

Understanding cascading style sheets – Another summary of how CSS works.

Making the Most of a Meta Description
Meta descriptions embed keywords and a short description in your html document. The text from the meta description displays as the description for your site when search engines display their search results. Google says that the meta content does not affect how a site ranks in a search, it only affects how it displays. The meta description is important however, because having a good concise description will affect the likeliness that people will click on your link when they see your site in the search listing. The search engine only displays the first 160 words of a meta description, so it 150 words is a good length to target when writing one. Quotations will cause the description to be abruptly cut off, so either avoid using quotes in a meta description, or change regal quotes to be only single quotes so your description does not lose content. If a site is so multifaceted, that it cannot be summed up in a 150 word summary, then it might be better to not write a meta description. The search engine will pull text from around a keyword to display if there is no meta description. This might be more affective for drawing a reader in than a description that is not relevant to the keyword they were searching for.

Save Time with Templates in Dreamweaver
-Step by step walk through of how to create custom templates in Dreamweaver.

Dreamweaver

When you create a new document in Dreamweaver, you can attach an existing CSS style sheet to your html document, or you can create a new CSS sheet at the same time, or embed the CSS into the head of the html document (you can also add CSS directly into the html on an inline level, but this is not recommended.) If you place the CSS in the head and later decide you wanted it as an external style sheet instead, you can easily move it by selecting it in the CSS rules panel and right clicking to select “move CSS rule” (likewise you can easily move rules from an external sheet into your document.)

CSS can be written to have either Absolute (an exact fixed size which will not changed based on variant conditions such as different browser window size, etc) or relative (measurements are related to other elements on a page and can change proportionally) measurements.

The most common relative measurement to use are ems. (This measurement comes from the size of a capital ‘M’ in any given font you are using.)

If you want to make a font stack which is different from the default ones which come preloaded with Dreamweaver, you can select ‘edit font stack’ from the last option from the drown-down menu next to ‘font’ in the properties inspector. Make sure to end a font stack with a generic font-type such as ‘serif’ or ‘sans serif’.

Build Better CSS Font Stacks (A helpful site for font stacks.)

From an html-only standpoint the tag for em will italicize (emphasize) text and the tag for strong bold (strongly emphasize)text. These are known as phrase element.

In CSS by default headlines will be bold. To make them not bold use the code ‘font-weight: normal’. You can also control the font weight by setting a numeric value between 100-800. 100 is the lightest possible value, and 800 is the boldest. 400 would equal normal weight.

When setting font style with CSS: Italic equals the italic version of the font. Oblique is the regular version of the font, but it has been skewed to a slant. In general it is better to use the italic option, but oblique is useful if a certain font does not have an italic version available.

Line-height In general font on a screen needs more white-space between lines in print, so do not make web line-height decisions based on print conventions. Generally 140% of your font size is a good online line-height value. You can set line height in all of the same values that you can use for font, but it also has an additional option of “multiple” (where the line height value is determined by multiplying a certain value times the font value.)

If you want a heading to be broken into two lines, use a span tag to move down the second half.

When setting margins you can use shorthand to set the value for each side in one rule. margin: Top value, Right value, Bottom value, Left value. “trouble” (TRBL) to remember.

Using padding for spacing
You can create an indent by adding padding to only one side.

Aligning Text
text-align: (left, center, right, justify)
Alignment is inherited from a parent element.
Most browsers default alignment to left, so if you do not set a text align value it is usually the same s setting ‘left’ for your value.

You can use vertical-align to create subscript and superscript text. setting vertical-align to a negative value will cause the element to get pushed below the text baseline/

Vertical align may only be used with inline elements.

Inserting links in Dreamweaver

Insert a link through the menu bar:
Insert–> hyperlink
or Common–> (hyperlink symbol)
This method is a good way to do it because the inserting dialog box prompts you to provide the most information, such as alternate text, etc. You must remember to add link names on your own if you add links with other methods.

<bAdding a link to pre-existing text
highlight txt you wish to convert into a link.
Add link (you can browse for it) in the ‘link’ field in the properties inspector (under HTML tab)

Use ‘Point to File’ icon:
The ‘point to file’ icon is next to the link drop-down field (between the box and the folder-shaped browse button, it looks like a target.) Click the icon and hold down your mouse. Drag the mouse over to the files panel. Find the file you want to link to in the files panel and select by holding your mouse over it and releasing. Dreamweaver will add it to the link box in the properties inspector.

Create a link to a file which has not been made yet
Highlight text you wish to turn into the link, in the link box in the properties inspector type in (the name off the folder you intend the linked file to be placed in when it is ready)/(name of the file to be created later). The link will be ready and will work once the future file is placed in its designated folder.

If you are linking to the same file more than once on a page, the link will be stored in the link drop-down in the properties inspector, so you have a shortcut to add it. (But you will have to re-title it each time, only the link itself is stored).

Absolute Links
When linking to an external site, it is important that you type out the entire address; you cannot leave off the ‘http’ part like you can when typing an address into a browser.
Adding target: _blank will open the link in a separate window.

Email Links
To make a link to an email address:
In the common objects menu bar there is an envelope shaped icon you can click to add an email link.
Or you can add “mailto:” in front of the email address in the link box in the properties inspector.

To force a subject line to the email when the link is clicked:
Same as above for adding email link, but after the address place a ‘?’ followed by the desired subject line.
Example: mailto:email@address.com?Subject Line Goes Here (you can have spaces in the subject line but not in the ‘mailto’ part).

Article on why it is preferred to use unordered lists when creating navigation: Unordered Lists: More than Just Bullets

Posted in ART 170: Web Design 1 | Leave a comment

Week 12 Summary

Killer Web Content Examples of headlines and summaries that were both successful and unsuccessful at grabbing readers’ attention. Content written for the web is generally more successful when it is concise and quickly reveals how it relates to the reader’s interests.

CSS Cheat Sheets -Gives downloadable pdfs of basic CSS code in an easy to reference list.

Whats New in Dreamweaver CS5 CSS Layouts
An overview of changes made to the CSS layouts that come with Adobe Dreamweaver, and explanations for the best ways to code so that your layout will work in all browsers. For example, when making lists for navigation links, it is best to set the margins and padding to zero. You can add the spacing in the .content selector. Lot of code examples to illustrate various basic functions you’d want to include. How to add widgets for making drop-down navigation links. Explanations to why it’s important to include focus as well as hover state in your link code, etc.

Dreamweaver CSS Starter Pages

When you create a new document in Dreamweaver you have the option of choosing a starter CSS layout with the structure already in place for various types of pages (such as a one or two column fixed or liquid layout with options of a header and footer, etc.) You can attach the CSS code either from linking to an external style sheet, embedding the CSS in the head of the HTML document, or adding it as an inline style.

Edit–>Preferences–>CSS Styles here you can set whether or not Dreamweaver recognizes shorthand notation. (Checkboxes under ‘use shorthand for’.

The CSS panel: You can add properties to the CSS rules by highlighting them in the CSS panel and selecting ‘add property’. You can choose a property from the drop down or type one in.
In the bottom of the CSS panel is a button that looks like a sheet of paper with a corner folded down and a plus sign to one side. Click this button to add a new CSS rule.

Using the code navigator. If you click inside any element a symbol like a steering wheel will appear. clicking on this symbol will bring up a window that lists all the styles affecting the element. This is an easy way to edit the styles applied to the element.

Class selectors are an HTML attribute. Add a class by selecting it from the pull-down menu in the HTML tab of the properties inspector.

ID selectors are more specific than class selectors and will override a class selector when the two are in conflict.

In Dreamweaver, dotted lines will appear to differentiate a DIV. DIV tags divide your page into specific regions. Most pages have a wrapper containing all of the DIVs. The wrapper establishes the size of the page’s content.

It’s best to keep your CSS simple.

The Box Model all of the components of your webpage are contained in boxes. The boxes have 5 properties: width, height, padding, border, and margins. Adjusting these properties will keep the content from getting too close together and give you options in controlling the site’s appearance.

You provide 2 values to set a margin: The first value affects the top and bottom of an element and the second value determines the element’s right and left. Browsers automatically add default vertical margins, so setting the top and bottom margin value to 0 will prevent you from having extra margins.

Posted in ART 170: Web Design 1 | Leave a comment

Week 11: Design Comps

My final project will be building a portfolio website for my artwork. I am excited to be working on this project, although I’ve been struggling a little bit in the actual site design. I think my background in print design is definitely holding me back a little; it’s hard to move past my aesthetics for static artwork and design to accommodate ideal functionality. I’ve discovered that a lot of sites that appealed to me and I wanted to use as role models were not the best designed sites from a web design standpoint. I began searching for other portfolio sites I had not looked at before in disciplines similar to my own style to try and get some inspiration (especially for examples of introductory text on their homepages) and I found it surprisingly hard to find any sites that were good examples! A lot of artists seem to just maintain blogs. The artists that did have regular websites….a lot of them did not meet my criteria for good site design. Many seemed to not have homepages at all…the ‘homepage’ went straight to an interior page, such as a gallery, or artist statement, so it was not very helpful for finding examples of brief intro text for a homepage. The majority of the portfolio sites I looked at had the content very squished to one side of the page. They were obviously designing for a specific browser width and had no fluidity. I suppose that lots of other artists have the same problem I’ve been having…getting stuck on aesthetics that do not make a smooth transition to web design.

Comp of homepage:

My homepage is primarily gong to be a single large graphic and a logo (the logo is my signature in Japanese katakana). I added brief text introducing my art. I originally had graphic based navigation for the top links but I changed it to text based navigation to improve my site’s search engine accessibility. The graphics that I made for the top navigation were not distinct enough from plain font to be worth handicapping the site’s accessibility. I upped the kerning of the font (Arial) in this mock-up though…I’m not sure yet if that is something I can do with either HTML or CSS? I might not be able to keep the text with the appearance I ideally want.

COMP of an interior gallery page:

This is the first of my gallery pages. I have more paper collage artwork than the other categories of my gallery sections so I thought it would be the best one to sample. Currently there are 20 thumbnails on the page, as I add any additional art I will make the gallery go on to a second page.

I kept my idea for graphic navigation for the side links of different gallery categories. I drew all of the links in hand lettering and used a different style for each category.

Comp of “About” page:

This s pretty straightforward, just a photo of me and my artist statement! No side navigation to this category as the ‘about’ is just a single page.

I hope the ideas I have laid out work as I translate them to a real site! I am a bit nervous about pulling it all together in Dreamweaver and adding the code, etc.

Posted in ART 170: Web Design 1 | Leave a comment

Week 11 Summary

Search Engine resources:

Search Engine Watch

20 completely free SEO tools – Tools to let you see ways your site can improve for search engine finding.

SEO Software, Simplified – Search Engine optimization.

Search Engine Roundtable

Search Engine Placement Tips by Danny Sullivan
This article gives advice on how to increase your chances of ranking high in a search engine listing. One good piece of advice is to make your search keywords more than a single word long (my intuition would have been to use single words, so this is helpful advice). Most people type phrases when they are searching for something specific, but more people have single keywords in their webpages, so there is more competition to end up in the results. Having a more specific keyword makes you more relevant to specific searches. The placement of your keywords also affects its search listing, Search engines give preference to sites where the keywords are listed high on the page. Including them in your title and headlines is the best way to go. Having HTML text instead of including text in graphics is always better because it gives more words for the search engine to scan (anything written in a graphic can’t be seen by the search engine), and the more times a keyword is repeated the more it will get the engine’s attention. Making sure that all of your internal pages are well linked together is also important, so that the search engine will follow the trails of links and process more of your site. Having your site linked to from other quality sites on comparable topics will also improve your ranking by search engines, as well as potentially get you visitors who are already visiting the other sites.

The Benefits of Slicing Images
This article explains the advantages of using Fireworks to slice images and export them as pieces instead of as single entities. Often your image will have different sections which will work best in different formats. Slicing an image allows you to target the different sections and save them in the format that will most optimize them (such as exporting a photo portion as a jpeg, and a text portion as a GIF, etc). Often slicing an image will reduce the overall file size. However, even if the file size is not reduced, the page will often load faster when it contains several small images instead of one large one.

Blasting the Myth of the Fold
“Above the Fold” of a webpage is everything that is visible on your page without having to scroll down. The name is taken from journalism, where above the “fold” of the newspaper, is a literal fold–everything that is visible when the newspaper is folded in half. Traditionally it is assumed that casual browsers will not bother to scroll down when they look at websites, so it is important to concentrate all the most essential information above the fold, in order to avoid missing the user’s attention. Over the years research has shown that it is becoming common for people to scroll down, and the risk of information below the fold getting missed is not as relevant as it once was. In spite of that many people cling to the idea that it is critical to keep as much content above the fold as possible. Some techniques for encouraging people to scroll down is to strategically place content (such as photos) overlapping he fold, so that they are clearly cut off at the bottom. This makes it more noticeable that there is more content further down the page. It can be difficult to predict where the fold will fall on various users’ computers though, due to the wide variety of monitor sizes these days, so you cannot entirely rely on content placement to compel people to scroll. The best way to get people to scroll below the fold is simply to have high quality content which people will naturally want to finish reading/looking at through its completion. Although people are more inclined to scroll these days, the fold does remain relevant. Content like navigation and any type of user controls should be above the fold, whereas interactive features which rely on reactions to the content do better at the bottom of the page.

ClickTale – A service that records your users’ activity on your site and gives you statistics on how your site is being used, what parts are receiving the most attention, etc.

Posted in ART 170: Web Design 1 | Leave a comment