Bruce Heinlein's Blog

Final Day (Reference Links)

bheinlein — Tue, 08 Dec 2009 22:03:35 +0000

Galleries

Dynamic Drive ( http://www.dynamicdrive.com ) is a wonderful resource for building dynamic content on your pages.

Below is a selection of code and javascript that you can download to create an overlay gallery. This allows you to setup thumbnail, or smaller images on your page, that when clicked, open a larger image along with a caption, and darken the page behind:

http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

Highlight Navigation

If you want to include a “You are Here” feature in your navigation, the tutorial below is a great place to start. This allows you to incorporate a script that highlights the button on the navigation bar that indicates which section of the site you’re in:

http://www.creativepro.com/article/dreamweaver-how-create-you-are-here-navigation-links

Social Networking: Taking Part in the Conversation

Once you have a website, it’s important that you continue to explore ways to promote your website. Whether you are a community building website, an ecommerce store (ie, you are selling a product) or a portfolio website, letting people know you are out there is important.

There are a number of ways you can use Social Networking to connect with peers, colleagues, customers and much much more. Below are just a few:

Facebook

More than just a way for college kids to connect, Facebook has become an integral marketing tool for most organizations. Sign up, create an account, and use the PAGES feature to announce your website. Collect “fans” for your website, post information and press releases, images of new work, etc.

LinkedIn

A hugely popular networking tool, use this to connect with former colleagues, current coworkers, friends, family members, etc. This allows job searches, postings for events, and much more. Create a profile, and use the new Sites feature to market your website!

budURL

A URL shortening service, budURL also allows you to track clicks as your site visitors click on the specially organized links that you create. Provides statistics that can show you how often people are visiting and clicking on certain website links, as well as links posted on Facebook, Linkedin, or via Email.

Twitter

Twitter is an evolving phenomenon, that is an alternative way to stay in constant contact with associates, business partners, friends and more. You can even use Twitter to track keywords, client websites, or competitors, using Summise.

Blogs

You can choose to maintain your blog and use it as a source to promote your website content, products, services, client work, etc. Blogs are only as good as the content you add to them, so you might start out with setting up a Google Blog Reader account, where you can track blogs and real time news, and get a feel for how other people are using blogs to promote everything imagineable.

Linked InEcommerce Options for Small Businesses

LinkedIn is slowly evolving into an extremely useful and robust business/marketing tool. You can really fill out your profile to include so many promotional elements – your photo, links to your website, blog, RSS feed, portfolio, etc, recommendations, etc..

LinkedIn has added new applications recently – one of which allows you to display links to your recent blog posts and those of your connections. There’s also a great application for promoting and inviting others to events (gallery openings, design shows, speaker events, etc).

You can also optimize your profile for search results. Google will spider your profile, but won’t show more than your name in the results.

For LinkedIn results, however, you want to make sure your headline, summary, and experience are well-optimized. Below is a post on a local LI user’s blog about it, which will give you some tips:

Apart from your profile, LinkedIn provides you with ample opportunity to demonstrate your expertise by giving free advice via the Answers section as well!

http://thecaffeinatedblog.typepad.com/the_caffeinated_blog/2008/08/unlock-the-full-potential-of-your-linkedin-profile.html

Selling products online can be a tricky side of the business. Merchant accounts, transaction fees, privacy issues, secure transactions, etc. Custom solutions can be expensive and time consuming so if you are just starting out, you might check out some of these basic storefronts:

Google Checkout – General Ecommerce Storefront: http://storegadget.googlelabs.com/
Yahoo! Store – General Ecommerce Storefront: http://smallbusiness.yahoo.com/ecommerce/
Network Solutions Ecommerce Packages – General Ecommerce Storefront: http://www.networksolutions.com/e-commerce/index.jsp
Etsy – selling handmade products: http://www.etsy.com/how_selling_works.php
CafePress – Brand and sell products with your own Logo: http://www.cafepress.com/make/personalized-gifts

Breadcrumb Navigation

WebMonkey was a long-standing resource in the design and coding community. It’s now a Wiki site, where programmers and designers collaborate and collect information to share.

http://www.webmonkey.com/tutorial/Build_Dynamic_Breadcrumbs_With_JavaScript_

Menus: Dropdown Navigation

Dynamic Drive is known for it’s extensive list of customizable menu systems. When you peruse the options, you want to make sure that the menu is cross-browser and cross-platform compatible, is controlled by CSS visually speaking and can easily degrade on older browsers. Lots of information here:

http://www.dynamicdrive.com/dynamicindex1/indexb.html

Week 11

bheinlein — Fri, 13 Nov 2009 18:50:41 +0000

Understanding CSS:
Read Understanding CSS >>
CSS Layouts:
Read “CSS Page Layout Basics” >>
CSS Zen Garden website:
CSS Zen Garden
Estimating Your Time
Read it here >>

VIDEOS

Templates:

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0157

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0158

Final Design Comps

bheinlein — Wed, 11 Nov 2009 21:39:13 +0000

I am not convinced that I like the final results. I really liked some elements of the orginal designs and tried to keep the overall theme and layout the same but I attempted to incorporate everyone’s feedback into the revised comps. I think that it will improve in time.

Week 10

bheinlein — Tue, 03 Nov 2009 04:17:21 +0000

From table-based to tableless web design with CSS

Exporting CSS and HTML directly out of Fireworks CS4

http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html

http://www.adobe.com/devnet/fireworks/articles/export_css_images.html

Week 9

bheinlein — Sun, 25 Oct 2009 12:13:24 +0000

Designing with Grids:
http://www.webdesignerwall.com/trends/grid-and-column-designs/

CSS Typography:
http://www.digital-web.com/articles/css_typography/

Prototyping
http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html

Greeking Generator – use this website to create “dummy” placeholder text, or “greeked” text to use in your designs or storyboards
http://www.lipsum.com/

VIDEOS

Rapid Prototyping >>

Exporting CSS and Images >>

Creating HTML Click-Throughs >>

Creating CSS / XHTML Layouts >>

Introduction to CSS (Part 1) >>

Week 8

bheinlein — Tue, 20 Oct 2009 19:54:04 +0000

Articles

Dao of Web Design – a timeless article from A List Apart
Blasting the Myth of Above the Fold – by Milissa Tarquini – a veteran of AOL, Milissa talks about her research in usability based on designs that extend beyond the fold of the traditional page.
Five Principles to Design By… – Good design is much more than making something look pretty, it’s all about problem solving … tried and true key principles.
Difference between ID and Class – A description of “hooks” – or IDs and Classes – used in CSS to build customization into markup.

Type for the web

www.ilovetypography.com

Anatomy of a Web Font >>

Code Style’s Combined Font Survey Results >>

CSS Typography >>
Glossary of Font Terms

Photography Sources:

Week 7

bheinlein — Tue, 13 Oct 2009 01:55:24 +0000

Typography References

Font Websites

Free Fonts

Fonts for sale

Recommended by Jason Beaird

Designing for Search Engine’s – RESOURCES

Search Engine Watch: http://www.searchenginewatch.com

http://searchenginewatch.com/2168021

Free SEO Tools: http://www.groovecommerce.com/ecommerce-blog/search-engine-optimization/20-nifty-seo-tools/

Search Engine Optimization: http://www.seomoz.org/

Search Engine Roundtable: http://www.seroundtable.com/archives/014550.html

Domain Name Advice

http://www.seomoz.org/blog/how-to-choose-the-right-domain-name

Web Design Advice

http://www.seomoz.org/blog/web-design-tactics

Week 6

bheinlein — Tue, 06 Oct 2009 01:54:04 +0000

Good Web Design by Matt Brown

Bread Crumb Navigation by Jakob Nielson

Adobe Labs – Spry Resources

Navigation Examples

Examples of Traditional Navigation Styles

News / Column based navigation :

Dynamic Drop Down menu navigation:

Basic Graphic Navigation:

CSS-driven text navigation:

http://www.peta.com/

Breadcrumb:

http://www.peachpit.com/articles/article.aspx?p=664662

Annimation Techniques:

Final Project Proposals

bheinlein — Mon, 28 Sep 2009 01:24:08 +0000

Concept 1: Redesigned Chesapeake Bay Roasting Company Website

The Chesapeake Bay Roasting Company brand was developed and launched in February 2002 by myself along with 2 other primary business partners. The sole focus for many years has been food service sales but there has been a recent shift to bolster our retail image through marketing and packaging efforts. I would like to develop a pilot retail site that would introduce an entirely new look and updated content.

I have access to a tremendous amount of images both custom and stock as well industry publications, brochures, etc.

Concept 2: Hair Stylist Professional Website (for a friend)

A close friend of mine has recently expressed interest in possibly putting together a website for her hair styling business that she manages from home. The main focus would be to outline the products and services she specializes in and communicate booking times with existing and new clients.

I would be limited primarily to stock images and having to publish content provided to me by my friend.

Note:

I have to be honest. Concept 1 is the one that I am really shooting for. I can provide further details after drafting up an outline.