In the world of web design, I find one of the most difficult tasks is building a robust user interface for web applications. Front ends to news websites or blogs are one thing – and a challenge in their own right – but handling the complexities of managing data with the elegance of a WordPress backend is not nearly as simple as it seems. For a start, the developer needs to be intimately aware of the data, how it connects to various other data components and what it means to the end user. In addition, the decision has to be made: what goes on a single page? I am personally always lusting after the cleanest, simplest interface possible, which means among other things employing AJAX to keep page refreshes between alienatingly-different screens to a minimum; not letting the user get completely lost when switching between various elements of a single operation.
But as challenging as that all is, the situation becomes much more sticky when there is already a user interface in place. Such is the case with the current web project I’m working on. There is already a robust website in place and it has many facets being driven by backend user interfaces. I don’t necessarily agree with the layouts of the pages – many of the rules I’ve long-since taken for granted about what an efficient and useful UI looks like. But to change the layout means necessarily retraining the users on how the interface works.
There are also some restrictions and conventions of the platform I’m working with – CakePHP – that cause me to want to work in certain ways. I realize that the framework should not define the application, but when those conventions are ones that I agree with, it just adds more pressure to want to move to another interface.
I did not starting writing this post with any intention to arrive at conclusions, though I confess I did start with a thought that perhaps by writing down my ideas, something like the shape of a solution would appear to me. So far, no such luck. But I am learning to balance the needs of my audience with the modernization that I was hired to produce. I think for a start, laying out ideas and presenting them to my bosses – while time-consuming – is my best bet going forward. It both allows my bosses to object to things too far removed from their current experience and also hopefully loosens up their preconceptions enough to allow for some of my ideas.
Leave a comment
August 25, 2009, 4:20 pm Thinking in Full-WidthI 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 BoxIf 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 noticeableSearch 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!
Follow Me:
