Graphicalwonder - Shane Perran's SharePoint Customization Blog
April 04, 2006
Advanced SharePoint Customization: Adding your company logo with a twist
A few months ago while creating the Free Theme Pack I made numerous posts on theme and css customization which spawned several other discussions and comments. One noteable was how to add your company logo to the page using CSS, quite a few of us tried different things and in the end we were left with manipulating .ms-banner and .ms-bannerframe in order to get the job done.
Today while working on a new project I found myself again implementing the company logo with the theme, however this time I needed more. I needed the menu bar separate.
With the current version there is no way to separate the "logo background from the top navigation background"
However with a little thought and some slightly more advanced CSS I was able to accomplish exactly what I needed. The screenshot below shows the separation between the logo and nav bar."
To accomplish this I used the same method of manipulating the .ms-banner and .ms-bannerframe but with a few extras.
This time I added a border to .ms-banner which would ultimately act as the navigation bar. Then I added position:relative to the .ms-banner a:link states so that I could then move them down onto the border using the "top" property.
This lets me have a background color for the menu (technically it's the border) and still keep a clear separation of the background behind the logo which is actually .ms-bannerframe.
Download the company logo via themes walkthrough in PDF
Hope it helps - happy customizing!
A view from the road (Information Worker Deep Dives)
I usually have the best of intentions when it comes to blogging while on the road but unfortunately it usually seems to take the back seat.
When I attended TechED last year in Orlando I wanted to post the day-by-day events complete with photos but I just didn't get around to it. The same can be said for our recent Information Worker Deep Dive tour in Halifax and Ottawa. I did however take a lot of photos, I'm a photo-junkie!
While reading my dailys lately I noticed Bil Simser has been posting some photos from sunny Orlando and Dev Connections.
I really think that these little 'photo experiences' people offer add a lot to a blog. I know I personally love taking a look through a few photos that people snap while travelling the world to deliver or take in presentations so I have decided better late then never.
I am going to follow this up with a quick summary of events complete with photos of both the TechED Orlando event last year as well as the Deep Dive tour.
Hopefully future events will be posted a little faster but in the meantime I am dedicated to making sure I share the experience with as many as possible, even if it is only through a few emails, blog posts and photos.
April 01, 2006
SharePoint Designer 2007 Features
It should come as no suprise to anyone that I was never against using FrontPage 2003 as long as it was used properly, for example - data views were/are one of the best custmoization options available for content.
The problem with FrontPage was it had been misused alot and it really made itself a nasty little reputation, a reputation so bad that Microsoft decided to rework the application and then rebrand it to breathe new life into it.
The result is "SharePoint Designer 2007". Mike Fitz said awhile back "It's time to show some FrontPage love" and now I know why, they have really put a lot of great effort into this application to make it a viable SharePoint customization tool.
Now that it seems people are allowed to post screenshots I wanted to post a few screenshots of the great new features that I think the designer types will really love. To view the screenshot just click a link below. Big thanks to Amanda for helping me get these screenshots together!
10 Screenshots of the great new features in SharePoint Designer 2007
(X)HTML and CSS Color Coding & Intellisense - The code is now much easier to look at.
The Common Tasks Menu - Now when you add a data-view web part for example you have an untuative and useful common tasks panel presented to you. The same as in Visual Studio 2005
A great new Toolbox filled with things like ASP.NET controls
Much nicer CSS control and editing. It is a lot of the dreamweaver way of dealing with CSS.
The slow movement toward a mindset for more semantic markup and CSS versus tables for layout is becoming evident with the inclusion of CSS Layout Templates.
For those that followed my site template tutorials or those that have done much importing of FWP files there are now more features in the Import Menu.
To elaborate a little more on how much better they've made this tool for CSS customization, this new "Jump to Code" feature is great. Select a class name and go straight to the page and part of the code for editing.
Of course what would a "new wave" editor be without Master Pages support.
New - "New" Menu where you can now select to create SharePoint Content
In case my other examples didn't convince you, check out this super cool and useful CSS editing feature which allows you to display only styles used in the current page.
http://www.graphicalwonder.com/images/stylemanagement.jpg
March 31, 2006
XHTML Validating Module for ASP.NET 2.0
Thanks to Scott Hanselman for pointing to this beauty:
Go directly to the download website and get the XHTML validator module for ASP.NET 2.0
Overview:
Josh Twist over at JoyOfCode has a "Validator Module" that sits at the very end of the HttpRequest and validates the page you just rendered as XHTML or not, then displays the detailed results. If you've ever found it a hassle to run XHTML validation on your site at runtime you should take a look at this clever idea. With tools like this ValidatorModule plus validation within Visual Studio.NET always improving as well as tools inside of FireFox to validate, there's fewer and fewer excuses to not render XHTML.
Try the asp.net2.0 XHTML validator out on Josh's site, pound on his demo, and leave him some feedback. You can add it to your .NET 2.0 applications without recompiling. He's also expressed that he could backport it to .NET 1.1 if there's demand.
More great java'scripting.
Every day now there are great new scripts popping up that really really add to the visual presentation of websites. keep in mind a lot of these scripts can be used in SharePoint just as easily in many ways such as the Content Editor Web Part, Site Definitions as well as Page Templates.
One such script I stumbled across today is just too good not to share! Lightbox JS
Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
How to Use:
Part 1 - Setup
1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.
Part 2 - Activate
1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
Visit the Lightbox JS site to download
March 30, 2006
CSS and Rounded Corners (Without Images)
Awhile back I did a lot of searching for effective ways of creating rounded corners. I found literally dozens of workable solutions using 4 corner images.
Then I found an absolutely awesome solution to create rounded corners without using images and instead using a little CSS and Javascript. This is a real gem, it degrades gracefully and makes the job pretty easy.
This morning I was informed that this great solution has been revisted, made even easier, cleaner and better. And on that note I give you:
Nifty Corners Cube:
More than one year has passed from the first version of Nifty Corners. While it was more of a proof of concept, and the second version presented some big improvements, there was still something missing. So here I present Nifty Corners Cube, that are simpler and more flexible than the previous versions.
Anyone involved with CSS and Design I would strongly recommend at least reading this through and being aware of it.
Visit the Nifty Corners Website
March 28, 2006
CSS and 100% height
I have searched high and low for information on this topic, I have experimented again and again with very limited success. I wanted to share my findings in hopes that someday some poor soul will not have to go through the horror of trial and error.
My dilema even made it to the SXSW panel where Vertua partially tackled some of the issues people have with absolutely positioned layouts and gave a presentation on better CSS layout strategies.
The goal here is to create a 100% vertically stretching column with a background colour (not an image) that will stretch to 100% height regardless of the amount of content, (ie a single line of text, or 100's of lines).
If you are pressed for time or are tired of wasting time researching this issue my conclusion thus far is that it certainly isn't easily accomplished. Below outlines the best methods I have found thus far.
Courtesy of Position is Everything
Equal Height Columns
The Magic
The basic method works like this:
1. Blocks which will act as columns must be wrapped in a container element
2. Apply overflow: hidden to the container element
3. Apply padding-bottom: $big_value [2] to the column blocks, where $big_value is a large enough value to guarantee that it's equal to or larger than the tallest column
4. Apply margin-bottom: -$big_value to the column blocks
What happens is that columns really become as tall as the content they contain plus $big_value thanks to the padding-bottom. The negative margin-bottom brings the flow of the document back to where the same point as where the padding-bottom began, and the overflow: hidden on the containing element chops off the overflow[3]. Consequently the columns' presence on the page only appears to be the height of the containing element and any background colour (or image for that matter) applied to the columns displays for that height. Most crucially, the height of the page reflects what appears to be on the page and does not dissappear into the scrolling distance.
Remarkably, IE Win doesn't actually need the overflow: hidden, but it causes no problems so there is no need to hide it.
Beware though, browsers don't let you throw arbitrarily large values at them. They have limits. Exceed that limit and the columns will expand to the padding-bottom value and you'll end up wiuth some pretty long pages. Fortunately, we know the number of that limit (which is actually provided by Safari which is the most conservative browser in this matter): 32767px.
The CSS:
#wrapper {
overflow:hidden;
}
#block1 {
width:10%;
padding-bottom: 32767px;
margin-bottom: -32767px;
background-color:#CCC;
float;left;
}
#block2 {
width:90%;
background-color:#DDD;
padding-bottom: 32767px;
margin-bottom: -32767px;
float:left;
}
The HTML:
<div id="wrapper">
<div id="block1">Block 1</div>
<div id="block2">Block 2</div>
</div>
Note: The above example is the very bare bones, please read the entire article to get browser specific code.
Even this method does not accomplish 100% height if the content doesn't already stretch to more than your viewport. It does however work well for creating equal height columns and when the content does fill more than the viewport it does appear to be 100% stretching. IE: No more "cut off".
Other things I have tried which gave me limited or no success:
1) A 100% height wrapper around an absolutely positioned 100% height column. This works only until the content runs outside the viewport. The column appears "cut off" and the content runs out over it.
2) Min-Height - I simply had zero luck with this
3) Wrapper with Overflow and Floated Columns - Again I get "cut off" after the viewport.
4) Every height, min-height, wrapper, no wrapper, float, position and even doc-type scenario I could think of.
There have been rumors of display:table; coming to the rescue in the future but as of now I have yet to find the perfect solution. This also means that unfortunately that some people may be forced to remain with tables for certain layout methods.
I really look forward to discussing this particular quirk (no pun intended) with readers.
Keeping your CSS slim and trim
CSS Tweak - Keep that CSS file size down:
Try CSS Tweak to keep your stylesheets lean and mean!
A simple test on SharePoint stylesheets:
A Theme (theme.css)
Before: 53k
After 28k
The WSS Default (ows.css)
Before 39k
After 24k
The SPS Default (sps.css)
Before 26k
After 18k
March 21, 2006
Internet Explorer 7 - Beta 2 Preview
At MIX 06 the IE Team mentioned there is now available for download a preview of Beta 2. This version of IE7 is "Rendering Behaviour" complete. This basically means that the additions will be more on fixes/security but in regard to how your pages will render in Internet Explorer 7 you are now free to test your CSS sites and find out. Eric Meyer had some words on IE 7 and Expression on his website.
Get Internet Explorer 7 (Beta 2 Preview)
March 01, 2006
CSS: 40 Layouts with the same Markup
The Layout Gala
Looking to learn more on CSS based layouts? Here is a great place to pick up some tips. 40 layouts using the same markup.
February 15, 2006
CSS: Creative CSS Trick
This is a great spin on a method often used for CSS image rollovers. This trick gets 2 thumbs up from me, great thinking!
This article will teach you how to use one image to load a range of different icons for specific headings. Enabling you as the designer to only keep tabs on one image and the end user gets all the icons in one neat download and further more the heading is accessible to boot!
Read the artlce 1 image for multiple headings
February 14, 2006
CSS: Go Canada! CBC Olympics goes tableless
CBC Canada's largest broadcasting is using a (mostly) tableless design for the Olympics coverage
I'm not sure if this is a sign of things to come or if it's due to the subcontracted company that did it. In any event, GO CANADA!
Go see the CBC Olympics website
February 12, 2006
My fears and hopes for Web 2.0 and SharePoint
By now everyone has heard the term "Web 2.0". The term was brilliant from a business perspective but somewhat annoying from a technical one.
First we have to figure out what it (Web 2.0) actually means based on dozens of different opinions and then make our own idea from it.
To me web 2.0 means the web is evolving - It's a marketing/hype term being used to breathe new life into a stagnant internet. In short it's simply a buzz-word but it does have merit.
Does Web 2.0 really exist? I guess it depends on your idea of what web 2.0 really is but yes there is something to it when the big players like Microsoft (www.live.com) decide they're going to make an investment. Google is also rumored to have some 2.0'ish experinments in the works. (Ajax Web Editor)
My idea of what web 2.0 is simple, It's a more portable, usable, content-centric and just plain enjoyable online user experience made possible by the numbeous new technologies such as AJAX, Ruby on Rails, .NET 2.0, CSS 3 etc.
This leads me to my main fears for Web 2.0:
- Portability seems to rely on the fact that we're doing everyone online via someone elses website. What if this website goes down? or worse disapears? What happens to your data? We need guarantees that our data is safe, it's able to be backed up, it's able to be ported from one system (website) to another should an inevitable disaster occur.
- Ideas versus Buzzwords. I fear that really great ideas are becoming secondary to a term used to describe it. For example: People might refer to http://deliicio.us as a really cool example of web 2.0. Sure that may be true to an extent but it shouldn't override the fact that it's a brilliant idea The marketing hype will push thrings through for awhile but what happens when people get bored of hearing about web 2.0 and want web 3.0 or 4.0?
Don't take this the wrong way. If the SharePoint Technologies team was to adopt the web 2.0 thinking for the platform I would do the happy dance, twice.
What does this have to do with SharePoint?:
To me SharePoint is a perfect example of web 2.0 (idea wise) but not architecture wise. If however the team was struck by lightning and had an decided to simplify the UI, rethink the markup model of bloated tables and implement instead CSS based layout well then you would have a platform that people would "want" to extend to the extranet.
The idea of making it so easy to create lists which allow users to capture and store dynamic data was brilliant. The idea of re-usable drag and drop components (web parts) was brilliant. When I look at www.live.com or www.netvibes.com etc I just can't help put think of what SharePoint could be as an external platform.
February 10, 2006
Internet Explorer 7: Jeffrey Zeldman on IE7
To all those that have been flaming Microsoft and Internet Explorer 7 beta - listen up!
Direct quote from Jeffrey Zeldman:
IE7 beta’s standards accuracy is already very good and getting better, and, despite what you might have heard to the contrary, Microsoft’s engineers are working with the community (and in particular with The Web Standards Project) to identify and fix CSS bugs and errors and to compensate for hacks like the one seen here. Using IE7? Finding bugs? Microsoft and The Web Standards Project want to hear from you.
Send feedback direct to the IE team
Visit The Web Standards Project (WaSP)
Read the entire article dubbed (Don't be a beta hater (ie7 related))
February 09, 2006
CSS versus Tables
I am a huge advocate of CSS and web standards however I am also very aware that there are limitations of CSS based design not to mention huge (overhead) factors to take into account especially for small low-budget websites that are redone every other month.
I find myself at a crossroads with CSS every single time I sit down to figure something out. I know I can do it in tables faster, easier but I also know that eventually CSS will lead the way and my instinct tells me CSS should be used from this point out. That doesn't mean tables should be completely ruled out however as there are times when they are helpful.
This article takes a fairly in-depth look at the practicality of CSS versus Table based design:
Read the CSS versus Tables article
February 08, 2006
CSS Based Icons
Here is a nifty way to create icons that use CSS which allow you to change the background-color. While you can always use transparent images these are actually supposed to have a background-color and work quite well on whiite.
Take a look at Bit Icons
February 06, 2006
Usability: Internet Explorer 7 and Firefox
Awhile back I wrote a post entitled "Can a 3 year old teach you about usability" about watching a 3 year old interact on websites via icons which they can identify with (for example (disney, or harry potter).
I still believe strongly in recognizable icons for usability and even accessability to a degree and the post below should illustrate another example.
Note:This post is being used to illustrate a point - not to poke fun at a browser shortcoming.
The "Search" functionality on the far right of the toolbar was introduced by Firefox and Microsoft has since (very wisely) adopted it. There is however a distinct difference in usability of the two. Firefox uses a search-icon while Microsoft (at least in this build) has simple grey text to distinguish the search-provider being used.
Firefox implementation: (notice the ICON)
Microsoft implementation (notice the lack of ICON)
The proof is in the pudding.
February 03, 2006
CSS: Create Image Rollovers using CSS
Here is one way you can use CSS to create image rollovers:
Overview from Christian Montoya
This is a pure CSS image rollover that works for image tags. Remember how you used to do them with javascript?
I’m partial to using image tags for navigation rather than crazy new-fangled image replacement techniques (pharner and etc), I was thinking of an easy way to do an image rollover effect.
The premise is simple: Enclose the image in a block level element with a defined size, and then change the positioning of the image when that block level element is hovered over, much like you would change the background positioning for background rollovers. The implementation is simple too.
Here’s the setup:
The left half of the image is what I want to display, and the right half of the image is what I want to show on hover. It’s 200 pixels wide and 50 pixels high, so the CSS to make the technique work is:
a { display:block; height:50px; width:100px; overflow:hidden; }
a:hover { display:block; text-indent:-100px; }
Browser compatibility:
* IE 5.5+
* Firefox 1.07+
* Opera 7.23+
* Mozilla 1.7.12
* Netscape 6.02+
Problems with this technique: When the image degrades to alt text, the text will move left on hover, and probably dissappear. Not a complete usability problem, but a problem nonetheless. If you would prefer the javascript route, check out unobtrusive javascript image rollovers.
Keep in mind, though, that the javascript technique requires image preloading to prevent a delay, and uses two images, whereas the CSS technique needs only 1 image to load.
January 04, 2006
Usability: Congrats to Intel.com for going tableless
Intel.com has dropped tables for more structured markup. There have been several high profile sites that have started moving down this path but I think this is about the biggest thus far.
Usability: 10 ways to horrible e-commerce site
This was just too funny not to share.
read the article on "10 ways to a horrible ecommerce site"
December 13, 2005
CSS: A new CSS Properties Windows for VS 2005
Overview
Visual Studio 2005 provides some capabilities for visually editing the styles for elements in an HTML or ASP.NET page. For example, in Design view, you can right-click a control or element, and then choose Style to display the Style Builder dialog box. Although the style builder enables you to create and edit in-line styles, there's no way to edit the styles that are inherited from a linked style sheet. The new CSS Properties window provides this capability — it enables you to edit both in-line styles and styles in linked style sheets.
The CSS Properties window is an add-in package to Visual Studio 2005. It does not change the behavior of any feature in Visual Studio 2005; it simply adds additional functionality specific to editing CSS in Design view.
Download the CSS Properties Window Here
December 09, 2005
XHTML: The anatomy of an XHTML document
Molly E. Holzschlag breaks down the anatomy of an XHTML document quite nicely. For those wanting to learn more about XHTML this is definately a good starting point.
Read Molly's post on The Anatomy of an XHTML document.
December 07, 2005
CSS: Find CSS Errors Using Firefox
I just found this little gem on BereaStreet :
Firefox has a very useful feature that I can't believe I haven't heard about before: it displays CSS errors in the JavaScript console. Anyone know if this is a new feature in Firefox 1.5?
To see it in action, select Tools > JavaScript Console and make sure it is set to display "All" or "Errors". Select the browser window again and load a site that contains CSS errors (it shouldn't be very hard to find one). Take a look at the list of CSS errors.
The error messages are often more helpful than those given by the W3C CSS Validator, and clicking the link in an error message opens a source window with the error highlighted. Excellent!
December 01, 2005
IE Isn't the only browser with CSS Bugs
Every CSS developer has probably come across the double-margin float bug, the three-pixel text jog bug or the duplicate character bug at one stage or another. However all of these bugs revolve around Internet Explorer. I would like to know what are the most common bugs you experience on other browsers such as Safari, Firefox and Opera.
Courtesy of Andy Budd: -note: you have to read through the comments, this isn't a listing.
View CSS bugs found in common browsers
November 24, 2005
Web Content Accessibility Guidelines 2.0
It seems we are being left with less and less excuse for not making our web content accessible.
The Web Content Accessibility Guidelines (WCAG) Working Group has released Working Drafts of the Web Content Accessibility Guidelines 2.0 and HTML Techniques for WCAG 2.0 and a First Public Working Draft of Understanding WCAG 2.0. Following WCAG makes Web content more accessible to the vast majority of users, including people with disabilities and older users, using many different devices including a wide variety of assistive technology. Read about the Web Accessibility Initiative.
When finished, WCAG 2.0 will clarify what was vague in previous Web Accessibility Initiative (WAI) guidelines. It will also come with developer-friendly techniques and glosses, making accessibility easier to understand, and accessible markup easier to build into the sites we create.
Thanks to Jeff Zeldman for pointing to this.
November 09, 2005
Can a 3 year old teach you about web usability?
Anyone that follows Amanda Murphy's Xbox and SharePoint blog is probably seen many mentions and photos of "Arnold" her 3 year old nephew.
This story is about paying attention to habits and learning usability by seeing it in action. Recently I was sitting at a computer with Arnold watching him browse the Disney website which I might add he found using MSN Seach himself (at 3 that is scary isn't it).
What I noticed was just how much kids rely on visuals to match things up. While browsing the site he actually made a comment about "No not that one, This one ..".
What he was referring to was the navigation on the page, more specifically the icons that were next to the items.
There are areas that have text based navigation and others that have small icons next to them. The one with the small icons he was able to associate with, knowing what disney characters etc. look like.
Based on the small block icons that represented movies etc. he was actually able to get to what he wanted on his own.
The moral of the story is you can learn usability by observing habits, even from a 3 year old.
When used properly a small visual representation / icon of a link can certainly boost the usability of a website, rather than browsing through text to search for something to click on we can see it, associate with it and get to the information faster and easier.
It's certainly something to think about. Take search engines for example. If searches for 'kids websites' displayed a small visual icon next to the results that they could see and associate with I'd put my bottom dollar on statistics showing that they would be much more likely to click that visual than click something that may be inappropriate.
October 25, 2005
Excellent article on website redesign versus re-aligning.
Absolutely fantastic article that delves into website design, more specifically redesign versus realigning. Definately worth a read.
Read Good Designers Redesign, Great Designers Realign by Cameron Moll
October 19, 2005
How usable is your Blog?
After reading Jakob Nielsen's "Weblog Usability: Top 10 Design Mistakes" I realised that even some of my most recent implementations are not up to snuff, namely:
Titles in all CAPS. Apparently this slows down reading by 10%. (This will be changed soon).
Links don't say where they go - I know I have done it several times in the past. Creating a link in the middle of a sentence that really doesn't even make sense. For example: Today when we were outside ...
Watching what you write: I am guilty of being what one might describe as a grammatical nightmare on my blog from time to time. Big no-no, you never know who's reading or what's being cached.
On a brighter note, some of my most recent additions did hit the list on the good side, for example;
Classics being buried: Many blogs tend to leave their 'classic blog posts' buried in an archive, how exactly is a user supposed to know that you posted something in May 2002? - This is of particular significance if your search engine isn't super. - Luckily this is exactly why I created the Projects section in the navigation menu.
No About Information, or Photo: People like to know who they are dealing with. I agree completely and that's why I added my "About" page to the navigation menu.
There are several things on the list, I'd suggest taking a look at it and rating your own blog. You can read the entire Jakob Nielsen's Weblogs: Top Design Mistakes article here.
October 17, 2005
Top 10 web design mistakes of 2005 (Jacob Nielsen)
I don't always agree with Jacob Nielsens hardnosed approach to web design and usability but one thing is certain he has very strong opinions, a lot of knowledge and experience and doesn't mind letting you know what he thinks.
You can read Jacon Nielsens "Top 10 web design mistakes of 2005" here
A must read for anyone using CSS (especially IE hacks)
Anyone that's been dealing a lot with CSS and IE knows the pains that go along with it. There has been countless hacks implemented along the way (many of which you can see on positioniseverything).
Anyone that has been using these hacks needs to be aware that with IE.7 on the horizon many of your implementations will be nullified and in some cases will cause your sites to break.
It's time for clean-up, and that's the reason the IE Team is calling on you to do so.
Start futureproofing your CSS today, below are a couple of must-reads for anyone that has been involved with CSS and hacks.
Using Conditional Comments to Futureproof your CSS
Craig Cook on swearing off hacks
October 14, 2005
Maintaining CSS
A good article on maintaining CSS.
September 30, 2005
Dreamweaver 8 and Web Standards
I noticed this article come through my blogs.
If you're reading this article, you probably already have an interest in the subject of "Web standards," and are curious about the application of standards in a site that's built with Dreamweaver.
Perhaps you already have an understanding of Web standards, but you're not sure how to use Dreamweaver to create compliant code. Or perhaps you're a Dreamweaver user who wants to comply with Web standards, use CSS more extensively, and produce more accessible documents. Either way, this article has the answers you need: it will show you how work to Web standards using Dreamweaver.
This article is actually excerpted from SitePoint's new release, Build Your Own Standards Compliant Website Using Dreamweaver 8, by Rachel Andrew. This book shows you, step-by-step, how to develop a standards compliant Website using XHTML Strict markup and CSS. With this book, you can swiftly and successfully develop attractive, functional sites that conform to Section 508 legislation, and pass the WAI accessibility guidelines with a Triple A rating, using the extensive capabilities of Dreamweaver 8. As always, you can download this information in pdf format, if you'd rather read it offline.
As we'll discover in the course of this chapter, there are excellent commercial reasons why sites should be developed to meet Web standards. The decision to adopt Web standards shouldn't be about jumping on a bandwagon, or keeping up with the latest Web development fashion. It's about producing good quality work, and knowing that your development approach will benefit your clients or employers as well as site visitors.
Web Standards Defined
As we'll be concerned with Web standards throughout this book, let's take a moment to clarify exactly what we're talking about.
Web standards are specifications that direct the use of development languages on the Web, and are set by the World Wide Web Consortium (or W3C). These specifications cover languages such as HTML, XHTML, and CSS, along with a range of other languages, such as MathML, a markup language designed to represent mathematical equations, that you might come across if you have a specific need. The W3C also publishes the Web Content Accessibility Guidelines (WCAG)—recommendations that address the accessibility of Web pages—via the Web Accessibility Initiative (WAI).
August 24, 2005
CSS Trilogy
Colly Logic - A three part post.
August 23, 2005
A brand new ALA
A brand new ALA (A List Apart). Brought to you by some of the biggest names in Standards like Zeldman, Meyer, Benjamin and Santa Maria. With these four collaborating you know it has to be good.
A new server, new publishing system - Powered by Ruby on Rails.
Definately a site worthy of your start page(s).
August 22, 2005
A good read for CSS enthusiasts.
This is an article worth reading.
August 09, 2005
Microsoft, IE7, Flame's and Praises
After reading a dozen or more posts recently on Microsoft's direction with IE7 and the apparent hard-nosed opinions of many I decided to write a post of my own.
I will start by saying I'm not sitting on either side of the fence here, while I do a lot of work with Microsoft Technologies such as SharePoint I also 'use' FireFox and happen to love it. I am also a huge advocate of web-standards and CSS based design.
That being said I am not overly surprised but usually disappointed in the premature ill-informed and one-sided blog posts that I have been reading.
This may turn to ranting from time to time, but I'll try and keep things on track as much as possible.
Let's start off with the very basics. I don't want to get into a flame war but let's be realistic. The 'market-share' has been dominated by Internet Explorer for several years now.
What does that mean exactly? - Well that means that the majority of people browsing internet are doing so using the Internet Explorer browser from Microsoft.
If we break that down a little and start to look at the black-and-white of the matter we would understand that that also means that the majority of websites on the internet are also geared towards IE. (Is that right? No ... but it is what it is).
These sites include everything from your personal websites to fortune500 corporate intranets and ecommerce websites. Many of these websites are churning through millions of dollars in sales annually based on their websites.
Getting back to the topic, if Microsoft was to simply forget everything and do what the hard-nosed standards developers want there is a fairly good chance that other things would break. This in turn would make websites break.
You can see where we are going here ... In the end you would end up with a bagillion angry retailers, vendors, consumers and the list goes on and on ...
Let's also not forget the fact that it was us as developers and our constant 'gimee gimee' syndrome that put Internet Explorer in the position it's currently in.
Obviously we asked for a lot of what's currently in Internet Explorer and obviously we liked it considering the market-share. Now that something more standards based comes out it seems developers are jumping all over Microsoft about CSS and completely forgetting the backwards-compatibility that they absolutely 'have' to have.
Firefox again I (personally) feel is a wonderful browser, I enjoy it on a daily basis, but it has a much smaller market-share and can afford to get away with a lot of those things that Microsoft simply cannot.
I am all for standards, better CSS support would make my job a lot more enjoyable but it is what it is.
Now that we have that out of the way let's take a little closer look at how things seem to be moving for FireFox.
Personally I think it's tapped too much into a niche market, and I fear it's going to simply pigeon-hole itself into a 'cult-like' developer market and that would be a real pity because it's a fabulous browser.
Sure developers love it right now because it's new, it has great support, and it's nice moving forward but you can't possibly think that the 100 million websites using table-based-ie-geared websites are going to disappear overnight.
While I agree, it's our job as developers to evangelize the use of standards, css-design and great products such as FireFox it's a pity to see such angry short minded posts about how "IE Sucks", or "CSS Support Avoided" the list goes on and on.
What we need is to come together and use some common sense. Do any of you posting "Microsoft Sucks" comments really think anyone is going to take you seriously? They're not.
On that note its short-minded posts such as these that are causing me to write this post:
http://www.siliconvalleysleuth.com/2005/08/internet_explor.html
A small blurb from the post;
"Internet Explorer Gives Standards the Finger" ?
Testers of the first beta that was released last week report a slew of problems with applications. And proving that the old monopolistic Microsoft still hasn't completely faded away, the company won't fully support today's open web standards.
Ok, slow down …
Have we forgotten what "Beta" means? Or are we still stomping our feel and uttering trash at Microsoft 'just because they're Microsoft'.
In case anyone has been living in a hole these last few months, Microsoft is going to 'great lengths' to try and satisfy the requests we have for fixes, and moving forward features
You don't have to take my word for it though, your welcome to take the word of possibly the biggest advocate south of the w3c for web-standards.
The iron voice in standards, an organization co-founded by my personal web hero, Mr. Jeffrey Zeldman.
Yes that organization is none other than "WaSP". The Web Standards Project one of the biggest voices for standards 'period'.
Microsoft is collaborating with WaSP to hopefully fix as much as they can in regards to standards, bugs, fixes and the like.
Take a look at a couple of posts, learn the facts, and then come back to the table with a little more information before kicking and screaming people, seriously.
A couple of informative posts:
WaSP and Microsoft Collaborate on Standards
Anyone that's been paying attention to bugs, standards and the overall movement of mainstream accessible code is very familiar with sites such as Position is Everything, or Quirksmode, sites which did an excellent job finding, and documenting bugs found.
Then there were the top 10 lists floating around from developers,
Well it seems Microsoft was listening, and is working to fix as many of these as possible and in fact has already addressed most of them, again this doesn't seem like Microsoft giving standards the finger to me. (Note: A lot of these will not be seen until beta2)
Sure in the end it will not pass the "very rigorous" Acid2 test but you cannot say that they're not taking good strides in the right direction.
Here are some of the big ones that I'm sure you are all too familiar with:
Peekaboo bug
Guillotine bug
Duplicate Character bug
Border Chaos
No Scroll bug
3 Pixel Text Jog
Magic Creeping Text bug
Bottom Margin bug on Hover
Losing the ability to highlight text under the top border
IE/Win Line-height bug
Double Float Margin Bug
Quirky Percentages in IE
Duplicate indent
Moving viewport scrollbar outside HTML borders
1 px border style
Disappearing List-background
Fix width:auto
HTML 4.01 ABBR tag
Improved (though not yet perfect) -object- fallback
CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
CSS 2.1 Fixed positioning
Alpha channel in PNG images
Fix :hover on all elements
Background-attachment: fixed on all elements not just body
You can read the entire post here on the bugs here.
So that just about brings us to the end of this long painful post, again this isn't meant as a rip to anyone, it's not meant to turn into a flame war, it's simply stating both sides of the story.
If you come to the table with short-sighted and premature information you should expect several people to offer a little more.
To end this off I would like to remind those that have been slamming Microsoft that they 'brought CSS' to the main-stream, and that there are often much larger factors in making browser decisions than our hard-nosed views on standards.
That being said there is still a lot of work to be done, and to all those that are out there advocating standards and CSS the right way, people like Jeff Zelman, Eric Meyer, Holly Holzshlag in conjunction with groups like WaSP, W3C and outlets like Quirksmode and Position is Everything keep up the good work your voices lead the way to a better internet for everyone.
To those that spend countless hours drudging up ways to flame Microsoft, and come to the table ill prepared you should at least take into account there are much better ways to have your voices heard.
If you made it this far you must really love the internet.
Again, this post isn't mean to take sides, it's merely trying to put another point of view across.
June 01, 2005
Zeldman celebrates 10 years
Jeff Zeldman celebrates 10 years ...
In March of 1995, two friends/colleagues (1 2) and I launched our first commercial web production – a movie site for Warner Bros. Not only was it our first success, it was also our first brush with HTML. Staying awake all night to get batmanforever.com launched, I at last knew what I wanted to do when I grew up.
