Cascading Style Sheet - CSS- Internal, External, Inline

In web development cascading style sheets can save a designer many headaches and time for formatting the site efficiently. While a website can function without CSS, it is away to add a custom look to a website and remove its default formats. By using cascading style sheets or CSS a developer is able to assign specific formatting to specific areas in the code. With using CSS a designer may choose to assign an ID format specified area or section. An ID is used, “when there is only one occurrence per page” (CSS Tutorial - ID vs Class, 2011). For example, an ID might be used for a call out for a banner section or menu section.

With CSS a developer may choose to use a class when there are many instances of a needed format on a page. A class call out would be used on hyperlinks, or create special formatted text for copy sections, headers, and footers. Using a class also allows for creating rollovers for hyperlinks.

I personally prefer to use an external style sheet. Even when I am designing only 4 pages I find that I like the ability to control the way each page is formatted with one page of commands. Using an external style sheet does just that. I quickly and efficiently make changes to every page by making a quick edit to my external CSS file. A great example would be if I want my copy text to be larger on each page, and want the color to be gray instead of black. That change can be made to every page that has the link extension in the header and has assigned the proper class to the area that needs to reflect the format.

Using an Internal Style Sheet is another way to apply CSS to a web page. Internal style sheet commands are located in the head section and only apply their commands directly to the page they are placed on. Style tags contain the commands for the specific format of that individual page. This technique is not recommended for a website with many pages. Like with external style sheets a class needs to be placed in a tag to apply the style or an ID is applied to a section in the head section.

Finally, an inline style is the least flexible for quick changes and adjustment. The inline style is exactly what it sounds like. It is placed right in the tag with a style attribute called directly into the tag. This is a quick and easy way to replace the default formats in a tag with custom formatting. However, this method is more tedious to edit and would not be suggested for websites with many pages.

Works Cited:
"CSS Tutorial - ID vs Class." Tizag Tutorials. Web. 31 Jan. 2011. .
"CSS How to." W3Schools Online Web Tutorials. Web. 31 Jan. 2011.

CSS - External, Internal, Inline

In web development cascading style sheets can save a designer many headaches and time for formatting the site efficiently. While a website can function without CSS, it is away to add a custom look to a website and remove its default formats. By using cascading style sheets or CSS a developer is able to assign specific formatting to specific areas in the code. With using CSS a designer may choose to assign an ID format specified area or section.  An ID is used, “when there is only one occurrence per page” (CSS Tutorial - ID vs Class, 2011).  For example, an ID might be used for a call out for a banner section or menu section. With CSS a developer may choose to use a class when there are many instances of a needed format on a page. A class call out would be used on hyperlinks, or create special formatted text for copy sections, headers, and footers. Using a class also allows for creating rollovers for hyperlinks. I personally prefer to use an external style sheet. Even when I am designing only 4 pages I find that I like the ability to control the way each page is formatted with one page of commands. Using an external style sheet does just that. I quickly and efficiently make changes to every page by making a quick edit to my external CSS file. A great example would be if I want my copy text to be larger on each page, and want the color to be gray instead of black. That change can be made to every page that has the link extension in the header and has assigned the proper class to the area that needs to reflect the format. Using an Internal Style Sheet is another way to apply CSS to a web page. Internal style sheet commands are located in the head section and only apply their commands directly to the page they are placed on. Style tags contain the commands for the specific format of that individual page. This technique is not recommended for a website with many pages.  Like with external style sheets a class needs to be placed in a tag to apply the style or an ID is applied to a section in the head section. Finally, an inline style is the least flexible for quick changes and adjustment. The inline style is exactly what it sounds like. It is placed right in the tag with a style attribute called directly into the tag. This is a quick and easy way to replace the default formats in a tag with custom formatting. However, this method is more tedious to edit and would not be suggested for websites with many pages.   Works Cited: "CSS Tutorial - ID vs Class." Tizag Tutorials. Web. 31 Jan. 2011. .   "CSS How to." W3Schools Online Web Tutorials. Web. 31 Jan. 2011. .

Poor Webdesign

Website needs some help~

Encountering the landing page for Adam Haynes at, http://www.stickfort.com/, one would think the site would be pretty impressive seeing the detailed illustration. Upon clicking on the illustration to enter the site the user is shocked as the light tan background is drastically changed to a dark blue with gray and yellowish green accents. At first I thought I was linked to the wrong site as it was completely different from the landing page, but the more I studied it I found it was the actual site. In the end the actual site appears to be more of a blog in my opinion. The site is a personal website to display the work of Adam Haynes.

The text is very pixilated so I am guessing that the links and other text in the top box is images. I also don’t understand why the designer would choose a huge header and two equal columns below. The one column holds “Archives” and a few other links. Which was a poor use of space as the other column where the most of his content is located was long and narrow. This creates excessive scrolling for the user. It also creates a huge hold in the design in the shorter right column.

The portfolios are also set up differently and do not have consistency. The illustration portfolio has large thumbnails or small samples of work down the column that the user can click and view a large sample in a popup window. Under the archives though there are missing samples when some links are clicked. The user then questions why it is called “Archive”? The paintings section is completely different as it has small thumbnails in a small block next to the archives. Another small issue I see is that some of the pieces have the frame stroke and others do not. In the end the frame stroke should match the color scheme if it is on.

Then the user clicks on “Available Works” link and looses the other menu links. The page the user goes to also has a coming soon tag. A page with no content is not good, but leaving a user on a page without content without a way to get back is unacceptable.

Finally, the contact link goes directly to the email client on the computer. I am not a big fan of this type of command. If a user is not on their personal computer the email client is not what the user would want. Also there is not any other type of contact information.

Overall this site is very inconsistent and looks like it is still under construction. I also think the design of the site looks like a blog and really does not make this designer very appealing in a competitive market. The other issues of poor imagery, missing pages, and lack of structure and unity are all evidence in my opinion that this designer does not take his work very seriously.

Source:
Stickfort.com

Great web design PG&E

Site with Great Innovation:

The PG&E website found at http://www.wecandothis.com/ is very impressive. PG&E is the Pacific Gas and Electric Company. This site appears to hold content for PG&E customers. The information is entertaining and helpful in educating the customer in energy saving technology, tips and future ideas. The site is mostly flash driven and very interactive and even has games for the user to play. Being a flash site it does have a preloader for the site to load. The preloader is a great distraction as it is a custom preloader with very large number broken into a unique grid. In my opinion the site loaded very quickly, but at the same time I have super fast Internet.

After the page loads, the user is greeted by different sounds that are connected to the different interactive images. Some may say at first glance the design has no visual hierarchy, but I view the display a to be a balanced collaboration of information expressing in a fun interactive way. The eye is drawn up to the top left corner by instinct as well as the bright orange contrasting color. Here is where the user finds the menu. A nice soft blue color is used which is calming and easy on the eyes. Accents of orange are used for contrast and to draw the user to the menu tabs.

The consistency of the site is quite strong. While there are a few links that lead to new windows that do not follow the look and consistency of the flash site, only a few of these links that landed on traditional HTML pages that all looked consistent. In my opinion it looks like it takes the user to the old site or a less entertaining HTML version of the current site. I was surprised to find this as it makes the site seem slightly unfinished.

Considering how much content this site has to offer I appreciate the organization of the information. Most sites that have all this information on the front page with many links I and other user may find over whelming. There is a a lot of clicking going back but it allows the user to have a comfortable experience without too much information at once.

I think it is great that the site offers the content in a few different languages. The only problem I found with that was that once you click on the Spanish link and try to go back to English the page has an error.

A contact phone number is provided, as well as, a form for correspondence. I did not see an email address on the site, and I would venture to guess there is not one. Typically larger companies do not use email addresses but rather forms.

Over all I found the site to be very creative, innovative and user friendly. The interactive roll over images that have animation really draw the user in. The site looked the same in both Safari and Firefox browsers. It however did not load at all in IE 5 but that is not surprising as it is a flash site. Most important I think the site gives the user a one of a kind unique experience with an organized way to find needed information.

Source:
wecandothis.com

DesignFirms - Free Profile

Get a free professional designer listing on Design Firms!

About DesignFirms!

DesignFirms, period. Stats will show that over time, our site has consistently grown compared to other competiting sites. Our paying advertisers - they are real - not displayed to make us seem bigger than we really are. They are quality companies spending money to make money. Don't take our word for it, Google "designfirms" and see for yourself. Try searching for keywords like "design company", "need a website", "design directory" and even try your own searches. You will see that we are the best hands down. Add in other cool features such as the marketplace, reviews, jobs, portfolios, awards, articles and our link exchange network, you have the web's most prestigious design marketplace.

If you have doubts about finding the right company with DesignFirms, know that our directory is automated but also human edited. We make every effort to provide quality firms for you to choose from. Need more proof? View some company reviews.

What is DesignFirms?

As one of the world's leading directories of web designers, developers, graphic designers, etc., your business can reach thousands upon thousands of visitors each month. Unlike most directories in similar nature, DesignFirms is easy to use and even easier for visitors to find a provider for the services they need (your company). Read below for more information on why DesignFirms is the best vehicle in building your design business.

If you are a business looking to advertise on the DesignFirms directory, this page will help you understand what DesignFirms has to offer and how it will help your business succeed.

Click Here And GO TO DESIGNFIRMS!

Portfolio sites that could use some help...

Question: Did you find sites that you did not like when you reviewed illustrators portfolios? Again, why was this so?
I was least impressed with the portfolio site for Josh Kenyon. http://www.enyocreative.com/work/illustration. This site has nothing to it. It is just piece after piece you see as you scroll down the page. How boring? There is no information about the piece either. The links don’t tell you anything about the artist they just show more sections of his work like art, print, and apparel. At the same time Josh has done some nice color on his site, but the design is so poor it is hard to appreciate the color pallet.

I thought I would also highlight another site that really bothered me. I found Stan Gormans site to be quite disappointing. http://www.stangorman.com/index.html . While his splash page makes the site look promising, after you get past the second page you see the site is very poorly designed. His links are placed at the bottom of the page. This would not be an issue, but they bounce up and down as you go from page to page. Also the fonts are not consistent for these links. He must have a css issue. The viewer can’t miss the basic header on each page in its bright green all cap’s serif font. It is amazing Stan’s illustrations are so good, but his site does not showcase his great work.

Appealing Web Portfolio - Tony Diterlizzi

Question: Which site was most appealing to you? Why was this so? For example, did you enjoy layout, fonts, message, animation or the "over all gestalt" of the work? 

I would say the most appealing site I found form the illustrators I researched was Tony Diterlizzi’s site http://www.diterlizzi.com. I thought it was quite unique especially has he had a little video for each page. You get a real feel for his personality and humor from his comments. I also thought his navigation was very simple. He has nice sized thumbnails in his portfolio section and then the larger images have a nice viewer as well. Finally there is so much in the site. It seems he has many hidden links that interact as the viewer browses. On top of his very sharp site his illustration is quite good too. I actually found that he was the illustrator for one of my daughters books “Ted”. If you have not seen the work of Tony Diterlizzi, I suggest you check out his site http://www.diterlizzi.com.

Free Web Video Player and Play List

I have been looking for months for a FREE video play list and play that quickly can be placed into web sites. I have to say this is actually a bit more difficult to find than I would have though.

However, I have found a great site that makes this very easy.

http://embedr.com


I was looking for a site that would take the embed codes from like a vimeo or youtube and allow you to create a playlist and then post a player and play list on your site. This site does exactly that. and even give a pretty clean look.

Click on this image to see the actual player.

Graphic Design Websites

Web resources to stay on top of trends and continue learning:

http://www.gdusa.com

This is the home site of the monthly magazine “Graphic Design.” Published by Kaye Publishing for over forty years, this magazine and the corresponding Web site provide tons of information on the latest news, trends, and people in the design world.

http://www.commarts.com

Communication Arts Magazine has long been considered the premiere publication of the world of advertising and graphic design. Articles on the industry as well as several showcases of the best work from all over the world make this magazine a must on any designer’s shelf. The corresponding Web site has valuable online information and links to award-winning Web sites and interactive media sites.

http://www.pantone.com

Pantone is the leading manufacturer of color systems throughout the world. Their Web site provides valuable information on color and color trends as well as tips on designing with color. Use the “search” function to search for “trends” to find articles and links to information on color.

http://www.adobe.com

Adobe is the leading developer and distributor of software for the visual communication industry. Their Web site is a storehouse of valuable information on how to use their software as well as information on trends. Use the “search” function to search for trends. Most of the links will connect you to Adobe’s press room where you will find articles on fonts, color, graphics and much more. Adobe allows you to sign up for regular email updates on the latest news.

http://www.trendwatching.com

This site, mentioned earlier, provides the latest information on everything from new marketing techniques to consumer needs and desires. Search for documents within the site using the Google search engine.

http://www.creativepro.com

Creativepro.com has the latest news on trends, fonts, graphics, print, stock photos, systems and hardware. Web and business graphics are also included on this information rich site. Links to each are on the homepage making it easy to find the information you want quickly.

Lost Horizontal Scroll with Right Align?

Had an issue with loosing my bottom scroll bar. I found that when I used a align="right" to align my main table right it did not play nice with the browser.

To fix this problem I used a style="margin-right:0px;margin-left:auto;" instead. Now you see the scroll and it plays nicer...

check out the website.

Web Design Process - Photoshop

Designing a website in Photoshop is a good way to start as it enables you to focus first on the layout for positioning and mockups. Adjusting a design is quite a bit easier in Photoshop or other graphic software compared, to making changes in the code. With layer comps you can easily show different variations of the layout as well as use it to make different pages and rollover links.

When I worked for an online adverting company, ClickaCoupon.com, we built multiple websites we actually did most of the conceptual designs in Photoshop Elements (A stripped down version of Photoshop). We utilized the layers and groups to show different pages or versions for the owner to make decisions. Many times we would go back and move things around and make many adjustments. This would have been more difficult if it were done in code. Sometimes we would even find an existing site, which we would screen capture and utilized the grid and structure as a template. I actually did many sites for this company this way here are just to examples of websites that were laid out in Photoshop before they were coded.

www.clickatrainer.com

www.clickacoupon.com

In Photoshop once the site is designed, it can be sliced and exported for too. Many designers do not have extensive web coding knowledge and by using Photoshop these designers are able to produce working websites. Taking things even a step further designer’s can utilized the bridge and export web galleries without even knowing any html code at all.  These galleries are a quick and easy way to get samples live on a website. I actually designed a website for a client utilizing the bridge function. The client is a photographer and knows Photoshop and how to create the web galleries. I then utilized some code I knew to enable him to upload and change galleries continually without messing up his site. He also has a function for his clients where they type in their code he assigns and they can view their proof photos he has taken for them.  See this site at  www.alpinerose.com.

Great Web Scripts To Look Like A Pro

A great spot to find some great scripts for your website is http://www.dynamicdrive.com/. Here they have a great selection of scripts to take your website to the next level. I especially like most of their Menu and Navigation scripts

Be sure you check it out!

Add The Favicon To Your Web Page

Its the little touches that take your website to the next level.

A great little touch I would always suggest is the Favicon.

Its is very simple as you just create a small 16x16 graphic, run it through a .ico generatior. upload the icon and add a little code to your header.

Great sites to make the magic happen:


http://www.html-kit.com/favicon/
http://tools.dynamicdrive.com/favicon/
http://www.favicon.cc/