Mozak Design Blog

Robust CSS Website Design

I have seen numerous post by designers struggling to transition into the world of CSS from table based design. One book I have found extremely useful is “Bulletproof Web Design” by Dan Cederholm.

This is one of the first books I picked up when I was learning and one I still grab every now and then. It is readable, clear, and thorough.

Topics covered by this book include: Flexible Text, Scalable Navigation, Elastic & Fluid Layouts, and Creating Floats.

While each of these topics warrants it’s own blog (and hence its own chapter in the book) I want to highlight how each topic makes for a high quality final web design.

Flexible Text:

• This is the concept of using relative font sizing instead of hard coding in a font size. The author gives a great example of a website for eyeglasses where the font was hard coded at 11px. While this might work for someone with healthy eyes, someone searching for eyeglasses might prefer to have control of setting the default size to something larger. By coding text size in relatives, this allows users the ability to control the overall font size of the site. The design controls the relative font sizing of headers and content.

Scalable Navigation

• This next topic goes hand in hand with flexiable text. Now that the font size can change, the website needs to behave well with these shrinking and growing letters. Scalable navigation allows for this. Instead of having fixed size images for your navigation. Buttons can be created using thin images slices that can be arrayed. Link button names can then be written as text with the graphic slices arrayed as needed behind them. This not only saves design time & graphic maintenance it make the website faster and more accessible to search engines.

Elastic & Fluid Layouts

• This chapter provides a great discussion on the benefit of layouts without tables. Furthermore, it explains how to utilize your viewer screen size by defined sections as percentages of the entire space. This enables websites to present well on both a wide and narrow screen. It also enable the ability to have the html content order different from the website presentation order. In other words you can place higher quality content at the beginning of your html even if it is not the first item displayed on the website.

Creating Floats

• Floats is a powerful part of table free web design. However, with all the wonderful browsers out there that each seem to interpret directions differently getting things to work as desired can be tricky. This chapter does a great job explaining how to achieve cross browser compatibility.

These are just some of the topic covered in this book.

I highly recommend this book to anyone looking to refine their web design skills. It will take you from creating an okay site to building a high quality site you will be proud of.

How Mozak Web Design Began

Greetings, I am a SAHM of 2 wonderful boys ages 2 & 5. Eleven years ago I graduated from Stanford University with my Masters in Electrical Engineering. I then worked at Intel for 8 yrs as a Senior Design Engineer. While I enjoyed my job and was quite good at it, I found I was burning out being a mom and an employee. So with 8 years under my belt I found the courage to walk away from my life in Corporate America to stay at home with my boys.

I loved those three years going to the Zoo, the Park & the Children’s Museum. But with my children getting older and beginning school I began missing parts of my old life.

Since I have always had an interest in website design I began reading web design books. I found it fascinating (did I mention I was a geek). Web design is so complex. It is not just Html & Css. It is SEO & Cross Browser Compatibility. It is Performance and Graphic’s Design.

Within days I was hooked. I spent all my free time reading books and putting together sites for friends. I began to think about the possibility of creating my own business where I could control my hours.

One morning I was working at Me Too of Beaverton (an amazing café designed to give moms a break) I met a great financial advisor named Laurie Daven. I began speaking with her about my business ideas and she shared an amazing resource with me; Kaya Singer. Kaya is a career coach. Within minutes of speaking with Kaya on the phone I knew she could transform my business idea into a reality.

And here I am … I have my own successful business. This is an amazing journey I am on – I feel very blessed.