Get it All
Together

I think that there is a natural and inevitable tension in web design between the designer’s desire to control how information looks and the constraints of browser vagaries and inconsistencies. Those of us who have been designers for a while already know the story: browsers built with flexibility and error-correction in mind created a web world where even playing by the rules doesn’t always mean getting what you want from your design out of all browsers. The solution in many quarters of the Internet – and this little website, no less so – has been to fix the borders of the website and eliminate the elasticity of HTML as a possible threat to consistency. Recently, however, I’ve begun to think differently on the issue of elastic web design and thought I’d post a little some of my ruminations on the subject.

It is an irony that, as the Internet and computers have grown up and evolved together, web design seems to have grown apart from its parent technologies. “In the Beginning…” as the phrase goes, web pages were nothing more than a digital expression of standard print text. Browsers were meant to “browse” documents like those out of an online library that were largely text-only works and HTML was designed to be fluid in its rendering. Pages were expected to be able to flow across the screen…. all 640×480 pixels of it.

Computers have gained in complexity since then. Internet web pages have gained enormously. Most experts credit each with pushing the other: computers would not be what they are today without the Internet and the Internet could not exist in its current state without computers and Internet connections that could support it. As the web has become more and more of a visual, graphical medium, it has become more and more commonplace to see sites designed with fixed widths. Some of the biggest names on the Internet, from Twitter to Yahoo to FaceBook, all use fixed width pages to deliver their content to their customers.

But the reality of the fixed-width page is that it is now directly at odds with the current state of technology in computers, and has been at odds with it for some time. Whereas in the past, monitors all used the exact same proportional dimensions, today monitors can be quite different from system to system. I’m currently writing this post on a computer with a 20″ widescreen monitor, 1600×900 resolution. My wife’s computer behind me is a standard-size monitor running at 1024×768, the resolution generally most common on the Internet and the one most commonly designed for. Should a web page really demand a single proportion? A single resolution?  Does that thinking really make sense given the huge variation of screen sizes and resolutions currently available? Why would an Internet that has always pushed the bounds of what my computer does leave me hanging with all that wasted graphical space? When I view FaceBook, I get the impression that I wasted a third of my money on extra screen I’m not using.

And so while this specific blog does not currently match my new thinking, the home page of this website definitely reflects what I consider to be the next new reality in web design: that designers aught not to be responsible for robbing their viewers of the monitor space they paid so much money for. I think it’s time to open up the margins of our web pages and find new ways to express our creativity that conform to the new world. Creating bigger pages with wider margins is not adequate; the real answer is to build for fluidity.

My home page is built around the idea of the two major graphical elements of the page seeming to flow from outside the margins of the screen. The white curvy thing with the blue border and the grey box both extend beyond the page. But if you prefer a border to your site – they’re nice for adding a bit of null-element color to make the content pop – then the choice is to use a percentage width or else a block main element with both left and right margins (margin: 5px 20px; for example). There are many more solutions available for the ingenious web designer.

Fixed widths and backgrounds are not going away. But I think that if you consider it, you will come to the conclusion that the courteous use of the space given to you by your audience makes good usability sense and good viewer relationship sense.

Search Engine Optimization gurus and tourists alike understand that the semantic markup of webpages is the single most important aspect of long-term, site-wide optimization of web pages. If the bot can’t read it; if the bot doesn’t understand its significance, then the bot won’t properly index it. And making sure that you use <h1, 2, 3, 4> tags to highlight important concepts in an article is a key to calling attention to your content.

So, why not go the extra mile and make sure your headings are as stand-out to your audience as they are to those bots you’re always trying to attract? This article is just a quick tip (or suggestion, if you like) for making your content a little more clear by letting your headings break outside the borders of your articles:

This is an example of breakout headings, standing off the left margin.

This is an example of breakout headings, standing off the left margin.

As you can see from this sample of one of my blogs, there are three levels of headings represented. The H1 tag is in the title, and as you can see, it is about forty pixels farther to the left than the rest of the text. The H2 and 3 tags are about thirty pixels from the left side. To the less experienced designer, this idea may at first seem wasteful: there’s a very large margin to the left of the main body of text that could be used up. To many, it may even seem like it has to be used up.

But often the most important thing about layout is not what you put on the page; rather, it is the space you leave alone. By leaving space to the left margin of the text, we open up the page and prevent it from looking “claustrophobic” and crowded. The same is achieved by keeping a solid distance between the headings and the text. Further, the text is fully justified to keep the left and right margins as consistent as possible. This adds predictability to the space which lessens eye strain and brain processing, making the text much more readable, overall.

And then of course, there is the indentation of the headings! By making our headings stand out from the rest of the text, we create sign posts for our audience. Once again, this is designed to affect to changes on our content: one is to allow readers to more easily find the content they’re looking for and understand the organization of our data; the second is to lessen eye strain associated with doing this sort of scanning process, which is quite common when reading on the web.

Getting Your Breakout Headings in WordPress:

There are lots of ways of going about getting this look in a WordPress template. One would be to make your <p> tags always have a margin of 40px. The problem with this is if you want to use paragraphs anywhere else but in the body of a post, you may not like the effect and be forced to write another CSS class to compensate. You create a .postbody p {} tag, but here again, if you need to make adjustments to your page, you’re going to run into problems. Plus, what do you do about the<blockquote><ul><ol> and <embed> tags? Separate entries for each?

The best way to apply a margin is to apply it universally to the container itself, hypothetically .postbody. If you do this, how do you get the indented headings?

The answer is to apply negative margins to the headings:
[code lang=”css”]
.postbody {
display: block;
margin-left: 40px;
}

.postbody h1 {
margin-left: -40px;
}

.postbody h2, .postbody h3, .postbody h4, .postbody h5 {
margin-left: -30px
}
[/code]
Now you have your universal margin setup to be consistent across all elements of your posts, and only apply the breakout CSS to the things you want to break out!

A rose by any other name would smell as sweet. And a web browser lacking basic web compliance by any other name would also smell.

With it’s release of Internet Explorer, Microsoft has once again heralded it’s intentions to make the Internet less than it could be. Not much has changed yet, despite Bill Gates’ departure.

I know it’s snarky and not constructive to say. But how long is Microsoft going to drag it’s feet on standards compliance for the web? IE8 is the first browser to be – by Microsoft’s estimation, at least – fully CSS2 compliant. That’s a nearly ten year old standard and most browsers are moving on to CSS3. Not that any of us can really use the CSS3 technology without going through backflips to support the perpetual legacy technology that is IE.

According to the IE8 home page, the big improvements in this new revision include a speed boost. Interesting, inasmuch as IE7 represented a huge step backward in performance. I call this a lateral move at best. They’re also touting IE’s ability to leverage RSS feeds. Here again, this is six or seven years old, nothing new.

Finally, Microsoft touts it’s security. Well, that’s just silly. Microsoft made the security gaps that made viruses so much a part of our lives and so far, their solutions have left much to be desired. Especially since their solutions to problems often involve more code, rather than fixed code; they paper over a security flaw with still more features, all of which necessarily have the potential to become security flaws themselves.

Internet Explorer and Microsoft Windows, generally, are regrettable facts of life for web developers. But in my private life, I’m more and more thankful to be running Ubuntu Linux, warts and all.

Of course, FireFox currently supports CSS rounded corners for DIVs, but sadly, the same cannot be said for IE.  As developers and designers, we have to either accept that some people will not get the full effects of our website, or else we have to use the old methods to achieve parity for all browsers.  This post is just to show you the easiest way to get the rounded corners effect in the old-school manner.

The big thing is to plan on how big you want your rounded corners to be.  The reason is that you will have to fight with setting top and bottom margins of the same size as your corner radius, or just accept that there will be some space there.  This easy way of going about things assumes you’ll be ok with a 12px radius and a 12px margin to match.  We’re going to make a DIV 580px wide by 200px tall.

Start by opening up Adobe Illustrator or whatever other vector graphic tool you usually use for thsi type of thing and make a box that is 100px tall and 580px wide.  Fill that box with the color of your non-bubbled background – that part of the web page that lies outside your bubble, in other words.  My background color is #FFFFEE.

On a new layer, create another box with rounded corners of 12px radius, in exactly the same size.  This new box should for the most part completely cover up the old box and should be the color you want the bubble to be.  We’re assuming you want no border, but if you do, you’ll probably want to play around with this example a bit to figure out how it’s going to work best for you.

Now, you should have an image that looks like this:

Example of the DIV bubble background.

Example of the DIV bubble background.

Next we need to setup our CSS rules.  Because we have a box with all four rounded corners, there’s no need to create or load a second image for our borders, but rather set it up like this:
[code lang=”css”]
#bubble_wrap {
width: 580px;
display: block;
}

#bubble_top {
display: block;
margin: 0px;
height: 20px;
background-image: url(/wp-content/themes/akitsu_home/img/feature_bubble.gif);
background-repeat: no-repeat;
background-position: top;
}

#bubble_bottom {
display: block;
clear:both;
margin: 0px;
height: 20px;
background-image: url(/wp-content/themes/akitsu_home/img/feature_bubble.gif);
background-repeat: no-repeat;
background-position: bottom;
}

#bubble_center {
display: block;
}[/code]
We can then assemble the pieces like this:
[code lang=”html”]
<div id="bubble_wrap">
<div id="bubble_top"></div>
<div id="bubble_center">
<p>content goes here</p></div>
<div id="bubble_bottom"></div>
</div>[/code]

If you’re like me, you like to have a fair amount of control in the way your websites look to the user. As you know, this is not always easy based on the way browers were meant to behave. Browsers were meant to allow differently-sized monitors and windows show the same content, and thus allow for a lot of proportional widths, with the page stretching and scaling to adjust to the different readers. But in these modern days, we can anticipate certain screen resolutions and many pages conform to a rigid width.

Keeping this width is actually quite important from design, usability and branding perspectives, as a matter of fact: my keeping pages a consistent width, we increase the chances that people recognize our pages as something unique (branding), we allow our users to be accustomed to the locations of key navigational components (usability) and we decrease the chances that something unexpected on the page will break the overall design (design).

However, there are very real problems with fixed-width pages that many novices encounter, making fixed width pages a real bear to deal with. I thought I’d take the time to discuss the reasons that – even in a fixed-width page – using proportional sizes has benefits to the designer.

Continue reading →

This is just a “public service announcement” for those web designers looking for a fast way to get a nice, even hanging indentation on their pages. That’s when the top line goes all the way to the margin and the text below it is what is indented. You might use them for a non-bulleted list such as those in the typical WordPress sidebar. It is a very simple fix, but I’ve been surprised by the lack of adequate answers in Google and figure someone out there might be looking for an answer would appreciate it.

So, the fix is: create a left margin of Xpx, then use text-indent with a -Xpx value. Ho! Is that easy, or what? And it works with IE and Firefox, both:
[code lang=”css”]
#blogwire ul {
margin-left: 15px;
}
#blogwire ul li {
text-indent: -15px;
}[/code]

There’s lots of information available on WordPress’s codex about how to create themes for your blog, all of it dealing with the filters and actions you can use to manipulate the active content on your blog in cool ways. It goes without saying that those are important pieces of information, and in fact there are some outstanding tutorials for putting together a theme that you should definitely check out. WPBits is one such resource.

But I’d like to talk about some concepts that happen before you get to the active content: the HTML, and how you go about designing a theme which has to exist in all those varying pieces yet all go together to create one cohesive whole. This is a very high-level tutorial, meaning that specific details will be omitted in order to introduce the most basic concepts. I’m writing more about the workflow than about the process, if you follow me!

Continue reading →