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.
Leave a comment
July 30, 2009, 11:24 pm Different Shades: 5 Great Ways to Break Out of the RGB Box
If you’re like me, you design web pages because you have a passion for data and display, both. But that may not necessarily mean – and in my case, it most certainly does not mean – that you have a natural ability for dealing with color. Primary colors are one thing, but getting the subtlety and nuance of really rich, vibrant colors is something altogether different. In fact, there are people in interior decorating, graphic design and other industries whose sole job it is to select colors.
In the past, the limitations of browsers and operating systems gave us a great excuse: we *had* to stick to Web Safe RGB, so exotic colors simply were not possible. Well, that excuse is long-past expired. So, what’s your excuse now?
Finding new and interesting colors can be a challenge. Even for artists, finding the colors they love in the real world available to them in the digital world is a daunting task. But with all those experts out there, certainly there must ways to find color combinations besides your own personal brain power? I decided to make a list of some outside-the-box options for your edification. Your comments and suggestions are heartily encouraged.
5. Why Not Ask Sherwin Williams?
The Sherwin Williams website is an excellent resource for color matching palettes of all kinds. Of particular interest to me is the historical palettes section of their website. Here you will find sample selections of the color schemes which provided the inspiration for interior decorating throughout various eras. Look to this resource to find some interesting background colors or text area colors and match them elsewhere.
“But wait!” you may be saying, “how can I use these color options when they’re only images? How do I get the hexs for them?”
The answer is your eye dropper tool in Photoshop. Save the image you want to sample and open it up in Photoshop. Then just use the eye dropper tool to get the sample. Double-click the color in the Color-Selection Box. In the window that opens, you will find the hexidecimal value for the color you’ve selected.
4. Photoshop Swatch Palettes
Another great resource for interesting colors is Photoshop’s swatch palettes. The prepackaged color palettes include Renaissance themed colors and Art-Deco stuff, plus lots more. Once again, you can select the color and then double-click the Color-Selection Box to get the hex. Of course, as a pro tip, you’ll want to eventually save the colors you select for your theme as your own custom palette. You’ll probably want to create a custom palette for every website you work on, if you’re planning on ever coming back to it.
3. Old House Colors
Here’s an interesting website. OldHouseColors.com is really meant for house painters and owners who want their houses to have the classic look that their homes were meant to have. But information on the web is free, and that means its freely used! There’s lots of color possibilities here that you may not find, exactly, anywhere else.
2. What about Macy’s?
Yes. Macy’s. Or Overstock.com, if you like. But clothing is some of the most color-rich stuff most of us ever touch. Why not use some of the swatches they have on their sites for inspiration? You can make an entire WordPress theme and base it around a Polo Ralph Lauren suit! The point is to find colors you can:
- Easily sample and use
- Dig enough to use in the first place!
1. Color Scheme Designer 3
Beyond a doubt, the best resource for coming up with balanced themes, the Color Scheme Designer uses the science of color to come up with companion colors for whatever favourite color you’ve discovered. The best part of this resource is that it provides you six different palette options for your chosen color, based on their relationship to one another on the color wheel. I am sure that color professionals can explain how all this works. What I can say is that it works beautifully. And it provides you color combinations which, when viewed, make perfect sense yet seem – to me, anyway – totally surprising.
Leave a comment
July 26, 2009, 12:13 pm Breakout Headings! How to make titles just a little more noticeable
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.
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:
.postbody {
display: block;
margin-left: 40px;
}
.postbody h1 {
margin-left: -40px;
}
.postbody h2, .postbody h3, .postbody h4, .postbody h5 {
margin-left: -30px
}
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!
Leave a comment
February 3, 2009, 9:39 am Making Bubbly Divs With CSS Images
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.
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:
#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;
}
We can then assemble the pieces like this:
<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>
Follow Me:
