Archive for the ‘css’ Category
« Older EntriesPractical imperfectionism
Monday, July 19th, 2010
I’ve always been pretty fast at getting things done.
My attempts at dress making have resulted in haphazardly created dresses, which got an initial 5 second sketch, and were then redesigned as I went, and changed features depending on my patience and (lack of) dressmaking skills.
I lament my quickness sometimes, especially as my career is now web design. Never have I met a bunch of perfectionists, who obsess on every detail, they look at me in horror and, I believe, can’t even comprehend how I could POSSIBLY leave something that is a few pixels out.
I learn fast, I design fast and I code up fast. I am pretty good about doing things semantically correct. But, if I know that doing it semantically correct would take me another 3 hours, and a slightly non-semantic method is perfect in seconds and I have a deadline, my choice is always clear.
BUT I miss a lot of the tiny details. I’ll do things to get them done to a standard of 90% or so, and then go back and fix them later. When I’m learning a new technology, I’m okay with not knowing the right way of doing things, as long as it doesn’t impede my ability to finish things.
Perfection is a luxury
Most projects are impeded by budgets and often times there’s money for new features, but not for polish. I know mine are, and while I’ll spend some of my own time (unpaid) to make it look a bit nicer, when you have as many projects on the go as I do, you have to stop somewhere. Close to perfect has to be “good enough”. When you’re on a small team trying to do a lot, you have to sacrifice absolute perfection for speed sometimes. That suits me just fine (it’s also the theory of shipping by Seth Godin: sometimes you’ve just got to ’ship’).
This doesn’t mean I go back and strive for perfection.
For example, during every release, I spend some time adding a few minuscule details in (a subtle border, moving things a few pixels or cleaning up some code, for example). Most people won’t notice, but occasionally I’ll hear, “It looks much better (for some reason they can’t put their finger on)”. I think you have to continually refine your front-end code. If you don’t, your code base gets completely unmanageable.
On the other hand, I know web designers who ALWAYS does it the absolutely right way the first time. Their designs are pixel perfect to their mocks. They won’t use hacks, but will spend HOURS figuring out the “proper way” to do something.
That’s okay too. Different styles work for different projects. I’m always more keen to get the user flowing through the site smoother, rather than making sure under the hood looks amazing. Surely that matters more to 99% of the people using the site (1% are the ones that view source)?
I’m not scared
I have no problem with using a hack “just for now”, or if it’s an area I don’t know much about. It also means that I’m not super scared of new technology. It’s just the way I get things done; practical imperfectionism works for me.
Saying that, I am a bit tired of too many projects at one time, and am working harder to give myself enough time to actually think about the details. Being imperfect is not a goal, just a necessary evil for the busy designer.
Creativity, definition of
Wednesday, January 27th, 2010
My talented neice's fancy fruit bowl... very creative!
I’ve just read this article by Andy Rutledge on creativity, and while I cling to my creativity, I have to agree with his sentiments…for the most part.
He seems to believe that you need to be properly educated. He’s written other articles on creating a set curriculum and adding a few letters after your name. I’m self-taught. Some of the best designers I’ve met are also self-taught. I learned web stuff by little bit of luck, mediocre-levels of innate talent, and a lot of sheer will.
Growing up is hard to do
By doing things wrong, I actually knew why those rules were important.
Knowing the fundamentals and being able to apply them do make designs better. Every designer with a few years under their belt should know that. But I still think a creative mind still makes a fantastic job. Any dunce with a bit of discipline can apply the principles to a bit of information. That doesn’t make it good design.
Designers should be creative
The definition of creativity has been warped a bit. Most people say that children are very creative. My niece is a fantastic artist, and she comes up with some really good stuff. In the past, I’ve often confused expressive creativity with useful creativity.
Design, by definition, is inherently useful. For most professions (architecture, engineering, and hey, why not… accounting), I think of it more like problem solving. And those curious and perceptive will work and niggle until a design works, and every pixel works towards its goal. Fitting components onto a page coherently and effectively requires more than just a knowledge of design fundamentals. Sure, they give you a framework for putting things in place, but the elegance that comes from a beautiful design usually comes from creativity mixed with a whole lot of empathy (whether it be artistic, typographic, structural, or any other type of creativity).
More to learn
Some of the design experts that we’re supposed to admire don’t really impress me that much, and a lot of their stuff doesn’t strike me as unique or creative, but their mastery of design theory and care and attention to details do. Within the confines of a new distinction between useful and expressive creativity, most of the problems associated with the terminology disappears. I can say that yes, they have solved the problem, so I guess they are being creative, but they haven’t found the most elegant solution (if your initial reaction is, “Meh!” then can it truly be the best design for that content?).
I ultimately think you can’t hide behind design’s rules either though, just as much as you can’t hide behind ‘creativity’.
Go ahead and read his article. He really says it well.
Taking the short way
Thursday, January 21st, 2010
Take the fast route baby!
There are so many resources out there on keyboard short cuts out there. Some really good ones that just got published include Mastering Photoshop: Unknown Tricks and Time-Savers (where I learned how to commit the text I had just written when my toolbars were hidden: It’s cmd enter!) and I’ve just finished installing Zen Coding into my Coda and Textmate, which will save me a lot of time formatting boring static text, definitely.
Shortcuts are great…
I know quite a few shortcuts in the Adobe package, and I can get around my mac pretty easily with a combination of key strokes. It saves me so much time, and it makes it so much easier to get into my “zone”. We all have our techniques for efficiency when we’re on the computer.
…but they’re also really frustrating
The problem is, they’re not universal. I hit the “V” key constantly in flash in order to get my direct select arrow. I hit “command D” constantly in Illustrator to place an image, but that’s the command for inDesign. After a while I get frustrated enough that I’ll go and change them in the settings, but by then, all flow has dissipated.
They also make teaching difficult
I have often gone to show people how to do something very simple in Photoshop, and to be honest, it takes me a while to find certain things in the menus. I hit keystrokes to change tools, and they are shouting, “Wait! What is that?”
Remember these words: patience and repetition. I think people should always learn the long ways of doing it first. Menus and panels often give a context that learning shortcuts do not. It’s like at school with math: the teacher would show you once or twice how a formula was derived, and then you just remembered the formula, but understood its context. It meant memorizing the formula was much easier, because it had something to connect to in your brain.
They make “experts” out of “amateurs”
I’ve met a few people who are whizzes at Photoshop, could talk to the talk, do the shortcut walk and then I saw their stuff, but it turns out they couldn’t design themselves out of a paper bag. Just because I’m really good with the drill and the hammer, doesn’t mean I should be designing the house.
This short-cutter has mistaken tool mastery with real skill, and that’s a huge problem. For those who strive for mastery in design, shortcuts are not important.
The zen of the goat
Friday, October 2nd, 2009
Safetygoat as a character, well, he’s my partner-in-crime. He recently let me know he would like a little change of scenery. I liked my old design, but the homepage felt cluttered and busy. Safetygoat also sought a bit of simplicity.
I’m hoping to have more seasonal/weather related stuff in the homepage. Right now, the leaves are all changing in Canada, and it’s absolutely gorgeous. A winter tree will definitely be next.
It’s a work in progress (as every designer’s site is, I reckon!): The haiku collection will return soon but to the footer (the javascript includes were invalidating and I’ve got only one error right now…). I want to do some more work on the posts, and the images will need to be resized. Soon, zen of the goat will be achieved, and he will be at peace.
I would love your thoughts!
Meet thepickuptruck!
Tuesday, April 14th, 2009
I’ve just completed thepickuptruck.com, my first app of my own I’ve actually finished!
So, it’s pickups, but it allows anyone to add pickup lines in (either by doing it anonymously, but also by claiming your pickups by putting in your twitter name). You can vote on pickups. We (myself and Dan Wichett, a fantastic developer, who has been my partner on this whole thing!) have also made a mobile app, which uses the opera widget process, where you can save your favourites.
I would love your feedback on the truck! Let me know what you think!
screen shot of thepickuptruck
New safetygoat!
Tuesday, January 13th, 2009
Well, well, well! I said I was going to fix up safetygoat, and it’s taken me a lot longer than I thought….but it is here! It has been a time consuming endeavor. For example, adding in a simple plug-in often took three hours of frustration (followed by 2 minutes of knowing bliss!), sometimes two days, but it was never as simple as people said (which leads me to believe that I’m a wordpress retard). I will post code snippets that I figured out in the coming weeks so hopefully others will learn from all my pains (and hopefully the codies out there will tell me if I’ve done a really big ‘faux pas’ or two!).
Some of the things I really wanted were easy-ish… getting flash and jpgs into the same gallery for my portfolio, for example, but my main goal was to make the front page more interactive. This meant having haikus that people could scroll through and add to, a sneak peak into my portfolio (I’ve grown quite fond of that frame and don’t feel bad for one second about how much of your bandwidth I’m taking up!), somewhere where I can pull in photos of safetygoat that other people have taken (add yours to my flickr group!), as well as feeds for my last.fm, brightkite and twitter. Over the next few weeks, I’ll be tweaking it and testing it in different browsers, but I would appreciate all of you lovely people to take a look through. If you could let me know if you spot any bugs, or if you have any tweaks I can make to just tidy it up, I will put on my tough girl skin and take your advice lovingly into my arms.
Designing for the web: Don’t forget about newish browsers
Wednesday, December 3rd, 2008
The other day I found out about 24ways.org, a design-style advent calendar, which gives us 24 articles until christmas for the month of December. Imagine my surprise to see the site design…. First thought was, “Um, is it finished?” I was looking at it at work in firefox 2 (maintained on my machine for testing purposes), and it looked a mess. Take a look at what I was seeing….
People were RAVING about it on twitter, and I just didn’t get it. It looked like garbage to me, and I was a bit upset, because max voltar is one of my favourite designers, and I have been wearing his made by elephant button with pride ever since I got it down at dConstruct. So yesterday I was deathly ill, but still on board for my daily december design dose, and looked at the site in firefox 3. It looked very nice. It was very unique, very clean.
Now, back at work today, and I’m reading my dose in safari to get away from the non-pretty version. Question is, shouldn’t web designers make sure that their sites look kind of similar in firefox 2, which is a fairly new browser? I mean, firefox 3 only came out about 6 months ago! For kicks, I checked the site in ie7 and ie6, and while ie6 had a few issues, it at least looked mostly like the design is supposed to look.
I don’t propose to be a front-end genius, and I don’t think that designs need to look pixel perfect across browsers (heck, safetygoat looks like CRAP in ie6, but that’s another story) but there should be a standard for browser support, especially amongst web designers. They are obviously using all the cool new css tools that are just coming out, but for those browsers like firefox 2 that doesn’t have support, it looks like they’ve just forgotten about it. If we don’t abide by our own rules, how do we expect the rest of the world to do it? This is disappointing, as this is supposed to be a drool-worthy site which pushes boundaries. It just makes the whole lovely thing slightly bittersweet… not that I won’t be gagging to read the articles first thing every morning until christmas!
Replace pseudo-class :last-child using JSTL by determining the loop status
Friday, October 24th, 2008
I wanted to know how you’d figure out when you’d come to the last in a list of items when coding in a jsp. When the number of items vary, there’s no way you can hard code this in.
I wanted to add a :last-child in my webpage so that my list’s last element wouldn’t have a border-bottom, but the rest of the list would. I’m all for progressive enhancement, but sometimes things look so shocking in ie7 and ie6 that you just need to find another (non-css) way to take the border off.
In css, it’s
.keyContact li{border-bottom: 1px solid #000;}
.keyContact li:last-child{border-bottom: none;}
But this doesn’t work in IE7 or IE6. Without it, I get a crappy double line thing, and looks shocking. In my jsp, I’m not sure how many key contacts I’m going to have as it’s running through a loop. But for each item we determine their status:
< c:forEach items="${contacts} var="contact" varStatus="status">
<li class="contact ${status.last ? 'noBorder':">Contact info</li>
</c:forEach>
Of course, you still need to define what noBorder is in the css…
.noBorder{border-bottom: none;}
Now you can delete your li:last-child class in order to keep your css tidy.
This sets a variable so each time it goes through the loop, it knows which is the first, last etc. And when it determines that it is the last element, it will add the class “noBorderâ€, otherwise it will add nothing. (Read it as “is the status last ? (question mark). If yes, add noBorder, otherwise (:) add nothing). FYI this is called a JSTL loop status. Hope that helps!
Making text in inputs disappear when you click on it
Sunday, October 19th, 2008
This is probably really REALLY obvious to other front-end coders, but I didn’t know how to do it. It’s a great way to save room on a design, but still label things clearly. So here it is….
<input onfocus=”this.value=”” type=”text” value=”sometext” />
So you can put an id or class on this as you normally would, but the words ’sometext’ will appear until someone clicks on the input box. If you want them to have to select and delete the text before they enter in their own text….
<input onfocus=”this.select()” type=”text” value=”sometext” />
Update: My good friend Andrew, of Pepsmedia, has informed me that this is a bit naughty, as I’m putting a javascript function on an actual html element. He suggests going to this link and using the jquery method.
My 5 Women Web Designer Heros
Tuesday, October 14th, 2008
Bonnie thinks we need heros. It’s true. But I was getting worried when all of my web design heros were men. I really didn’t think that there weren’t any girl heros to be had…
Lots of girls are fantastic graphic designers or illustrators, but that’s not enough for me. I’m talking about the whole package here, with extra emphasis on webdesign. So many of the girls’ sites I looked at had glimpses of genius, but when you’re looking for a hero, you want someone whose complete portfolio blows you away, and makes you wish you were a better person. And some lists, including this one from Just Creative Design, made me embarrassed that these women, although very talented, were not heros, especially not to us girl web designers, as some of their websites were unprofessional, badly designed, or just PLAIN plain (the exception being Marian Bantjes who is my typography hero… from both genders, but this is supposed to be about webdesign, so she’ll go on my “general hero list”).
I’m just beginning my web career… I need heros to look up to!
Here’s the attributes I was looking for in my heros.
1. Every piece was polished
A lot of people have one nice piece, or others had a beautiful personal site, but their portfolio was mediocre. She needs to inspire awe with every piece of work she has done.
2. They have their own website portfolio
I know some girls that have designed a site I really like (perhaps being the art director), but they don’t have their own portfolio, so how can I be sure of their greatness? I don’t want to be disappointed.
3. They create something awe-inspiring
I know how to make mediocre stuff already. There is a lot of good stuff out there, but the stuff that inspires needs to achieve a whole new level.
4. Made me wish that I had done it.
If it doesn’t make me feel inferior or if it doesn’t make me feel like I have no talent at all, it can’t be from my hero. Design heros are there to smash your self-confidence. Period.
5. I didn’t just pick them because they’re a girl.
There’s a debate on whether it matters if a designer is a girl or a guy. For my list, I wanted my choices to be so good that it could be a list of just “web design heros”, not just because they’re girls. Does it matter? Maybe it shouldn’t, but I just haven’t seen that many girls around, and I really want to relate to other women designers. I’m sorry, but girls and guys ARE different, even if I don’t agree that one sex is more capable than the other.
So here they are in my personal order…
(more…)
« Older Entries
