Archive for October, 2008
Dress-making and web at online conference
Tuesday, October 28th, 2008
I was feeling a bit immature in some of the chat rooms at the conference this weekend, made some comments, but refrained from shouting, “I love head! Give me more head!” but boy did I want to. I lazily decided not to attend the hub in London on friday, but watched some sessions at work. I sat in my armchair all evening saturday night, take-away curry occasionally landing on my pyjamas as I tried to balance my plate and type at the same time. And then sunday, I watched some great sessions while making a dress. Yep, I made a dress on sunday WHILE I WAS AT A CONFERENCE. Does this not sound brilliant to anyone else?
I’m sure I missed some great sessions, but I wanted to share some tidbits of wisdom I learned from the various speakers I did see. So, read on, kids! (and at the end, I promised to show you a full length picture of my new dress).
(more…)
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…)
Top 10 tips to make your own web app projects
Wednesday, October 1st, 2008
Let’s face it. If you’re a regular developer or web designer, your day job isn’t going to allow you to put all those cool things you keep reading about into practice, are they? A lot of people suffer from the old problem that they do something cool, only to have it thrown into the garbage. My work isn’t bad actually– they want to put some cool stuff in, but let’s face it… I’m never going to have complete freedom. And neither are you, most likely.
So I suggest you start your own project. If you have such good ideas, stop your whining and SHOW people.
I got tired of whining, so here’s a little sneak-peak at the project Ollie and I are working on right now. It’s all about getting and sharing ideas. It got me thinking about working on your own projects… So I made a list of 10 tips to working on your own mini dev projects.
1. Make sure it’s original
There’s nothing worse than doing something that has been done many times successfully already (especially if they have a team of people working full time that have done a better job than you). Try and think of something really new, or at least approach a known solution in a new fresh approach. You want people to get excited about it and talk about it!
2. Make sure it solves a problem that exists.
Besides unoriginal apps, second worst sin is a useless app. Well, maybe not nothing worse, but if there is no point to what you’ve built, why are you doing it? Always ask yourself, “How does this make anyone’s life better/ more exciting/ easier etc?” If you have to say, “It doesn’t”, it’s time to go back to the drawing board. If it solves a problem, ask yourself, “Does it solve a problem that needs solving?” If people don’t care about it, and won’t use it, then you’re lost.
3. If it takes you more than 1 minute to explain your idea to someone, then it’s too complicated.
Sure, it can take more than a minute to explain the details on how it works, but with the idea, it should be simple. The shorter amount of time to explain it, the better. Ollie and I can explain it in 10 words.
“It’s about giving people interesting things to do.”
Okay, that’s only 8, and it’s a concept that hasn’t been done in the same way that we’re doing it… at least not that I can find. (If someone has seen something like our app around somewhere, please send me a link! I’d love to see how other people are doing it.)
4. Do your research.
Maybe you think you have a brilliant idea. Maybe you do. But there are so many ideas out there that can help you make your app absolutely STUNNING. This means going around and seeing all the cool things that are out there. Don’t plagarise, but do get inspiration from people that have done something similar. Besides seeing things you like, you can also learn about potential mistakes you could make.
5. Plan Plan Plan (on paper).
You probably hate the planning stages of work projects. This is different, don’t worry. You won’t have to deal with people who don’t have a clue what you’re talking about (because you’re talking to yourself), but don’t think that because it’s a brilliant concept in your head that you don’t have to write anything down. As you write down your plans or make your wireframes (even just roughly is okay), you find the gaps in your thinking process, and you nail down a tighter app.
6. Talk it through with someone who isn’t in the industry.
Don’t underestimate the value of talking to someone. Try to explain how your app works to someone who can use computers but doesn’t develop on them. You’ll quickly find out if your app is too complicated for the real world, and it will help you think about the messaging you have on your site.
7. Language matters.
Not only is it important to choose which language you develop in (we’re using ruby), it’s also important to think carefully about the language on your site. First time users will get frustrated with your site if it’s riddled with grammatical mistakes and incoherent sentences. Not a good writer? Get a good friend or family member to edit your material, and make sure it makes sense. Nothing makes you look worse (and slightly incompetent) than grammar and spelling mistakes on your beautiful polished app.
8. Develop within your capabilities.
We all have ideas that would be great, if only I had a physics professor and an olympic pole vaulter involved. Make sure it’s within your grasp. Yes, challenge yourself, but if you can barely grasp html, you shouldn’t be trying to build the new facebook.
9. Make sure your work doesn’t feel threatened.
Does your app do ANYTHING the same thing as your work? If it does, and you don’t plan on handing it over to them, prepare for them to be very very nervous. And probably start looking for a new job. Make sure that you don’t work on your app during work hours, and that you still get all your work done. It’s all good and well being secretive about it, but in the web world nothing stays secret for long, so make sure you approach your work carefully. If you think they will be angry, best to talk with them about it and reassure their fears. If they start talking about owning rights to your intellectual property and that you’re not allowed to work on other things outside work, I think it’s time to find a new job in anycase. You don’t want to have your “baby” stolen after all your hard work is finished!
10. Stop procrastinating and get it out there!
If you have good ideas, you’re going to have to give up those three hours of CSI followed by two hours of Mario Kart if you want to get it out any time soon. Bootstrapping takes longer, but all those evenings and weekends mean that you have made something awesome.
Besides making a kick-ass app, you’ll learn a lot, and your work will see loads of benefits from you, including a renewed sense of enthusiasm, an upgrade in your skills (working on my own projects has made me a MUCH better designer, which has made me a better designer at work), and the benefit of learning new technologies.
If you want to sign up for when my app comes out, go to theboxcat.com, and sign up. We’ll send you an email when it comes out! Ollie and I very excited about it!! Remember, your project should be fun, and the more excited you are about it, the more excited other people will be too.
