A Single Article
Read it, comment, and share it with your friendsThat’s not a bug, it’s a feature (degradable backgrounds for liquid layouts revisited)
A while back I wrote an entry about “degradable backgrounds for liquid layouts” which was taken pretty well by most readers and highly critically by a few random types… but that’s neither here nor there. As you know, I’ve been designing with liquid layouts for a while now, and I just recently redesigned foxymcloud.com with a liquid layout designed to max out at around 1000 px and scale down from there for narrow browsers. Dean messaged me (via the super-cool-web-2.0-ish Gmail chat) shortly after I finished the design and one of the things he said was, “are the rounded corners supposed to disappear at small widths like that?” To which I replied, “Yes! That’s not a bug, it’s a feature.”
I’m a content-focused designer when it comes to blogs and one of the beliefs I hold dear is that, at least when it comes to personal projects, the only thing that has to remain intact from one user scenario to the next is the content. Part of how I apply that is with this “degradable backgrounds” idea which possibly nobody but myself uses… but I use it here on this site and on foxymcloud.com. The way I see it, the backgrounds are a superficial part of the design which are only intended to appease those users looking for visual satisfaction at the intended design width. Letting little details like shadow edges and rounded corners fall off the screen at narrow widths, in the interest of maximizing the space used for content and saving all the extra markup required to keep those elements visible, just seems like the right thing to do.
What concerns me, however, is that there is still an expectation shared by a good number of users that a website should look the same in every browser, on every screen, with every device used to access it. I think we are finally reaching a point where users at least understand that a website will look different from their PC to their cellphone, but users still get confused when columns drop and backgrounds disappear in their viewport going from 1024 to 800 px. I can only imagine that the initial “where did the rounded corners go?” reaction that Dean had in testing the foxymcloud.com design was and will be shared by others, and some will look at it and say, “this must be broken.” My concern is changing that perspective among users to where they will see that as flexible, not broken, because that’s what it is; a feature, not a bug. I wish I could find more examples of flexible design that degrades with width (resolution dependent layouts and dropping float columns come to mind)… anyone know of any?
Get a Trackback link
6 Comments
Responses to my articleCompletely unrelated to the post (sorry), I’m just dropping by to wish you a very Merry Christmas & a fruitful New Year. Have fun Christian!
Hi, Christian. I’ve been reading some articles on this blog the past few days and picking up some good ideas for liquid design, for which I want to say thank you.
In the case of foxymcloud.com, I have to confess that I’m puzzled by the benefit of dropping rounded corners at narrower resolutions. It’s an interesting effect, but I can’t see that it really gains you much…
…until I study the source and see what you did to avoid having the big mess of rounded corners on variable width columns. Interesting, and very nice. It’s saving you complexity more than space. (Still a mess, but not quite as big of one.)
I notice the proprietor of foxy m cloud refers to “unreasonable demands” for rounded corners and was curious what technique you used. I’m in a similar situation right now designing a site with my sister. I like the look of rounded corners but they’re so god-awful under the surface. Too bad there isn’t a simple way to specify them using CSS and no images.
A semi-related and off topic question for you, in as long of a paragraph as I can manage: What do you think about attribution for things like lifting smallish random design ideas? I see that you are quite generous in sharing your work under GPL/Share-Alike conditions and you’ve emphasized the importance of proper attribution for using your themes. I totally agree in this kind of approach, but also wonder at the different levels of reuse and what attribution they might call for. I like your idea of using the rounded corners for the max width column, but if I were to use the same technique, I don’t think a link on every page of the web site would be called for. Or even any link. A comment in the stylesheet css file? It’s not that I don’t want to say, “Hey, I got this great idea from Christian Montoya!” It’s just a question of degree and managing acquired knowledge. This might be a big enough element that I would put a comment in the css, but then there is also the way we often build things — picking up dozens of related ideas along the way. There might be some effect we want to achieve, and a Google search brings up dozens of pages with examples and tutorials. Do we try to record all contributors to our discovery process? I’m asking because you appear to have very strong feelings about this and I’d be interested in your opinion. As I write this, I have this feeling that I sound (or am being!) very miserly in my approach to crediting the work of others. But I am a big believer in proper attribution and I’m happy to give credit. I’m also concerned about the degrees to which we should do so, hoping that it’s not necessary to try quantifying every dotted i and crossed t. So if I use a significant chunk of a design, I’d want to give credit, but if I just use an idea or two, I’d probably not want to keep track of the provenance of those ideas in the interest of manageability. What do you think?
(All of which does not answer the question you asked! Interesting topic, and I agree that flexibility is good, which is why I’m using and trying to learn more about liquid designs. I think it’s such a waste to only use 800 pixels.)
Scott: I pretty much agree on your approach to attribution; using a significant chunk of graphics or template work from someone else merits attribution, whereas using a single technique doesn’t. If you were to use my technique for rounded corners which I employed at foxymcloud.com, I think it would be overkill to have a link on every page. You might make a mention in your CSS to keep track of where you got the idea, but even that would be unnecessary.
When I did the code for the Cornell PRSSA, I added an “about this site” section with help information and attribution for the various scripts I borrowed to build the site, but even then I didn’t bother to mention any CSS techniques I picked up from others.
The important thing with attribution is to do what others ask for; if someone asks for attribution when providing a stock graphic or a template, then you should definitely provide the attribution they’re asking for. Otherwise, if they don’t ask for attribution and you have no other reason to provide it, don’t worry about it. Sometimes it’s nice to mention something you borrowed or used for the sake of letting other designers know (in a colophon or launch entry, for example), but it’s not something you have to do.
Thanks, Christian. I’ve been thinking of a similar thing for my own site: an attribution/credit page to spotlight contributions. To me, it’s the most important question in reusing anything digital (or that can be made digital!), since I believe everything should be free once it is published. But I might be a zealot and a radical.
(BTW, I thought I checked the box to notify me of updates after posting my comment, but didn’t receive one for your response. It’s possible I didn’t check it, of course. I’m fairly certain it didn’t get lost in a spam filter anywhere.)
Wow Scott, I’m beginning to think that my “subscribe to comments” plugin is not correctly installed. Thanks so much for letting me know, I’m going to try and fix it now!
Well Scott, I looked into it and you were in fact subscribed, but I can’t see why you never received the e-mail. Let me know if you find it anywhere, whether it arrives late or was caught as spam.
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.