TechKnack: html

Showing posts with label html. Show all posts

May 11, 2008

Lists, Useful For More Than Menus

Add this post to Del.icio.us. Del.icio.us (0 saved)

I came across a page recently that uses ordered lists for the entire layout -- not just the menu. The entire layout is in two parts: one ordered list for the header/body/footer, and another ordered list for the three columns inside the body.

I find this to be an interesting approach to multi-column layouts. Better yet, the author claims that it works in all major browsers on the three major operating systems.

However, are ordered lists the proper elements to use in this case? Is it "semantically correct"? What about unordered versus ordered lists? It'd be terribly simple to convert the layout to work with unordered lists, but which is more "correct".

Regardless of correctness, though, "no floats, no divs, no clears" is rather appealing.

April 9, 2008

Do we really need the br element?

Add this post to Del.icio.us. Del.icio.us (0 saved)

Do we really need the lowly element? Apparently the W3C thinks so, with HTML5 containing the element. I mean, seriously, what does it do that a span styled with display:block; can't?

The last two times I've seen it used were in articles about creating a tableless photo gallery and making a CSS block nav menu. In both instances, the br was used to drop down the descriptive text to the next line. In both instances, a span surrounding the descriptive text, and with its display set to block, does the exact same thing.

I suppose an argument could be made about users with CSS turned off. In my opinion, though, if you have CSS turned off, you're willing to deal with a few minor inconveniences. If you're that worried about them, throw in a space before the span for readability. And if you really insist on giving them the extra lines of text -- there's always the naturally-block-level <div>.

And what about screenreaders? I doubt they'd be affected either way (it is whitespace, after all -- right?), but I really have no clue. Perhaps someone who uses a screenreader could tell me, after chewing me out about my own blog's (actually Blogger's) screenreader-friendliness. :o

April 4, 2008

Promote Standards Awareness with CSS Naked

Add this post to Del.icio.us. Del.icio.us (0 saved)

CSS Naked is a standards-awareness initiative led/organized by Dustin Diaz. On the specified date, April 9th, all participating websites will strip their sites of their CSS, allowing the world to see the underlying clean-code usability:

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good 'ol play on words. It's time to show off your <body>.

While I would love to participate in this, I wouldn't recommend it for Blogger users. The building blocks of Blogger blogs, widgets, produce all sort of irrelevant divs and such that are used exclusively as CSS hooks. Aside from the fact that the underlying code is NOT semantic, disabling styles on Blogger sites (well, this one anyway) is NOT pretty (or, for that matter, usable). If you must see the results of such an inadvisable act as disabling CSS, you can (using FireFox) go to View -> Page Style -> No Style. This will disable styles for the current page (or the current tab, I'm not exactly sure).

So, to reverse Dustin's little play on words -- sorry, you don't get to see my <body> :P

April 1, 2008

Got Mad Coding Skills?

Add this post to Del.icio.us. Del.icio.us (0 saved)

Think you got what it takes to slice up a PSD file into a valid and usable (X)HTML template? Then check out CSS Off, a contest that gives you the opportunity to do just that. At one minute past midnight CST on April 5, a PSD file will be uploaded for contestants to download. Contestants will have up to 24 hours to submit their completed entry.

Don't have Photoshop? Check out the GIMP! I'm hoping that the PSD file is GIMP-compatible. You could try to convert it one way (using an online service) or another (directly in the GIMP),but there's always the issue of unsupported layer effects getting messed up.

And, no, this is not an AFD trick. At least, I hope it isn't...

March 25, 2008

Faviconize your blog

Add this post to Del.icio.us. Del.icio.us (0 saved)

Favicons. Those little icons that appear on FireFox's tabs, IE's favorites bar, and various other places in web-related applications. Simple little icons, no larger than 32 pixels square, yet they are a part of your site's identity.

Why have a favicon? Kiseki.co.uk puts it well:

A favicon can help people identify your site quickly and easily in, say, a long list of bookmarks....It is only a small detail, but it can be useful for people to recognise your site.

A favicon is an instant visual cue that, when a visitor sees it, conjures your website in their minds. As AbstractPromotion.com says, "If you don’t have a favicon, your users will forget about you".

Making a favicon is fairly straightforward: churn up your creative juices, fire up the gimp, create a new 16x16px or 32x32px image, brand away, save as an ICO, GIF, or PNG file, then upload the image to a file hosting site. I personally enjoy Village Photos' free account, though there's always PhotoBucket, ImageShack, or Google's own Picasa service. After the image is web-accessible, add the following lines to the <head> section of your blog HTML template: <link href='http://host.com/path/to/image.png' rel='shortcut icon' type='image/png' /> <link href='http://host.com/path/to/image.png' rel='icon' type='image/png' /> And, voila! You should obviously replace the href and type attributes to fit your situation. For type, use image/png for PNG, image/gif for GIF, and image/ico for ICO, in case you were wondering :)

Why two nigh-identical tags? To answer a question with a question, what browser has, in decades past, caused us all so much pain? That's right. It seems that older versions of IE need the "shortcut icon" link just to see the favicon image...whether or not they decide to display it.

According to the W3C, the rel attribute's value should, "officially", be "icon". Interestingly, they also recommend putting a "profile" attribute in the <head> tag, "to define what the ["icon"] value means". Their version: <head profile="http://www.w3.org/2005/10/profile"> <link rel="icon" type="image/png" href="/somewhere/myicon.png" /> Though I don't know for sure how well this will make IE6 behave...if such a thing is indeed possible.

March 16, 2008

Browsershots: Mass Website Testing

Add this post to Del.icio.us. Del.icio.us (0 saved)

In the world of Web 2.0, cross-browser compatibility is a necessary evil. With different browsers, different versions of different browsers, and different operating systems with different versions of different browsers, you can rarely predict how your visitor might be viewing your site (unless, of course, you're developing for a tightly controlled intranet, where everyone uses the same OS and browser). Unfortunately, it's rarely, if ever, possible or sensible to test your site on even the major browser/OS combinations, let alone every conceivable combination.

Enter BrowserShots (currently version 0.4 beta 2). What is browsershots?

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

The process is very simple: point your browser to BrowserShots.org, enter your website's URL, check off the browser/OS combinations you want to check it in (there are a LOT of choices!), set any optional settings, and click "submit". Optional settings include screen size, color depth, javascript support, java support, and flash support. Once you click submit, your requests are placed in a queue. In my experience, the wait time to receive all requested snapshots (mainly using the top browsers on all three platforms) varies between 3 minutes (last night) and 30 minutes (estimated time as I write this post :) ), though for $15 (10€), you can get priority processing. The snapshots are available for 30min (or more, if you want to extend it), and can be viewed as they are taken (you don't have to wait for the whole batch to finish). Refresh your "Website Overview" page to see screenshots as they are uploaded. On the Website overview page, you also have the opportunity to download a zip file containing all snapshots that have been taken so far.

Once a screenshot has been taken and uploaded, you can click on its thumbnail to view the details of the browser and OS the snap was taken on, as well as a full-size screenshot of the page. Details include browser, engine, javascript capabilities, java capabilities, flash capabilities; "factory", sponsor, hardware, and OS of the machine that took that snapshot; dimensions and file size of the screenshot; and various timestamps related to the screenshot.

Granted, you can't check website behavior (javascript animations, interactions, and such), but for those without access to different operating systems and different browsers, this is a very useful tool for cross-browser compatibility checking.

Browser Shots

March 13, 2008

Blue Spring Blogger template

Add this post to Del.icio.us. Del.icio.us (0 saved)

Over my spring break, I decided to spruce up my blog a bit (read: redesign). Unfortunately, I am design-challenged and too cheap to pay someone to create a new design for me. So I started perusing the designs available at OSWD, and found a nice template called Blue Spring.

After finding, downloading, and familiarizing myself with the template's HTML and CSS, I set about hacking it into Blogger XML submission. It was mostly an effort of looking at my existing template, as well as the generated HTML, and revamping the CSS to support the structure produced by the Blogger widgets (mainly the Blog and Header widgets).

After combining HTML and CSS into one XML file and making sure the CSS supported all the widgets one might want in the sidebar, I set about "making it customizable". Not everyone likes to muck about in the CSS code -- some (most?) prefer to use Blogger's "Fonts and Colors" tab to do what they can. Supporting this was a simple matter of pulling out all the major colors and fonts into skin variables. After that, I made sure that all the widget sections had the proper settings.

Now, a "how to" on usage. In the original template, there were designated spots above and below the header for links, namely "navigation" and "other". I have left these as two empty sections, with a limit of one widget each. They are optimized for the "Link List" widget, but, as you can see by the search bar I've placed at the top, you may be able to fit other widgets in them. Beware when putting something other than a LinkList widget in the bottom slot, though -- it can seriously mess up your layout (and can usually be fixed by removing the widget).

The "Page Elements" layout is slightly a mess; as I have no clue how to modify the XML file to fix this -- without melting the layout -- you'll just have to deal with it :) The "edit" link for the top LinkList section is hidden by the logo. To get around this, move the widget to the lower slot (or a slot on the sidebar), edit it, then move it back.

Before uploading the template to your blog, be sure to upload the images to a hosting service, and replace all images used in the template with the appropriate URLs. Searching the XML file for "images/" will show you the images to be replaced. If you have a favicon for your blog, find the following section:  Uncomment it, and replace "#favicon-url-here" with the URL of your favicon. If you want a small RSS icon to the right of the bottom LinkList section, find this section: <!-- span id='feedlink'> <a href='#your-rss-feed-here'> <img alt='Subscribe' src='images/rss.gif' /> </a>  Uncomment it, and replace "#your-rss-feed-here" with the URL of the feed you want visitors to subscribe to.

As the devil is in the details, you will, more likely than not, come across issues if you try to add custom or third-party code to the sidebar (or any other part of the template, for that matter). The CSS has been tweaked to make most of the official Blogger widgets look good; anything unofficial is just that, unofficial. Please keep in mind that I am not your personal HelpDesk, nor will I likely have time to help everyone "fix" their blog. There are Blogger help forums, as well as HTML/CSS help forums, that will be more than happy to help you, if you ask.

For you web standardistas out there, I don't know if the Blogger engine puts out standards-compliant code or not, but almost any Bloger blog you try to validate will turn out hundreds of errors :) as such, I didn't quite worry about making the template standards-compliant. If it is, it's completely on accident :P The theme does NOT render properly on IE6-. Seems to work fine on IE7, IE8 is unknown.

As always, with anything remotely related to technology, BACKUP!!! Go to your blog's layout, select the "Edit HTML" tab, and click the "Download Full Template" link. Save the XML file to your computer, so you have a backup to restore from if you prefer your old template.

The template's footer (and some comments in the CSS) credits the designer, DCarter, and the one who converted it into a template (Templater?), me. If you do use this template, please leave this info intact.

[ 5/11/08 ] Update: Turns out the first version would break when text size was increased, if you had menu items. Fixed by adding overflow:hidden; to the first #main-wrapper declaration. ~~Still doesn't work in IE6.~~ Also added overflow:hidden; to the #sidebar declaration, and the layout now mostly works in IE6 (there are still a few quirks, but it's usable). The sidebar is strangely displaced in IE5.01 and slightly off in IE5.5 and IE4.01 according to browsershots.org, but the template now supports "all major browsers on all major operating systems".

Additional links:
Download the Blogger template
OSWD: Blue Spring template
Blue Spring WordPress template
Open Source Web Design
The header image I use

This template featured at the The Blogger Templates

March 10, 2008

Super-target your AdSense ads

Add this post to Del.icio.us. Del.icio.us (0 saved)

While perusing the AdSense Optimization Tips, I came across a section on Blogtimizing, optimizing ad placement on a blog. That article, however, linked to the more interesting concept of section targeting - the idea of super-targeting your ads to a specific section of content, rather than all content on the page (which, on a blog, includes navigation links, blog title, sidebar content, and all sorts of non-topic-specific junk). From the section targeting page:

Section targeting allows you to suggest sections of your text and HTML content that you'd like us to emphasize...when matching ads to your site's content. By providing us with your suggestions, you can assist us in improving your ad targeting. We recommend that only those familiar with HTML attempt to implement section targeting.

To implement section targeting, you'll need to add a set of special HTML comment tags to your code. These tags will mark the beginning and end of whichever section(s) you'd like to emphasize...for ad targeting.

The HTML tags to emphasize a page section take the following format:

So, essentially, to super-target your ads, just wrap the relevant content in these special HTML comment tags. For Blogger blogs using the XML templates, however, it's a bit trickier. More likely than not, you'll want to target your ads to the content of your blog posts. To do so, it would appear obvious to wrap the <data:post.body/> Blogger tag with the appropriate comment tags, like so:  <data:post.body/>  The problem is, Blogger's template engine strips out all HTML comments contained within <b:includable> tags. Fortunately, Blogger themselves have a solution to this issue: <data:adStart/> and <data:adEnd/>: <data:adStart/> <data:post.body/> <data:adEnd/> These tags will be expanded by Blogger into the desired HTML comments, allowing you to super-target your AdSense ads.

Beware of being too specific in your targeting, however. Google has put in measures against "keyword spamming" your ads:

Include a significant amount of content within the section targeting tags; including insufficient content may result in less relevant ads or PSAs. Please also be sure only to emphasize significant sections of your site's relevant content, since it's against our program policies to the ad targeting to result in ads that are not relevant to the content of your pages.

That means no exclusively targeting your post titles or post tags.

Also of use are the "ignore tags" that go hand-in-hand with the targeting tags:

You can also designate sections you'd like to have ignored by adding a (weight=ignore) to the starting tag:

This is good for topic-irrelevant content that appears on pages, specifically the content-ridden sidebar(s) that almost every Blogger blog has. Simply wrap the sidebar div in these tags to de-emphasize its content.

The way I set up my ads was to enable per-post ads (blog layout -> page elements -> click "edit" on the "Blog Posts" element -> check "Show ads between posts"), then move (only!) the <data:adCode/> line to the desired position within my post template, after the fashion of an article on Woork. I then removed all Blogger-added adStart and adEnd tags, and placed my own around my <data:post.body/> line, as specified above. I've found it works rather well on the individual posts' pages, though it seems to get a little confused on the front page. This is understandable, since there are multiple targeted content sections to process on the homepage, all with different content.

After specifying the targeted sections, I wrapped my sidebar content in the ignore tags. In my template HTML (no need to "expand widget templates"), I searched for the sidebar section: <b:section class='sidebar' id='sidebar' preferred='no'> ...all the various widgets... </b:section> And wrapped the entire section in the ignore tags:  <b:section class='sidebar' id='sidebar' preferred='no'> ...all the various widgets... </b:section>  And, voila, ads that are more relevant to my content! Enjoy!

February 1, 2008

A well-designed website: many things to many people

Add this post to Del.icio.us. Del.icio.us (0 saved)

In my Advanced Web Design class at school, my professor asked us to post what we thought defined a well-designed website. I thought I'd share my answer here. I'm sure he wasn't expecting anything so involved as this :D

"What makes a well-designed website?" That's quite a question.

As a dabbler in web design, I would say a well-designed website is "good-looking". It should look somewhat elegant. The "Web 2.0 style" -- glossy buttons, spacious openness, minimalistic simplicity, and copious use of gradients -- comes to mind. I can't think of any sites that strictly adhere to all these points, but DynamicDrive is a good-looking site.

As an HCI-minded individual, a well-designed website is made by more than its layout. A well-designed website makes it obvious what the site's purpose is, what can be done on the site, how to go about doing it, etc. Again, simplicity is king, and clutter is sin. Content is easy to skim and understand. The layout does not make it difficult to navigate. If a feature breaks, the site will either gently tell the user so, and make it easy for the user to report the breakage; or the site will function in such a way that the user doesn't notice the difference, and the developer will be alerted. I think Digg is a fairly usable, well-designed site.

As a web developer at heart, a well-designed website is all in the code. Separation of structure, content, presentation, and functionality is something to be strived for. It should be built as follows:

First build a mock page (with the final site's design in mind) which contains either mock or real content, and only structure-oriented HTML markup. Presentational markup is sin :) This page is not design-oriented; its only purpose is to structure the page's content in a semantically meaningful way. Any tags that do not directly relate to the structure and/or content of the page should be struck down with a flaming sword of death. Organize things in such a ay that they flow logically along the page.
Develop the CSS in an externally linked file. Introduce any design-specific images through the CSS, if possible (and it should be possible). Strive for cross-browser compatibility within the CSS, making the site look as similar as possible from one browser to the next. If any additional markup is required for the design of the site, the CSS should be developed to make the site look good without it; if still necessary, the necessary markup can be added through the next step. Use what you have to get what you want.
Develop the functionality (using JavaScript) in another externally linked file. Nonintrusive javascript should be used, progressively enhancing the site after it has loaded. Nonintrusive javascript should also be used to add any necessary additional markup to be used by the CSS. Again, use what you have to get what you want.
If possible, convert the finished page layout into a template, and use a server-side language to fill it with dynamic content.
Finally, when all is said and done, pull up the page in a browser, and make sure everything works. Turn off javascript, refresh, and make sure everything works. Turn off css, refresh, and make sure everything works. Then browse the web for a while....and see if it works :)

According to these steps, a well-designed website will work across browsers, degrade gracefully in older browsers, respect the wishes of those with Javascript turned off. There are lots of websites that use this methodology (using only semantically-meaningful html, etc). One well-designed website in this case is Dynamix Labs. It doesn't seem that they use any javascript, and if you turn off CSS, the site is still very readable.

As a user, I want information, and I want simplicity in doing what I want to do. A lot of the time, I want information that I can talk about in my blog. I use google as my main go-to source for finding things. If I find a site that gives me good information on a regular basis, I want to be able to subscribe to its RSS feed, or something similar. If I find a site that I come back to on a regular basis (whether I be forced to, or do so of my own free will), I want to be able to customize my experience on that site. I want to be able to change the colors, the landing page content; anything and (usually) everything, I want to customize it to better serve my way of doing things.
One service that I use on a daily basis is Google Reader (you'll have to sign in to your google account), a web-based RSS aggregator. It features "folders" that you can use to organize your feeds, drag-and-drop re-ordering of feeds, and very easy-to-use methods of subscribing and unsubscribing from feeds. Another service that I use regularly is Netvouz, a social bookmarking site. I chose Netvouz over other bookmarking sites because of its folder organization feature. You can organize your bookmarks according to category (and sub-category) and make certain bookmarks private. It's also easy to delete or edit my existing bookmarks, and really easy to add new bookmarks using the Netvouz firefox extension.

I must say, though, that my most frequently used and favorite thing is FireFox. It is customizable in (almost) every way possible; its functionality is infinitely extendable through extensions, which anyone familiar with XML and Javascript can write. It has excellent support for standards; the upcoming FireFox 3 is said to have passed the Acid2 test, which is huge for web developers.

As you can see, from my point(s) of view, a well designed website can and should be many things to many different people.

So, what do you think? What makes a website "well-designed"? What are some examples of well-designed websites?

Note: References to certain things "being sin" should not be taken literally. Putting presentational markup on your page will not send you to hell. Nor will avoiding clutter send you to heaven. These are just my personal pet peeves :)

January 14, 2008

CSS trick - two background images

Add this post to Del.icio.us. Del.icio.us (0 saved)

While using what I'm sure is my own idea of progressive enhancement on a web page, I came across an interesting situation: I wanted two background images, rather than one. My first background would be a general tiled image, to give the site's background a nice texture; the second a vertically-repeated image on the left-hand side, to be used in conjunction with a floating nav menu.

Now, while CSS3 is purported to support up to 8 background images -- no doubt to make rounded corners and other fancy borders easier for coders -- the problem is that, to the best of my knowledge, IE and FF don't yet support this feature. Besides that, IE6 and lower never will. And I'm not even sure this feature will be usable for what I want, anyway.

So, I had to have (ok, really, really wanted) the left-hand background, and, IMO, the page looked too bland without some texture on the general background. As I already had the structure of the page decided upon (and, as such, couldn't modify it for presentational purposes), I started looking at what I had to work with. There was obviously the body tag, but there was nothing much else to work with...besides the html tag itself.

I already had the vertical background applied to the body tag, so I started by removing the background color from body (so the html background could show through). I then applied the same background color and the new background image to the html tag:


html {
background:#000 url("tiled.png");
}

body {
background:url("vertical.gif") repeat-y;
background-position:75px top;
}

And, whaddaya know, it worked! Unfortunately, it seems that declaring the html element's style in my CSS changes the basic behavior of the body element, making it more like a containing div. The result: there's a margin around the content, and the vertical background only goes to the end of the content. Yuck.

So, the first thing to do is fix the ugly margin. Easy enough: set body's margin to 0 , as well as body's padding for good measure. Next, fix body's background. Currently, the background stops at the end of the content area. Not a problem if the content causes the window to scroll, but not pretty if there's not enough content. I figure this should be easy enough to fix, just set body's height to 100%. This works well enough...in IE6. Strangely, FireFox 2 doesn't take so kindly to it. Changing the body's height to "auto" works alright, for both browsers, for overflowing content, but not for short content. A height of "auto" and a min-height of 100% works excellently in FireFox 2...but, again, IE6 doesn't know how to treat min-height. Good grief.

So, I enter the realm of CSS hacks. Using a min-height hack combined with advanced CSS selectors that aren't understood by IE6 and less, I combine the methods that worked for each browser into a series of rules that are "browser-filtered" - one browser uses one method, while another browser uses the next.


html {
background:#000 url("tiled.png");
/* Height is 100%, so the body can be 100% */
height:100%;
}

body {
background:url("vertical.gif") repeat-y;
background-position:75px top;
margin:0;
padding:0;
/* Height is 100%, so the tiled BG will tile all the way down
 the page, not just as far down as the page's content
 (when the content's height is less than the window's height) */
 height:100%;
}
/*
Hackety-hack-hack...
FF2, with the above code, will only display the repeat-y image for as
 high as the window's viewport is; higher content (upon
 scrolling) will not have the bg.
This "hack" makes the tiled background work properly in FF2.
This type of "advanced selector" is not understood by IE6...dunno
 'bout IE7.
*/
html>body {
 min-height:100%;
 height:auto;
}

The common html code works fine on both browsers. It's only the body's height issue that needs resolved. The IE6 code is given in the body code; both browsers will see this and understand it. However, when they get to the html>body statement, IE6 says "wha??" and drops the rule, whereas FF2 says "ok..." and applies the appropriate styles to the body tag, overriding the earlier-mentioned height.

Google Search

TechKnack

Menubar

We've moved!

May 11, 2008

Lists, Useful For More Than Menus

April 9, 2008

Do we really need the br element?

April 4, 2008

Promote Standards Awareness with CSS Naked

April 1, 2008

Got Mad Coding Skills?

March 25, 2008

Faviconize your blog

March 16, 2008

Browsershots: Mass Website Testing

March 13, 2008

Blue Spring Blogger template

March 10, 2008

Super-target your AdSense ads

February 1, 2008

A well-designed website: many things to many people

January 14, 2008

CSS trick - two background images

Search

Feedables

Most Popular Posts

Recent Posts

Find me on...

Label Cloud

Archive