Tag Archives: css

Head First HTML with CSS & XHTML

Posted on by

Head First HTML with CSS & XHTMLLast week one of my team members requested a copy of Head First HTML with CSS & XHTML by Elisabeth Freeman and Eric Freeman, as we are doing some work on a CSS implementation of our web site based on the results of some initial research that I had done back in June of this year. I started vacation on Friday and by Saturday I had a note from the post office saying that the book was sitting there waiting to be picked up (apparently our postal delivery person was too lazy to get out of the truck and leave it on the doorstep).

I started paging through the book a little and was a little suprised and put off by the format at first. It seemed to me to be almost formatted as a kids book, with large pictures, large type, and conventions like interviews being conducted with tags, or conversations between specifications. As we were on our way Christmas shopping I was actually reading it to the family and kind of goofing on it. I couldn’t believe that my team members actually requested a book like this that tried to explain things in such simple terms. It seriously felt like a ‘Dick and Jane’ book.

Well, thankfully I didn’t write it off and actually kept reading it. What I soon came to realize is that there is a reason that ‘Dick and Jane’ have been around since the earth cooled. These are some great books, removing all of the technical jargon out of your way and explaining the concepts in an extremely understandable way. The book makes the concepts seem much more realizable and less intimidating to actually try yourself. Surprisingly, I learned quite a bit that I didn’t know by hitting the O’Reilly books that I had read earlier and found myself thinking about the concepts much more frequently (and freely) than I did as I was wading through the highly technical format of these other books.

So while I started out goofing on the book, I found a ton of value in it, so much so that I’m going to grab a few more of them. I think I’ll start off with Head First Design Patterns and then work my way from there.

If you are looking to dip your toes into CSS and XHTML and want to understand the purposes and reasons for the different specifications, I highly recommend picking up this book. I was absolutely pleasantly surprised and found a ton of value in the format and presentation of the information. It was really cool to finally run across a series of books that teach the concepts so effectively while giving you just enough technical information to be able to work.

Pick this one up. You won’t be disappointed.

Slashdot Goes Tableless

Posted on by

I read over on Dougal Campbell’s blog that Slashdot has moved to a tableless design using HTML 4.01 and CSS. The announcement on Slashdot itself also explains why they settled on HTML 4.01 rather than going full-tilt XHTML.

Interestingly enough, they are also planning on holding some kind of competition to redesign the Slashdot theme and have made their CSS available for download to enable people to participate.

Back in June I wrote two articles (Learning CSS and Finishing the CSS Prototype), about my first foray into CSS, spending a week learning as much as I could about CSS using the conversion of my companys home page to CSS in order to present the technology to our leadership team as a way to reduce page download time and reduce labor when changing layout. In one of those articles I stated that I had not been as excited about learning a new technology since starting to learn Python a year or two ago. I still feel the same way. Its very cool to see large sites like Slashdot taking the leap to complete CSS implementations. The additional separation of presentation from the markup code is an exciting concept, allowing you to both reduce code size and reduce the labor it takes to retheme your site when your branding changes without completely gutting the site each time you need to retheme.

We’ve started our conversion, incrementally, when we are touching the pages. The initial results look really good. The mandate has been made that new pages be developed with CSS implementations rather than the plethora of table and spacer tags that choke the pipe for our customers. We’re on our way. So the initial results of the prototype proved the point sufficiently.

Still, I hope bigger sites comparable to Slashdot keep making the switch, and announcing that they are doing so, so that more of us have ammo to make a move like this and spend the time to do it. Many companies just don’t want to make the leap until they see other comparable sites making it first. Its painful to do, but once its done, the labor savings and additional possibilities from a design perspective will definitely be worth it.

The other lesson from this one is one that Joel Spolsky talked about in one of his articles, Getting Things Done When Your Only A Grunt. One person can make a difference. You just have to care enought to do what it takes to make your point.

Finishing the CSS Prototype

Posted on by

Well, I finished the prototype that I was doing on tableless design and confirmed the results mentioned in in the stopdesign article on CSS.

The final result was a 65% reduction using CSS and XHTML, only using tables for tabular type data (and one set of form elements). Most of these space savings were in table code and redundant font and formatting information throughout the original HTML (including the non-standard <SPACER> tag, which was sprinkled liberally throughout the markup).

That’s pretty impressive and a real motivator to convert to tableless design. I can’t express enough how cool it is to see the formatting completely decoupled from the standards compliant XHTML!

While part of me wants to post up the results, I’m not going to, as I don’t want to establish a connection between this site and the company that I work for. I’d rather keep them separate. However, the savings in both maintenance and space savings are there. You’ll have to trust me.

Along with the book that I had mentioned in previous articles, I also picked up Cascading Style Sheets: The Definitive Guide, 2nd Edition, put out by O’Reilly. This book was extremely helpful in getting this project done.

On other fronts, I’ve been doing some really interesting reading over the past 4 weeks or so. Two books called The Innovator’s Dilemma and its sequel, The Innovator’s Solution: Creating and Sustaining Successful Growth, both by Clayton M. Christiansen. These are really interesting books about how disruption and innovation actually causes established companies to lose their foothold on their markets even though they are making perfectly sound management judgements given where their companies are.

As I get my head around the concepts in these books more, I’ll be posting in depth on them. I just have to figure out how to express what I’ve learned. There’s a lot of information in these books and they are really engaging.

Learning CSS

Posted on by

Back in my Windows programming days I used to focus a lot on user interface design. I think I was actually pretty good at it. As time went on I moved into more of the back-end type of programming (utilities and things of that nature). When I moved to Unix programming I did not even touch the graphical UI’s. There was nothing really of interest to me.

When I started web programming, HTML just seemed tedious. I learned enough to get by, but the constant use of tables and getting things to align properly proved to be just too boring for me to ever try to get proficient in web UI design.

Over the last week or so, I’ve decided that I really have to learn about Cascading Style Sheets, which as I’ve mentioned previously, I didn’t focus on very much due to the incompatibilities between browsers in the early days. My initial interest in the technology started about 3 months ago from the work that I have been doing with WordPress, however the final straw that made me think I definitely had to learn this stuff was an article called Throwing Tables Out The Window at stopdesign.com. The author talks about a presentation he gave on CSS in which he, during the presentation converted the Microsoft web site from a table based design to one using CSS. He did the conversion real time to show the audience how quickly it could be done.

The final result of this conversion was a page that looked exactly the same, but reduced the page download size by 62%.

When I saw these results, I decided it was time to learn a little about CSS, so I bought the book Web Designer’s Reference : An Integrated Approach to Web Design with XHTML and CSS by Craig Grannell and poured through it. I also grabbed the O’Reilly CSS Pocket Reference so that I would have a quick way to look things up. (OK, honestly — I bought the Pocket Reference first, and got completely lost — get a real book before you pick up a quick reference).

When I learn something, I need to apply it to something that has value to me. If I just walk through sample projects, I tend to get bored because I’m not getting value that I can use right away.

The project I picked was the home page for my company, which currently uses pretty heavy table layouts. I want to see what kind of space savings we can achieve along with the kinds of maintainability savings that can be realized using CSS based design in lieu of tables.

I started this project on Monday, and to be quite honest, was fairly intimidated, as I always am when stepping outside of my comfort zone. After all, I deliberately did not learn more than I needed to know about HTML and layout because I found it boring.

Between Monday and today, I have been working on the project in most of my spare time (getting up early and working on it when I get home). As I work more on the problems, I understand more of the technology. Given the limited amount of time I’ve had to work on it, I’ve made some pretty decent progress and my excitement builds more and more the more I get done.

I seriously don’t think I’ve been this excited about learning new technology in a long time (probably since I started learning Python a year or so ago), and though its geeky, I find myself thinking about this stuff constantly. The ability to completely detach the presentation from the content is just completely cool.

Now there have been some issues and a lot of frustration. I got things looking great in FireFox and then made the mistake of loading it in Internet Explorer only to find that everything was screwed up. However, a few hours spent this morning and I have the display working fine in both browsers, due to the wealth of information out on the Internet.

If you find yourself laying out your pages using archaic, 90’s style table layouts, you need to start looking at CSS. The possibilities are far beyond the simple font settings that so many sites limit themselves to.

At some point in the future, when I finish my first “project”, I hope to post it up as an example. There is a great site called “Tableless” which showcases corporate web designs reworked using tableless design. These examples do a really good job of illustrating the ability to do complex layouts in CSS that one with a limited idea of the technologies might not think is possible.

Following are some resources on the Internet that I have used to help me learn this stuff. Hopefully, they will be helpful.

Related Links:

Web Designer’s Reference – An Integrated Approach to Web Design with XHTML and CSS

Posted on by

Web Designer's Reference : An Integrated Approach to Web Design with XHTML and CSS I recently picked up Web Designer’s Reference : An Integrated Approach to Web Design with XHTML and CSS by Craig Grannell after seeing a reference to it on Slashdot. I have realized since starting to work with WordPress that I am a little behind on things like CSS and XHTML and had to get up to date, since most of the themes and styles looked like greek to me and I had a hard time modifying them – because I didn’t know what they meant.

The book is really well written. It takes you through not only the mechanics of CSS but takes you through step by step examples that you can walk through to get some hands on experience, something I really need when learning something new.

Now that I know a little more about CSS, I don’t think I’ll ever look at web page design the same way again. I’m one of those people whose markup abilities were kind of stuck in the 90’s because of the lack of consistent CSS support across browsers when CSS was first coming out. I figured if it didn’t work consistently everywhere, I might as well wait until it does. It just so happened I waited for what now seems like forever. I had no idea that CSS had gotten so powerful.

Some of the areas Craig covers in his book include:

  1. An Introduction to Web Design
  2. Web Page Essentials
  3. Working with Text
  4. Working with Images
  5. Creating Navigation
  6. Introduction to Layout
  7. Tables: How Nature (and the W3C) Intended
  8. Layouts with CSS
  9. Working with Frames
  10. Getting User Feedback (I found some really interesting stuff in here)
  11. Adding Multimedia
  12. Testing, Tweaking and Uploading

Craig also includes an XHTML reference, a web color reference, an entities reference, and a CSS reference towards the end of the book.

From an XHTML perspective, Craig covers a lot of the features related to accessibility, which wound up really interesting to me as well. I learned a lot from these sections.

If you are like me, and blew off even looking at CSS until now, this is definitely the book for you. It’s an easy read for those of us who haven’t been paying attention to this aspect of software development and includes great examples to walk you through the power of decoupling display from your mark up.

I now have enough detail to know where I need to head next and some practical experience with the examples to understand the basic concepts. Sometimes that’s all you need.