Do it yourself

For anyone out there wondering – can you learn how to design and develop a good eCommerce website – the answer is a definite YES!

We suggest you start with a web development tool (also referred to as an HTML editor) such as Macromedia Dreamweaver that has both a design view (WYSISWG) and a code view. Although there are several popular web development tools available, Dreamweaver is considered by many the industry standard and therefore integrates well with other software applications and extensions. To get a jump-start, we attended a 3-day web development course (about $1400) at Motion Over Time in New York City to learn how to build a simple website.

Initially, we designed the layout and content of our site using the design view of Dreamweaver, but quickly “graduated” to the code view and hand-coded most of the site (including re-writing much of what we had done in design view to separate the structure, content and presentation of the site). The latter step may not be necessary for smaller sites but it does improve the maintenance and performance of a larger website. In the process we embraced cascading style sheets (CSS) to separate both style and structure from the content and behavior of the site. There are a vast number of books and articles on CSS, and we recommend both A List Apart and books written by Eric Meyer.

We chose another industry standard, Adobe Photoshop, to work with static images. This is a powerful tool that may be more than what you need, but we found that some of the more simpler alternatives have limiting functionality. And like Dreamweaver, Photoshop integrates well with other applications (especially Adobe products) and there are numerous good tutorials and “how to’s” available. One of these we recommend is the book Photoshop CS for the Web Hands-On Training from Lynda.com. We opted to buy this book and learn ourselves rather than taking a “classroom” type of course.

To add interactive behavior to our website, we learned javascript (a client-side scripting language that runs in your browser) and PHP (a server-side scripting language that runs on the server). PHP is one of the more popular languages because it is a simple, yet powerful object-oriented language that is open-source and integrates well with MySQL (fast, open-source relational database). Javascript is also a simple language, but should be used judiciously because many users will turn off javascript in their browsers and therefore DHTML (dynamic HTML) and CSS may be more than adequate alternatives.

We solved an interesting challenge using javascript: how to represent that our products are available in 8 funky colors without displaying 8 large images for each product that would use extensive screen real estate. Our solution: show thumbnails (50×50 pixels) in different colors and enable user to roll over these thumbnails to see single, larger image (200×200 pixels) change color as the mouse moves across the thumbnails (done in javascript). Each thumbnail is also clickable to pop-up super-size images (500×500 pixels) in color. Check out the effect on our espresso cups page.

Advertisements

One Response to “Do it yourself”

  1. 10th Way Says:

    Thanks for the cool tips! Keep it up.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: