Attending An Event Apart Boston and going through the W3C’s Mobile Web Best Practices course has me looking more closely at how I mark up data.
The main cord that was struck, most directly in Luke Wroblewski’s Mobile First! talk, but echoed by most every speaker in Boston, is to design from the mobile version of your site first. This theme occurs in the Mobile Web course as well.
(more…)
On the CSS-d mailing list Gabriele posted a demo titled Pure CSS fisheye menu with icons. It’s a nifty little demo replicating the zooming dock feature you’ll find on Mac and Stardock’s Dock.
I decided to take it one step beyond and utilize CSS 3’s transform properties, resulting in my own Fisheye demo.
I cut out much of Gabriele’s code that handled the zooming and replaced it with Folgers Crystals transition and transform. (Although I kept pretty much everything else she built, including her icons. Thank you Gabriele for the inspiration.)
Specifically, on the navigation anchors we have transition: all .1s ease-in-out. In a nutshell, this says, “All transitions should take .1 seconds to complete and they should do it smoothly.” We also have transform-origin: 50% 0 which moves the center of action to the center top of the anchor box.
It isn’t until we get to the hover/active/focus states that things happen. Here we have transform: scale(1.5), which you’ve no doubt already concluded causes the element to grow by a factor of 1.5. An important thing to note about this, the transform is applied to the anchor element and therefore affect everything inside that anchor, be it a background image, text or foreground image.
Of course it isn’t quite that simple. Because this part of CSS 3 is under development, we need to utilize various vender prefixes. So to see it actually work you’ll need to add -moz-, -webkit- and -o- to the front of all the transform properties. Not surprising there is not support for Internet Explorer, but that’s OK, it doesn’t matter. Anyone using IE won’t know what they are missing. Go see for yourself.
And look for the Easter Egg… .
Internet Explorer has a number of css bugs which cause no end of headaches for web developers. Working on the uber complicated style sheets for the electronic product at work I’ve encounter enough oddities to fill my quota for the year. I feel pretty good that the IE-only css file isn’t actually that big. (more…)
During the past year I’ve become interested in using web standards and semantic markup. The idea is to separate content from presentation. For example, I have followed a variety of holy wars over the use of <i> (italics) and <em> (emphasis) elements. Italics are presentations, emphasis describes the content. The <i> element has been depreciated in favor of <em>, but that leaves a few things hanging. For instance, how should I code a book or movie title?
I follow the convention that book titles should be italicized, eg. The Stars My Destination. But if <i> has been depreciated, that leaves <em>, which isn’t the correct choice — I’m not emphasizing the title, I just want to note that it is a book title. (more…)
I installed the Web Developer’s Toolbar in Firefox and was poking around its many features on different web sites when I came across the “Display ID & Class Details” function in the Information section. Now, this is certainly handy when troubleshooting your own site, but it can be equally infomative when looking at other sites. (more…)
Facing a corprate mandated redesign at work, I decided to take the oppotunity to update our site to structurally meaningful and valid code, utilizing the latest in CSS to do so.
Corporate has provided templates and a code base which is old fashion tables in tables in tables with tons of spacer .gifs. I threw all of that out and started with just their dimensions and color palatte and recreated the site from scratch. My efforts have paid off.
We meet via a phone conference last week with the corporate web keepers and they were impressed with my work. At first they couldn’t believe that my pages didn’t use any of their images, since the look is nearly identical. They were further impressed with the numbers: their page – 32 kb, mine – 9 kb. Their total page weight (all images and code): 106 kb; mine: 32 kb. Total image they used: 60+; total images I used: 5.
They were impressed enough to ask if I minded sharing what I did with the vendor who created their original templates. Looks like I’ll be helping them rework the master corporate template that all the companies will be using.
Yes. If it’s gotta be corporate, at might as well be done right.
And, I’ve improved upon my own code. I had a brainstorm today that elliminated two entire styles, replacing them with simple decendent selectors. Smooth it is.
At work on Friday I gave a presentation to a few people on the power and benefits of using Cascading Style Sheets. It went really well. There were a couple of guys from our product development team and they were very impressed by what I can do.
It looks like I may be asked (I’ll see that I am) to have a similar chat with a couple of managers. If all goes well, I’m going to try to create a little niche for myself here – our products could certainly use my help.
I scored a bit of a victory today at work: I’ll be rebuilding our product site template using cleaner, more modern code and CSS.
I’m planning on using a hybrid layout with a simple table structure to position everything, but all of the styles will be handled via a linked stylesheet.
This is a nice little victory for me as it is the first push to modern mark-up in our company. Plus, I’m not the lead HTML developer. I’m not sure how he’s going to take it, but he does acknowledge that I know CSS a lot better than him. He is learning….
I’ve just tweaked the stylesheets for all of my pages — they all now utilizes the same sheets (layout, presentation and print). Also, all of the pages are now, more or less, complient XHTML 1.0 (transitional) and CSS2 (no more tables!).
And, while they all look great in Mozilla (I love this browser), I just checked IE 6.0 and it, for some reason is cutting off the blog at the hight of the right-hand box. ::Nevermind. It’s all better now::
If you are looking for information on using stylesheets, try A List Apart. And don’t forget to Upgrade Your Browser.
