Posts Tagged ‘css’

Ever since I’ve started creating XHTML/CSS for the most part have always started with a Photoshop PSD and chopped it accordingly to create a valid layout.  I initially purchased two full version copies to cover the licensing of my own machines which has a pretty large initial fee.  Over the years I have purchased lower priced upgrades in order to keep up to date and compatible with my latest Mac OS X machines/operating system.

For the most part, Photoshop continues to be the industry standard as far as graphic/web design goes and PSDs are usually what is delivered to be from a graphic designer.  Sure there have been times where I might get an Illustrator or a Quark file, but that’s usually not the norm.  It does a great job for what I need to do which is mostly resizing, measuring, and pulling pieces out of layers.  I could have a graphic designer send me the cut up images from ImageReady, but that doesn’t always give me the best results.  I’m much more comfortable having the designer send me the PSD and do my own cutting and optimizing for what I feel best fits the code/layout for the web.

I’ve always tried to look for alternatives that are better suited for my needs.  This lead me from Dreamweaver to SubEthaEdit to Coda which I use exclusively for development.  I was never really happy with Dreamweaver, but got the job done.  I am much happier with what Coda has to offer and it feels like it’s built for Mac OS X.  Also it’s cheaper at $99 vs. $399 ($199 upgrade).  When smaller companies develop the software it seems like there’s quite a bit more free updates before a full upgrade which also tends to keep price down.  Price is a small factor, but if a program is much better than I would consider paying more for it.

This is one of the reasons I’ve stuck with Photoshop for so long.  I followed the same progression with the graphics tools as I had with the development tools.  When Pixelmator first came out, it just didn’t have enough of the features that I needed for web development.  It probably had a good amount of graphic tools to help graphic designers, but wasn’t enough for my daily tasks.  The software has been out for a little while now and they are soon to release their 1.3 version which I’m currently using in beta mode.

They’ve done a much better job as far as adding features to get me to switch.  For the most part I am able to the work and it seems to run quite a bit faster than Photoshop.  Some things still make it a little difficult for me to use.  For example if you zoom and image it’s hard to tell what percentage you are actually at.  In Photoshop it shows a percentage at the bottom of the window.  Also if the image is larger than the screen, it doesn’t really do a great job of fitting it around the tools, it just puts the tools on top of the image.  I almost always have to resize the image to fit an open spot inside the tools.  When I’m cutting the PSDs I like to use the Marquee tool to cut my images for the web and sometimes like to crop there.  There’s a crop tool in Pixelmator, but at times it’s a little difficult to position.  It does however let you edit the crop area before actually cropping.  I would also like to see a live preview so I could compress the images as small as possible without losing too much quality.  Right now it’s more of a guessing game.

I’ve been using Pixelmator for about two weeks now for normal tasks.  I haven’t really had to do really complex PSDs.  I mostly just have basic layouts or image resizing for different sites.  I think I’ll have to use it for a little while longer and see if I run to any trouble with it.  For right now using Pixelmator and keeping CS3 on the back burner will keep me from upgrading to CS4 next month.  What’s more important to me right now is if I can be more productive.  Right now I think I’m just as productive, and if this keeps up at a lower cost.

The Olympic Games have started and it’s been a pretty good show so far.  There’s a lot of events, and I like to follow certain sports, but I can’t really stay glued in front of the TV on several channels throughout the entire day.  I don’t think clients would be very happy.  I do like to check out their websites to keep up with the latest standings and results.  For as long as I can remember using Olympic websites they’ve all been pretty good.

They offer the overall package: good design, good user interface, and best of all good functionality.  I’m able to find what I need in a pretty effective manner.  It’s nice to see that over the course of many years, even larger sites have transitioned into XHTML/CSS.  It’s been a long process, but I think many companies and organizations have seen the benefit.

NBC’s Olympic website does a good job as well.  I think people put more time into websites that will see a lot of traffic in bursts.  Of course these websites probably get the bulk of their traffic hit during times like this so it’s a good chance to shine in front of a large audience.

Well, that’s all I really have.  Do you like the Olympic sites or do you think some things could be improved?

Noupe had another great post yesterday that collects some of the most common bugs, hacks, and fixes that us front-end CSS developers use on a daily basis.  Those fixes are broken down in the following categories:

1. IE Bug Fixes
2. Centering A Block Element
3. Column Issues
4. CSS Positioning
5. CSS Float Concept
6. Easier Rounded Corner Solutions
7. CSS Form Issues
8. Worth Checking Out CSS

If you are trying to learn CSS or just wanted to review some of the tips, it’s a good article to check out.

Jon Skypes wrote up a CSS performance test across browsers comparing CSS styling by no styling, by tag, by class, by descender, and by child.  While for most cases everything seems pretty close as far as Safari and Firefox goes and of course IE is a whole lot slower.  In real world applications you would never really have that many styles in your style sheet so in most cases I don’t think you would see a difference in speed.  It is interesting to note as these web applications become more and more complex this may be an issue.  As of right now I think we’re pretty far off before we need to worry about it.

While I like to keep the software installs on my machines pretty vanilla, if there is a tool that helps my productivity I’m all for checking it out.  While I’ve moved primarily to WebKit for web development, I often find myself using Firefox as well.  I keep my Firefox install to the base plus three extensions.

Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug tends to be used the most by us. I can easily inspect the DOM and edit CSS inline. Those are key features for us. Also it immediately tells any JavaScript errors in the code. Another nice feature is you can print things out in the console. This helps quite a bit in debugging.
Web Developer Toolbar

Adds a menu and a toolbar with various web developer tools. Sometimes Firebug isn’t able to inspect the DOM so being able to view the generated source is nice. Also you are able to disable certain aspects of the page such as JavaScript or CSS or outline certain elements as well. It has a built in validator for checking your code.
YSlow

YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites. YSlow is a nice extension to Firebug. Yahoo did a nice job of collecting some tips for improving the speed of a website. While in some sites, I can’t always get an A rating I try to make sure if there is anything I can do, that I at least make an attempt to do it.
Read the rest of this entry »

We’ve been using the YUI CSS framework for a lot of our recent work including this site as well.  The YUI CSS framework is broken down by Yahoo in four different sections Reset, Base, Fonts, and Grids.  The four sections are available in a number of different formats as either files for each section or a single file with minified versions as well.  For final production we use the minified version that includes Reset, Fonts, and Grids and it’s been recommended to use this file because it’s in it’s smallest possible form and it is available through a permalink from Yahoo.

I had looked at Google blueprintcss for a while as well as YUI CSS and both had it’s pros and cons, but continued to use my own base files that I had been used to working with for quite a long time.  So what actually switched me over to YUI CSS?  I’ve been contracting through SolutionSet for a couple of years now and Nate Koechley from Yahoo came in gave a presentation about YUI CSS and just YUI in general.  It got me thinking that this was a good idea, but was it going to replace my everyday use case files.  It wasn’t convinced until I watched Nate’s video in YUI Theater.

Read the rest of this entry »