Practical eCommerce

Brendang

So I've roughed out my site design in Photoshop, spent a good portion of the weekend in a Total Training DVD to bone up on CSS/DW8 site design and I'm ready to mock up a prototype site. My business plan includes a heavy 'branding component'. Our online experience will be designed to grab our audience/customer's attention, make them crave the experiences/lifestyle our brand/products promote and build loyalty based on shared/common experiences. We intend to do this through social components: blog, customer provided photos, viral videos(integrated animation/live action) type things... Simple, huh?

I have two concerns, The first is philosophical the second quite practical.

My concern is, well, CSS design. The majority of the pure CSS sites I have found look pleasant, clean, easy to navigate and fast, but honestly, appear anemic, generic, and feel kinda suburban(another pleasant house, and another, and another...). They share a sense of sameness. The 'info first then design' methodology makes sense for CNN.com, Wired.com or any other 'info-based' portal, but suppose you wish to build a cutting edge brand?

Many of the truly exceptional product experiences I have found online seem to 'spit in the eye' of 'the way of CSS'. As I mentioned the other day, Smartwool is a great example. Don't get me wrong, I get it, the 'CSS design way' is here to stay and the majority of sites like this are SEO disasters. But when does an efficient, SEO friendly, clean design shoot you in the foot when tying to cultivate a media-centric, heavily branded shopping experience?

My second concern/question is simply practical. Starting from scratch in DW8- Should I use mixed techniques(Frames + CSS, Layers + CSS)? or straight pure CSS for the front end site that I eluded to above?

I would also like to separate for the purpose of this post the 'Look' of CSS and the use of cascading style sheets. CSS for fast formatting makes perfect sense. It's where I see 'Pure CSS' design aesthetics pushing web design that has me bit bummed.

Here endeth my rant, and if you can remember my actual question in the middle of it and offer an opinion, I'd be mighty obliged...

Brendan G.
OTP Cool

bgetting · **Date:** Mon Jan 29, 2007 11:12 am **Subject:** Here's my advice

To start with, you are probably right about the sites you see advertising CSS. However, I can testify to the fact that ANY design can be done using CSS. In fact, you mention Smartwool, which is a flash site that offers NO functionality that cannot be done using CSS and JavaScript. Most flash sites are like that. Since it is easier to build it in Flash, that is how they go. As we all know, easier usually means "search engine nightmare".

Here is how I approach it:

Start by creating an HTML document with none of your visual design in mind. Obviously you will want to refer to your Photoshop layout to make sure that you have all the markup you need. However, you want to spend some time with your HTML document optimizing it for code stuff and content SEO, not worrying at all about your visual design.

Once you are satisfied with your HTML template, you can then start to apply styles to it. If done right, you shouldn't have to make any changes in your HTML to get nearly any visual design that you want. Most of the challenges come from not understanding CSS and it's implementation in browsers, as opposed to a lack of support by browsers.

As soon as your visual layout is working the way you would like it to, you can go through and add the functionality that you are looking for via JavaScript. This can be the hardest part, but I can assure you that JavaScript 2.0 provides nearly all the functionality that I am seeing in the Flash sites you are pointing out.

As an example of some of the few sites that I have seen that really NEED that functionality of Flash, check out 2advanced.com. They create sites that could not be created without Flash. If you are not one of these site, I would say that you can use Flash components in the site, but creating the site completely out of Flash is just a poor idea.

Can you post your photoshop template up here at all? I'd love a crack at creating a one-page template to illustrate some things. I'm sure that others in this forum may have some input as well.

Brendang · **Date:** Mon Jan 29, 2007 9:52 pm **Subject:**

Brian,

Thanks for the terrific input and insight into your workflow.
I'll be back in my office later this week and will post a PShop rough. I'm also glad to hear that much of what I find appealing about some sites is totally doable with CSS.

I guess my lack of experience with the CSS toolset, caused me to imagine the limitations I've observed are inherent and unavoidable. Nice to know there's still plenty to learn in the world. As with commercials production though, in most cases it makes more sense to come up with the concept the hire the talent/team to see it through the various stages of production. But still knowing enough to have a competent conversation or apply some minor tweaks after the team moves on is rarely a bad thing... I appreciate the time, and look forward to your thoughts later in the week.

Brendan G.
OTP

Practical eCommerce

Community Forum

Design concerns when integrating a cart into a DW8 Site

Ecommerce Articles

Search Articles

Ecommerce Community

Ecommerce Resources

About Practical eCommerce

Page 1 of 1
Practical eCommerce Community Forum Index » Design, Development & Usability