Web Design and Development

Obviously its been a while since posting, but I figure I will start up again and start sharing some information, tutorials and what not. I always feel if your not going to post regularly then don’t post, I’m sure a few people would disagree with that.

Anyone in the Ann Arbor area should definitly com checkout out our next Refresh Detroit meeting. All the details are listed on our website. We are doing a demo night, where anyone can come and show us their latest websites, designs, applications, tools, and products. You do have to RSVP if you are wanting to demo something, so please checkout out the site for more details.

For anyone that doesn’t know what Refresh Detroit is, we are a group of web developers, designers, usability specialist and anyone who has a passion for the web. We get together to talk about industry trends, special techniques, marketing and a whole assortment of topics.

If you are like me, then most others involved in your life don’t really care about how you used some really cool techniques to code a web site or hear you talk about the usability of a certain site, kind of sucks! The best is how my girlfriend gets so annoyed when I view the source of a site we are randomly checking out. Only us web nerds can understand that type of stuff, so why not get together and talk about it with each other.

With that said, look forward to hearing more post on various ecommerce topics. Since starting my career in ecommerce last year, I have been working on a lot of cool things such as Comparison Shopping Engines, Affiliate Marketing and my dive into the world of software engineering.

I’m not sure what most of you do for your slicing technique in Photoshop, but I always had been old school and used the Marquee Tool. Most developers or graphic designers are taught to use the slicing tool, which annoys the crap out of me especially because of the Save For Web functionality, I can never get it to just save the image where I want it.

In the past I have always selected the area that I want to slice with the Marquee Tool, and went into the layers pallet, clicked on the options and chose Flatten Image. I could now copy that slice and open a new document, pasting in the copied image.

Then I found the biggest time saver of my career, cutting my slicing frustrations in half. What is it, you say? Its the Copy Merged option. I’m not sure how long this has been built into Photoshop but I do feel stupid if it has always been there.

Now, all you have to do is select the area you want to slice with the Marquee Tool, or any other selection tool you would like, then go up to the edit menu and select “Copy Merged” or better yet Shift+Ctrl+C and boom, no flattening of the image, meaning none of the hassle of having to go back in History to retrieve your layers. Now just click Ctrl+N for a new Document, Ctrl+V to paste, then Alt+Shift+Ctrl+S, and boom your in the “Save For Web” screen. Of Course for all the MAC user I’m sure you can figure out the MAC alternative.

Yeah, I might be behind with this, and I just saw this has been here since the first release of CS, but I never really looked because I always just did it the old school way. Feel free to comment about any slicing tips, or other time saving shortcuts in Photoshop.

I noticed today, one of the recent sites I worked on has launched. Enspire Dental an Ann Arbor based provider of cosmetic and comprehensive dentistry. My responsibilities were the XHTML/CSS templates and a good portion of the pages. I got the chance to do some cool image replacement for the header area, which is one giant graphic including the logo and navigation, while keeping all the navigation text inside the code as an unordered list. Great for Accessibility and great For SEO.

It was a beautifully designed site to play around with and gave me the chance to work once again with the great people over at QLTD.

Lately you will see my posts will be geared towards web standards in the ecommerce industry. Its very disappointing because there really aren’t any industry leaders that try to produce their sites with them. Since I have started working for an ecommerce company, I have been doing a lot of research and hunting for sites to get some inspiration from.

I have looked at the top 30 or so internet retailers and haven’t found anything that would show me sites that are doing web standards to the fullest. There might be some that use div based layouts but fall short of using it all the way throughout their site. they are also very non-semantic and suffer from serious divitous.

Anyone can create an XHTML/CSS website but just slapping up some container divs and applying some CSS doesn’t cut it in my book. To me its the same as an old school mechanic that gets a hold of some new techniques/tools and starts slapping on these parts and using these techniques on a piece of crap car thats going to give out no matter what. He doesn’t take the time to learn the power of these techniques/tools and how to use them to gain their full potential or their correct use. Sorry to any mechanics, I was just trying to think of something to compare it to.

Anyways after realising my search for a great site to learn from was going to be harder then I thought, maybe I would ask some of the leaders in the industry. I figured some of these guys that preach web standards and put out great sites would know of some good ecommerce sites. I emailed Roger Johansson, a Swedish web professional specializing in web standards, accessibility, and usability. He is one of my favorite bloggers to read and anyone reading this should start subscribing to his blog, if you haven’t already. I emailed him a description of my problem, thinking he had to know some sites, but like all my previous attempts he is just as puzzled as me. In a way it made me happy because I was thinking, I must be dumb if I can’t find one site but on the other hand, is it that hard for this industry to do it right?

I will be emailing others that are leading the industry and see if they know of any and please post any that you might know of. I will keep you updated with any links that I find also!

One of the sites I worked on in the last month or so has launched. The Ann Arbor Board of Realtors were looking to redesign their current site and Inner Circle Media was the firm that they felt would do it right. Luckily this was while I was working in their office and they graciously let me do the front-end development for the project.

I loved creating this site, its a great design especially compared to the other Realtor web sites that I have seen when googling to check out the competition. Not only was the design the reason I loved creating this site, but because of the fact I was able to create it as a flexible width layout. Throughout my freelance career the designers have always created fixed width designs but I felt that this site could be created flexible and not have any serious issues with the design and the great people at Inner Circle were all for it. The site is also built with Ruby on Rails and Inner Circle even created a custom content management system, so the board can easily update their site content and it gives them a lot of cool modules that make it a great data driven site.

They told me that the Board of realtor’s all over the country have a competition each year for who has the best website, hopefully with such a great design, use of great front-end techniques and such a powerful back-end based on rails will put the Ann Arbor Board of Realtors at the top of the list.