Web Design and Development

I was reading an article the other day about CSS Sprites and whether or not Google could penalize you for using these methods. If you haven’t heard of CSS Sprites, it is a technique used to combine images you want to use as backgrounds and combine them all in one jpg, gif or any other format you would like. It lowers the amount of times your website will have to make HTTP requests. Typically I use a lot of CSS Sprites for navigation elements but it is not unheard of to actually combine several layout elements in one image.

The article which I can’t find at the moment (I wasn’t expecting to write about it) went on to say that Google has never come out and told us their view of CSS Sprites. Basically with CSS Sprites you have the actual text for elements still in the source code for search engines and accessibility reasons but display the image as a CSS background. Of course not all CSS Sprites is used for text alternatives, but I would say a great deal of the time they are. We would think Google wouldn’t care about this but we all know how Google feels about hidden text and the shady Black Hat SEO’s stuffing key words. We hope that Google is smart enough to know if we are stuffing keywords or we are actually using CSS Sprites properly

Google Speaks and sets us free

I got home tonight and came across an article entitled “Design patterns for accessible, crawlable and indexable content” on the Google Webmaster Central blog. Where low and behold Google tells us:

Having meaningful text to go with navigational links is equally important for Googlebot as well as users who cannot perceive the meaning of an image. While designing the look and feel of navigational links on your site, you may have chosen to go with images that function as links, e.g., by placing <img> tags within <a> elements. That design enables you to place the descriptive text as an alt attribute on the <img> tag.

But what if you’ve switched to using CSS sprites to optimize page loading? It’s still possible to include that all-important descriptive text when applying CSS sprites;

What about that Javascript?

Clearly Google is pushing us for better techniques not only for load time, but accessibility while ensuring our content gets indexed and crawled. It was really refreshing to hear Google saying how it is important to have unobtrusive Javascript. Google goes on to compare the Googlebot in the same context of a visually impaired user. We shouldn’t have our Javascript in our HTML, we need to make sure that if user doesn’t have Javascript enabled that the link brings them to a page representative of the link they clicked.

In Conclusion

Sometimes it is hard to get other developers and executives onboard and understand how important all these newer techniques for complying with web standards, accessibility, and optimization. One thing is always true and that is everyone listens to Google. How many times has an executive come to you just drooling all over Google and their accomplishments? Most of the time I can’t stand how everyone is bowing down to Google, for one Google doesn’t practice enough web standards themselves and this is representative in a number of their services.

If Google continues to write more articles such as this, it will make our battles internally with our executives and other people that brush standards to the side a lot easier. They might actually listen to us and appreciate what we do and our passion for perfectionism with web Standards. Maybe these people will just stop saying “let’s just get it done” and actually put time in the budget to research and plan correctly to create our applications the way they should be developed.

After writing the Firebug Layout tab article yesterday, I found a great write up by Jacob Gube called Awesome Things That Firefox’s Web Developer Extension Can Do. He goes on to list a lot of features that I never knew you could do with the tool.

Some of these things are:

• Determine server information of a website. You can actually see a website’s HTTP response headers by using “Information > View Response Headers”.
• Use a “magnifying glass” to zoom into parts of a web page.
  You can use the “Miscellaneous> Display Page Magnifier” option to get a window that allows you to zoom in and out of the desired areas of a web page.
• You can even view a website’s color palette by using the “Information > View Color Information”

For more tips and better detail, head on over to his site and check it out. He has another great article on the topic called 9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension.

I have realized that I really need to look more into the tools that I use to increase my productivity and make these less frustrating. These type of tools can be life savers especially when you work on projects where you actually have to compile every time to see the smallest changes as I do.

I have been using Firebug since it has been released. It is probably the greatest development tool created ever. Yes, the Web Developer Toolbar is great, but I feel Firebug dominates it in many ways. With both tools I probably only use about 30% of it’s capabilities, but it does me fine for now and every time I find out something new, it makes my life that much easier.

Finding Layout

For the last month or so I have been looking through more and more Firebug tutorials. One day I just so happened to go to the main FireBug page, and started reading the text on the homepage. I see a block of text talking about “visualizing CSS metrics”. I was instantly intrigued! I proceeded to click on the link where I was blessed with the capabilities of the Layout Tab.

I have looked at the Layout Tab before but dismissed it as some weird Box Model thing. Sure, some of you out there are thinking “You didn’t know you could do that with the layout tab”, but I am sure others out there have overlooked it.

What Does the Layout Tab Do?

The Layout tab is located after you select the html tab, in the right column next to Style. To get the element in which you want to know the box model specs, click on Inspect and hover over the html elements in the HTML frame. Before finding the layout tab I always used inspect and just the normal Style tab.

Some of the cool stuff it does are:

• Gives you the width and height of the inner most box, the actual specified width in your CSS.
• Gives the specified padding, border and margin of each side of the element.
• Something that I never thought of is the offset. This is the element that its left, top, bottom, and right CSS properties are relative to. Just think of when you are positioning an element absolutely inside a relative positioned parent and I think you will understand it.
• Not only does the Layout tab give you all these values but it lets you modify them.

Aren’t we happy now?

To sum it all up, this is a great piece of functionality that firebug offers and I felt others out there might have been missing the power of it. I have been using it religiously the last few days. It is much easier to edit the margin, padding, border, or width of an element then just using the edit CSS feature, which I find to be a bit buggy sometimes.

I think I might be posting a couple other entries on the functionality of Firebug that we might be missing. Please feel free to add any features you find you can’t live without. You never know if everyone else knows about it or not.

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.