Posts Tagged ‘websites’

My Epoch

Thursday, October 15th, 2009

Today, I’d probably be some low-level code-monkey in an office somewhere, with a sizable cache of money saved away, but I wouldn’t really do much in my off hours. I wouldn’t learn all that much new, besides some programming stuff, I wouldn’t have my own site, and I wouldn’t have my own WordPress blog.
Essentially, I’d have the most boringly plain life.

On February 19th, though, I read a blog entry about the CSS Zen Garden, which shot me off in a completely different direction. I learned about entirely new industries, and found the place I want to be. I call that date my epoch. Everything else in my life was just leading up to it.

But why did I visit that site?

  • I was half-heartedly making something for ‘my first client’, and maybe I wanted inspiration. If I wasn’t making a webpage for him, I might never have revisited the CSS Zen Garden, at least not in the same way.
  • The site was recommended by an instructor in a course that had nothing to do with that subject. If I had gotten a different instructor for that same class, I may have never heard about the Garden.
  • I had only made a serious attempt at a website because I was roped in by another friend, who I only met because of a strange time coincidence in his own life, and his own life-altering experience. He very nearly died before he met me.

(At the same time, I think web design did interest me, and it’s in my blood to push myself towards art. I have no clue if I’d have ended up deciding to learn web-page making in my off time, and then finding the community I found.)

The blog entry I had read was linked from Dave Shea‘s resources page: Doug Bowman’s write-up about his CSS Zen Garden submission. Today, I retraced my steps: After reading that, I had went to his blog. His latest entry at the time was a link to the blog of Eric Meyer, who pined about the need for a new way to lay out documents. His second link pointed me to Shaun Inman‘s post from 2006 that talks about making equal-height columns of content, and the javascript he had developed as a fix to do that. At that moment, I remember reading the comments and thinking to myself, “I have no clue who these people are, but that doesn’t matter. I’ll know them, eventually.”

Reading back on them today, I see very familiar names. Eric Meyer, of course, said something. There was Ethan Marcotte, also known as ‘beep‘ (the unstoppable robot ninja), who actually just got married on Saturday, and who was then still using the name ‘sidesh0w‘. I saw Andy Clarke, who goes as ‘Malarkey‘.

It strikes me that virtually everyone from this world is unknown to the average person. As far as computers go, everyone knows about Bill Gates and most people know about Steve Jobs, but that’s almost it. What about Jeffrey Zeldman, the Web Standards Pioneer, who created (and is executive creative director of) Happy Cog, the biggest web-design company in America? Molly Holzschlag, who managed to snag, and who worked to bring modern web standards to IE7 and IE8? Jason Santa Maria, the leading print-designer on the web, and creative director of A List Apart? And hundreds of other names I have no time to link to.

But that’s alright. The world is just such that we only ever learn a few names from the most powerful companies. But I know my own, and I’ve found my place.

Before and After

Thursday, August 6th, 2009

I just went through my archives, because I wanted to see what happened when in my development of The Embroidery House.

This image [2022×372, 213KB] is a string of all backups, generally made after a big night of fiddling around with things. usually gets backed up once a month, it seems, and has also come a long way.

The Embroidery House creation, from left to right:

  1. February 11th: This was actually a rough draft, which was only meant to show the functionality behind what I was doing: using a primitive AJAX form to load the clothing from an XML file. I got carried away, and tried to make everything look like stitches. Most everything had custom padding or margin, and almost all the style was inline. At this point, I was still mainly a programmer who did web stuff on the side.
  2. February 23rd: Having finished the AJAX, I decided to try beautifying it up. This wasn’t my first day with this design, but I don’t have backups of the other days. Basically, I decided that the site should be sporty, and sporty sites always had bold reds or blues, and usually whites. I wanted to give the site a textured feel, as if it were made of fabric. On February 19th, I had my Great Epiphany and became a web designer/developer. On the same night, I discovered transparency and abused it about as much as you’d expect someone to abuse something he just found. The logo suddenly looked like a watermark, which was appealing to me, but then I was trying to make practically everything transparent, and it just didn’t work. I was going to put a fading-transparent set of coat-hangers in the corner, so be thankful I didn’t. At about this time, I had discovered Doug Bowman’s A List Apart article called Sliding Doors of CSS, at just that point where I was experimenting with making my links more like buttons.
  3. March 4th: I eventually decided that the last style was so disgusting and unforgivable that I scrapped the entire thing and started from scratch (except the styles set up to lay out the clothing). I settled on a minimalist approach, to really bring out the soft cream of the fabric in the background. I made the main navigation blue, because red just seemed stupid. I also made a bit of javascript that loaded up a Google Maps window if you clicked on the address, which I was kind of proud about. My client had finally given me the text for his logo, which I used in a sort of banner text.
  4. March 10th: A week later, not much had changed. I had fixed up the styles a bit, and made the items look more individual. I started working on the UI, so that the site would be actually usable. Some things got re-written, as well.
  5. March 24th: My client finally got an idea of what he wanted the site to look like, and drew up a plan. He wanted sky above, with the menu above the main content area, and a sidebar for showing new items. I chose some colours quickly, but things ended up looking a bit aquarian. I ended up completely changing the style. I was in the middle of converting the pages to PHP, which finished a few days afterwards.
  6. August 2nd: There were other steps in-between, but few of them are stye-based. I went through a phase where there were trees in the sidebar, but the client didn’t like it. I photographed the sky and took samples from that, so the tones should be far truer. I tried to give a gradient feel, to replicate the gradients of the sky. I also tried to keep the images small, to fit with all screen sizes. At some point, I filled the sidebar, redid the copy on most of the pages, consolidated those extra pages (like About and Contact) to a small toolbar in the corner, and added a miniscule floating footer. I redid the entire clothing system to run with php, from a database, and added the options to filter those. I’ve got to add sorting, sometime. At the moment, you can sign in, browse clothing, select the one you want, and add it to a cart. I’ve also added a forum, though it’s yet to be used. I also haven’t actually changed it for about a month, so it’s really more like July 2nd.

Quite a list! I think, if the entire project were to be erased, I’d be able to get everything back up the way it was in a little over one month. At the moment, I’m waiting on the client to finish a list of chores he needs to do to complete the site. I’ve been doing logo work for him, in the interim.


Saturday, August 1st, 2009

Today, I worked all day on a redesign. The old one was just killing me, because I was doing a couple things wrong and the entire thing had kind of crystallized.

I started this one off fresh, with a clean copy of the default theme. I decided I was going to change as little as possible: I moved the sidebar to the top of the code, added some meta-data specific to my site, and changed some of the verbose garbage they spew out when you get to the end of a post, but I otherwise kept it as similar as possible. No new tags for styling, and I used the names the default theme uses.
I think I’ll take out a couple dummy elements that I didn’t have a use for, though.

Overall, I hope this design looks a little fresher and less cobbled together. Instead of relying on each paragraph having a container class to give it padding, I’ve built it into the table. I’m not using really weird column floating, and my stretch-to-bottom works without using infinite negative margins (those things are a nightmare in IE7).

I had to think a while on the best way to store the files. I’m using WordPress, so the themes are stored deeply in some sub-sub-sub-directories. I was wondering if I could just point the themes to the main folder, but eventually decided to keep CSS and CSS-based images in the theme folder, with everything else in the root.
WordPress uses the root (or rather, which ever directory you specify as WordPress’es root) as the context, and travels from there to find images. CSS, however, always travels from the CSS document. If you keep images in an ‘images’ folder and CSS in a ‘css’ folder, you’d reference ‘images/image.png’ from your code and ‘../images/image.png’ from your CSS.
Since everything but the CSS was working from the top level, I decided to keep everything but the CSS right there.

So I think I’ve got a less hackety them, now. Maybe it’s time for Cozy Cabbage to get a makeover?

Oh! Adding tags on a new post works again, now. I was having difficulties.

Photo Gallery

Thursday, May 21st, 2009

I just finished more work on the old Atomicat Photo Gallery.
I was working for him last year, basically, at the same time as I was take what was essentially my first every-twenty-years-vacation. I figured I’ve been going to school since I was four or five, and I’ll probably be working until retirement, so I might as well take a year off to do some other stuff.

The site was the first website I’ve ever designed, and went through a couple drastic redesigns. I created the modern logo, which I’d say is fairly decent, and experimented with things like floats and whatever else.
The CSS on that site is disgusting. I didn’t really ‘get’ the id attribute, and so I had classes in every little thing. Extensibility was fairly unneeded, so I would end up creating a little class to do one thing, and then paste that on whichever element needed to do that. The result was something like HTML with half the semantics of HTML. Is <div class=”floatl”> any better than <div style=”float:left”>? It seems I’d completely ruined the core idea behind CSS.

The gallery was something else: Hours upon hours of hand-crafted goodness, as from a seamstress who turns away the sewing machine to make each careful stitch with her own sure hand.
In short, it was a mess. There were eight pages to be taken care of, each with images that had to be named specifically for that page. Any images you wanted to add had to be specially named for yet another page. Each item had to have the name/description engraved in the html, to be passed in an ugly GET variable.
Tonight, I went through the motions of creating the database and putting everything in it. I took every bit of repetition in the gallery and put it in loops. The gallery went from seven pages to one; the page went from eight individual items to two (I could probably turn that to one); and that item or two is loaded in from SQL.

I guess I’ve still got to do tags, but I’m finished for tonight. I’ll have to eventually upgrade the entire site up to my current standards, and then upgrade it again to the standards I’ll have by the time I’m finished.

This is shaping up to be quite a year.

Cozy Cabbage Web Design&Development

Tuesday, May 19th, 2009

It’s a bit of a mouthful, but I’ve finally got my business site up and running! I’ve got to professionalize the language a bit more and add an information form that a customer would fill out, but it’s it’s basically done. I’ll have to check it in IE, again, and maybe end up tweaking a couple styles.

As it is, it took me these past six hours to get it up. The writing actually took a great deal of time — much longer than I thought it would take.
I’m going tomorrow to pick up my business cards, and then I’m going to my old highschool, where I hope a certain teacher there — who taught classes on how to be an entrepreneur — keeps in touch with students starting their small businesses. It would be the perfect opportunity to grow my skills while contributing to the community of small businesses.

I’m starting at the insanely low value of $50/week, with the expectation that I’ll only actually do an hour or two of hard work a day (plus about six hours of random fiddling, plus about eight hours of blogging and socializing, plus about eight hours of sleeping).
From there, once I’ve got a couple clients — enough to keep my fed, — I’ll increase it to $100/week. That should last me for the next couple months, until I’ve learned a good deal more. I can slowly find people who need the bigger jobs, and work with them for a larger sum. I’ll probably need more than a year before I can feel comfortable designing for larger companies.

I spent the last few days reading backlogs of some other blogs. I’m learning more and more, and retaining new ideas. I’ve also realized that a social network is incredibly important. I was reading about whuffie and the soup metric and what companies do and what they should do. I’ve read about marketing, ROI, and just plain love.

So there it all is, layed out:
Mid February, I became a web developer. Tomorrow, that path leads out of the forest and into the wide, wide countryside, and I become a working professional throwing himself into the world.
I had better get to sleep. I’ll need it.

(Crap, do I need a business license? Do I have to charge GST? I do have a lot to research, suddenly.)