VGVA.com redesign: the frontend

Layout-wise, I made a few changes to VGVA.com. First, a much wider default width (from 800 to 1024 pixels) allowed me a second sidebar. After a lot of experimentation and feedback from the VGVA board, I displayed our sponsors in two cycling blocks (thank you, jQuery Cycle Plugin!), plus a separate block for new “official supplier sponsor” volleyballstuff.net. Team sponsors should be pleased, at least; their logos had previously been stuck below the footer.

(Part 2 of my recap of the VGVA.com redesign. Part 1 is here)

Layout-wise, I made a few changes to VGVA.com. First, a much wider default width (from 800 to 1024 pixels) allowed me a second sidebar. After a lot of experimentation and feedback from the VGVA board, I displayed our sponsors in two cycling blocks (thank you, jQuery Cycle Plugin!), plus a separate block for new “official supplier sponsor” volleyballstuff.net. Team sponsors should be pleased, at least; their logos had previously been stuck below the footer.

The left sidebar displays news and matchmaker listings, two things previously confined to a couple pages each, as well as section sub-menus where appropriate, for easier navigation. Speaking of News, I decided to scrap the news archive page from the previous design. I’d gotten the idea from the Out on Screen site, but after a while archiving past events felt pretty useless (especially since almost all these events recur every year). I don’t have the numbers to back up my guts, but it makes for a simpler architecture and nobody’s complained yet, so there you are.

The matchmaker section hasn’t changed much, as far as the user would tell, except I did implement an AJAX-based login/signup process (which falls back to plain synchronous forms if the browser isn’t running JavaScript).

Lastly, I tried my hand at this responsive design thing I’ve heard so much about. Nothing too fancy, just narrowing or removing the width of the left sidebar for smaller screens, plus taking out some stylistic frills (e.g.: rounded corners) for mobile browsers.

So there you have it! This redesign consumed so much of my free time for months, but now I can finally relax a bit…

The VGVA.com redesign

For several months, I’ve been hard at work redesigning the Vancouver Gay Volleyball Association website. Longtime readers will remember previous posts wherein I expressed my insecurities, then my excitement at tackling its redesign in 2008. Now in 2011 comes another redesign, even more extensive.

For several months, I’ve been hard at work redesigning the Vancouver Gay Volleyball Association website. Longtime readers will remember previous posts wherein I expressed my insecurities, then my excitement at tackling its redesign in 2008.

Now in 2011 comes another redesign, even more extensive. I moved the site to WordPress instead of homebrewed PHP scripts, jiggered the layout and structure, and made extensive under-the-hood changes to allow non-techy people to update content, announcements, and time-sensitive information (tournaments, registration) without mucking about with HTML and SQL.

In the next couple of posts I’ll go into more detail about the changes I’ve made, and what I’ve learned along the way.

WordCamp: Developers

Yesterday was a very, very good day. Why? Because I went to WordCamp: Developers, that’s why! A whole day of knowledge, hot geeks, and interesting people. Though I’ve been tinkering with WordPress for a few years now, I’ve been starting on larger projects for other people (both volunteer and paid). It’s exciting and a little scary.

Yesterday was a very, very good day. Why? Because I went to WordCamp: Developers, that’s why! A whole day of knowledge, hot geeks, and interesting people. Though I’ve been tinkering with WordPress for a few years now, I’ve been starting on larger projects for other people (both volunteer and paid). It’s exciting and a little scary.

Keynote

The keynote consisted of Lorelle Van Fossen interviewing Andrew Nacin. Okay, kinda different, but I totally didn’t mind. First impressions: even with that playoffs beard, Nacin is hot. And used to be a fireman. Seriously. Second impression: he loves what he does, and inspired the same kind of love in the audience. “Innovation is the key to WP’s success,” he said. Things like menus, internal linking, even the current design, started out as pieces of code in various themes and plugins. Who knows where our little ideas will lead us?

Also, “Never trust the user.” But that’s a bit less inspirational.

HTML5 & CSS3 Integration For WordPress

Ray Villalobos took us on a whirlwind tour of these new technologies’ features. I was already familiar with some of them (border radius, semantic tags, transparencies) but at the end of the hour, my brain felt more than full. And I still had five more talks to go!

One quibble, though: As informative as it was, Ray’s talk didn’t really have anything to do with WordPress per se. I understand that a good WP developer has to know these things, but they apply to any Web development work. So… should they have been in a WordCamp event? I’m still undecided.

Developing a Control Panel for Multiple Sites Using the Same WordPress Theme

O HAI. Toby McKes works at Cheezburger Networks, the people responsible for bringing you lolcats (and Fails, and Squee, and Graphs) each and every day. I know, I couldn’t believe our humble city could be so honoured.

But bringing laffs to the world takes a lot of hard work. In the early days, all their blogs were running on different hacked themes, they all looked at least a bit different, and maintaining them was a huge headache. The solution was a unified theme, with dozens and dozens of theme options, controlled via a custom admin panel. This made installations a breeze, since they were all running on the exact same code. They even have a tool for importing and exporting options, too!

This really resonated with me, because one current project involves implementing a site with lots of custom options. I don’t need a full-blown admin panel for multiple installations… but it’s good to know others are dealing with similar issues.

Unconference: Finding Work as WordPress Consultants

I decided to skip the WordPress e-commerce talk (though I heard later it was very informative) and headed over to the Unconference track for a little discussion with Lloyd Budd on making money with WordPress. I’m honestly not sure if I have enough experience to really make a go at it just yet, but I want to know what options (and obstacles) lie ahead. We discussed CodePoet and other consultant-finding sites, and shared personal insights. No insights from me right now, but maybe next year…

Tackling JavaScript for WordPress

Again, lots of information, great if you want to get into fancy web development, but not directly related to WordPress. (Almost as an afterthought, he did mention wp_enqueue_script()). But I have to say, I loved how enthusiastic, yet low-key Allen Pike is about JavaScript. The way he says “Mind-blowingly awesome code you’ll learn a lot from” in an adorkably deadpan voice is just awesome.

Challenging Traditional WordPress Design

So you’ve got your traditional blog design with all this extra navigation in the sidebar: categories, tag clouds, recent posts, etc… Is it useful? Do people read them, or do they just tune them out? Catherine Winters looks at various site designs and relevant studies and concludes that, no, they’re not that useful. That a lot of these frills are in fact making pages harder to read, and that today’s web designers are ignoring lessons learned over centuries of print design.

Catherine’s delivery could have used some polish, but her ideas were right on the money. In my last blog redesign I deliberately cut out all the sidebar bits she mentioned. My inspiration, in part, came from AdamSchwabe.com, whose blog was even more radical in its minimalist design. And worked beautifully.

Possibly the Strangest WordPress Project You’ve Ever Seen in Your Life

That’s really what the schedule said. And holy shit did it deliver. Mark Reale led us through the design and implementation process of 6q.com, a site he did for artist John Oswald. It’s a trippy thing, loaded with crazy JavaScript animation, but it really does run on WordPress!

Oh, and I won a book at the end of this talk, too. Jesse James Garrett’s The Elements of User Experience. Go me!

Final Thoughts

So, that was WordCampDev. The organisers did a fantastic job, and I love these events because there’s so much to learn and absorb, and I come home so inspired! Looking forward to Northern Voice next week!

NetSquared Camp 2010

Okay, now that the film festival’s done, I’m finally free to blog about NetSquared Camp 2010, an unconference of activists, technologists, entrepreneurs, and assorted geeks who want to make the world a better place, in a full-day extravaganza of sharing and networking. It was my first NetSquared Camp ever, and I’m still digesting everything I’ve learned. Here’s a rundown of the talks I attended:

Okay, now that the film festival’s done, I’m finally able to blog about NetSquared Camp 2010, an unconference of activists, technologists, entrepreneurs, and assorted geeks who want to make the world a better place, in a full-day extravaganza of sharing and networking. It was my first NetSquared Camp ever, and I’m still digesting everything I’ve learned. Here’s a rundown of the talks I attended:

Social Media Ninja School

Cecilia Lu, owner of Kiwano Marketing, started off my day with some tips on using social media to promote one’s brand.

The first thing to do, she says, is to sit down and set some goals. Is this going to be your business or personal brand? What are the measurable results? Fundraising, volunteering, or just exposure of your brand/message? With so many entrepreneurs in Vancouver, it’s important to make your message uniquely you, to catch people’s attention.

Now that we have a focus, we got some practical tips. The question of corporate twitter accounts was raised. What if more than one person is tweeting? Should you use different accounts, or the same account but marked with your initials or something?

Now, how do you talk to people? Don’t be afraid of trying conversations. Engage someone online by following them, then replying or commenting (but intelligently) if you have something to say. Don’t be shy, and you can find clients, friends, even mentors.

And what’s the ROI? Sales (or whatever your goal is) are not going to skyrocket overnight. It usually takes time to build trust, and it will take you time to build a voice, as well. The best thing you can do in the beginning is to listen.

Measuring Social Media Success

Darren Barefoot has co-written a book on social media marketing, based on his years of experience, and that morning he walked us through some of its insights, condensing it into ten basic rules, including:

  • Set quantifiable objectives (as opposed to things like public opinion, or “brand”)
  • Beware of creatively named metrics, like “engagement.”
  • Measure everything.
  • Iterate rapidly, and
  • Fail fast. (These two ideas come from the world of software. Social media is very young, and we’re still figuring it out.)

And, the acronym POST, representing the necessary steps of any social media campaign, in their proper order:

  1. People
  2. Objective
  3. Strategy
  4. Technology

You have to start with people, but so many just start with technologies.

Many of the examples he gave us were taken from his recent work on The Big Wild, a conservation site big on infographics, clear and simple navigation, and easy actions to take. Perfectly consistent with his earlier talk at Northern Voice on doing good on the Web.

(And here are the slides of his talk)

All About SEO

This very informal talk was facilitated by Sean Cranbury, who works as a media consultant.

We talked a bit about keyword research and testing. Google Keyword Tool is your friend here. You need to look for keywords with high cost per click but low competition. That’ll help you stand out from the crowd.

Apparently meta tags don’t make a difference with Google rankings, though they used to once upon a time. For small businesses, you shouldn’t worry too much about keywords; authenticity and passion count for a lot. Quality content is important, of course, but there’s also metadata, dates and locations. All of that counts too. I think it’s here that someone brought up Google Maps as an advertising tool. Create a custom map, add whatever landmarks you wish (like, say, your business), make it public, and voilà, now you’re searchable in Google Maps or Google Earth. It seems this is an amazingly useful but so far underutilised advertising tool.

Then you’ve got the old standbys: blogging, twittering (and don’t forget hash tags!) WordPress provides many SEO opportunities. Sean mentioned a couple of themes that are heavy on SEO: Canvas, and Thesis.

Converting a static site to WordPress (or any other CMS): change as little as possible, including the URLs. If needed, use 301 redirects.

And, of course, to bring in incoming links, you have to have people engage with the site.

Finally, Google Adwords are a good way to test if your SEO campaign will really end up with the results you want. A campaign may last for months, and you want to know right away if it’s going to be worth it.

Advertising Campaigns

Another presentation by Darren Barefoot, on the finer points of Google ad campaigns.

Adwords show up in Google searches, which means we have to focus on keywords first and foremost.

Our ads compete for the top spot; Money × Quality determine your ranking. You pay per click, so it’s okay if an ad isn’t working.

To start, be as specific as you want. To write the ads, use good copywriting, make it compelling. Create landing pages for each of those ads so the action is immediately available, don’t send them to your home page. Then, you want to track conversions or other actions, which is what his earlier talk was all about.

Facebook ads are very different from Google ads, because you can target them by age, gender, or any other preferences.

As a final note, Google ads are not good for revenue generation unless you’re covering your site with ads, and/or have lots of traffic.

Conclusion

NetSquared was an amazing and inspiring experience, with excellent people who I learned a lot from, and who I may be able to help in return. There’s so much being done right here in this city, and I’m going to be a part of it. More than before, I mean.

Also, I have to give a shoutout to Nuba, where a whole bunch of us went to eat. The food was excellent (I’d never tried Lebanese cuisine before), and they handled our large group perfectly well.

The New Look

Well, that took a lot longer than I expected. But then these things usually do, right?

Well, that took a lot longer than I expected. But then these things usually do, right?

The design really only came together in the last couple of months. I remember at Northern Voice I was still struggling with placing a daily photo on the front page, with all the headaches that would entail. I still think it’s a cool idea, but I just couldn’t make it work. On the other hand, I’ve still got Sunset Beach and the West End in my header image. Right now it’s a static photo, but with a bit of thought I’m sure I could make it dynamic…

The other thing that pulled everything together was playing with Twenty Ten. As soon as 3.0 came out I dove right in and started building a new child theme. In hindsight Twenty Ten might not have been the best place to start, since a lot of my layout ideas came from a beautiful theme called Erudite.Though the documentation for Erudite mentions specifically that it’s for writers, I’ve found that it does pretty well for any content. (Hell, my inspiration, the lovely Life For Beginners, is very photo-heavy, and it works quite well.) I was attracted to Erudite’s clean and open layout, with minimal content in the sidebar, and had decided then that blogrolls, category archives, or what have you, could either go in the footer or just disappear.

Mind you, Twenty Ten is a great learning tool, so it certainly wasn’t wasted time. At WordCamp one of the speakers said you should try to develop your themes from scratch, because when adapting existing themes you may wind up with unknown design issues or unnecessary features. True enough (for example, I’m not using half of its widget areas): but I’d never gotten so deep into a theme before, and at least now I have first-hand experience of all these features I may or may not need.

What else? A lot of little things: threaded comments, gravatars, an honest-to-gosh contact form, courtesy of the excellent Contact Form 7 plugin. A redone blog archive page, inspired by that of Equivocality, and using the same plugin, Smart Archives.

Also, I decided to drop categories and go with tags. For a while I thought about using both, but every category scheme I came up with was either (a) so broad it became useless, or (b) so fine-grained it might as well be a tag cloud.

And finally, a portfolio! I’ve been talking about my volunteer web design projects for a while now, so why not show them off?

What I learned from managing the COMP 1950 project

COMP 1950 — Intermediate Web Design & Development. I decided to take this course because, though I’ve been doing Web design for years, it was all self-taught, and I figured there were some gaps in my knowledge and methodology.

COMP 1950 — Intermediate Web Design & Development. I decided to take this course because, though I’ve been doing Web design for years, it was all self-taught, and I figured there were some gaps in my knowledge and methodology.

Most of the course wasn’t too challenging to me. XHTML? CSS? No problemo (though it was a useful refresher on some advanced CSS techniques I’d read about but never used, like attribute selectors). The class on development methodology was a good formalising of techniques I’d been trying to use on my own, and the jQuery class was quite useful.

I admit I got a little overconfident about the midterm, and flubbed a couple of questions I could have answered if I’d studied a little more. Or, y’know, at all.

Then came the final project: five of us doing a small site mockup and design. It wasn’t a terribly big job, but it would be a good exercise to apply everything we’d learned so far. I could have let someone else take the reins, but since I knew the most Web design of my team, I figured I was here to learn, so I focused on another one of my gaps: I volunteered to be the manager and spokesman.

What did I learn?

  1. I learned not to micromanage. Several times I was tempted to take charge, tell my teammates How Things Should Be Done, but I heroically resisted. This was their project too, and they had to learn by doing. I helped them along by mentoring and advising, and keeping track of the big picture.
  2. I learned I had to plan. Realistically, it wasn’t much of an option, because we only had a couple of weeks together as a team. We got the job done, sure, but it probably wasn’t that efficient.
  3. I learned I had to get to know my teammates. Before we got together, I’d only spoken to two of them (my immediate neighbours). I knew the skills of one of them, and that’s it. In our one team meeting we divided up tasks pretty well, mostly by volunteering, so that turned out okay.
  4. I learned I could do it. And that’s a big deal, because I’d never been in a leadership position before, and wasn’t sure I had it in me to do it. And sure, things didn’t go as smoothly as I would have liked, but we finished the project on time, didn’t kill each other, and I got praise from some of my teammates for my managing. So hey, mission accomplished!

Accentuate the Visual

I’ve been working on a redesign of this blog for a while now, on and off, and it’s finally close to done. At the same time I’m updating a lot of my posts to add more inline photos.

I’ve been working on a redesign of this blog for a while now, on and off, and it’s finally close to done. At the same time I’m updating a lot of my posts to add more inline photos. It hit me, looking at other more photo-intensive blogs (like the lovely Life for Beginners), that my posts are mostly unbroken walls of text. Even those that aren’t, just have a few modest thumbnails linking to their respective Flickr pages.

Well, that just won’t do. Not only will more photos make my brilliant words easier to read, but visitors won’t have to click to another page to get the story. It’s win-win!

I’ll be adding other elements, too, like gravatars and pull quotes. Maybe an abstract for the very long ones. And drop caps, too? We’ll see. Thinking visually is still new to me, but I’m getting the hang of it!

I feel like I just found the button that turns my car into a giant mecha

… though it’s still got some weird bugs, and the same clunky interface.

… though it’s still got some weird bugs, and the same clunky interface.

Okay, so I’ve been plugging away at the teamvancouver.net redesign. The new graphics are sort of coming along—I’ve been redoing them a dozen times, but a few days ago I had a burst of inspiration, so I think I’m finally on the right track. Then again, I’ve said that before.

Anyway. The thing about teamvancouver.net is that it’s built on an actual CMS: WebGUI, to be precise. The learning curve was steep and painful, since it was my first stab at mastering a CMS, the interface is pretty unfriendly, and it turned out I wasn’t even working with the real admin account! The one login I was given had a lot of editing privileges, but not nearly what I needed to do a proper job of redesigning and administering the site. Lots of functions were missing, whole directories were locked, etc…

So I eventually called the hosting provider’s support team to clear this all up, and figure out what I could and could not do. It might be that these restrictions were a matter of policy. But no, it turned out I was just using the wrong account. Finally, I have the godlike powers I’ve been been craving all along!

And now I’ve got a confession to make: part of the reason why I enjoyed working on VGVA.com more than teamvancouver.net was that working with WebGUI this was was like swimming through quicksand, and I wasn’t sure I could deliver on my ideas. vgva.com was under my complete control. Though my little PHP scripts did less, they were all mine and I knew exactly what they could do.

But that’s how it works, and the thing is, I’ve done this before. Long ago I dropped homemade PHP scripts for WordPress (still running on PHP, so not that big a stretch), with my blog. It may be that someday, if I’m still webmaster, I’ll do the same for vgva.com*. No rush, though. In the meantime I get to explore another CMS, with a different code base, it’s true, but no less interesting and powerful. I’m finally seeing it can do all I wish, and more.

(* Well, it probably won’t be WordPress)

Blue!

No, not me. I’m still between jobs, still looking, but I’m not letting it get me down. I’m keeping my brain active, playing around with cool Web technologies like jQuery and Flex. It’s fun.

In addition to learning new tools, I’m building my portfolio.

No, not me. I’m still between jobs, still looking, but I’m not letting it get me down. I’m keeping my brain active, playing around with cool Web technologies like jQuery and Flex. It’s fun.

In addition to learning new tools, I’m building my portfolio. This is something I wouldn’t have considered a year ago, but recently I’ve been working on a few interesting websites. Of course, you already know about VGVA.com. All it needs now is routine maintenance and content update, with the occasional new theme. I’ve got a few ideas for improvements, but for now it looks nice and it works.

Also finished earlier this month, a project I hadn’t mentioned before: http://loucrockett.com. This is the portfolio of a friend of mine, originally done all in Flash. Problem was, the code was old and failing in most modern browsers; since I didn’t know Flash and the original developer was unavailable, I decided to re-implement it in PHP. The functionality’s just the same, minus some pretty eye candy, plus a couple of little extra features. I bet there are lots of other tricks I could do to make it even prettier, once I get the hang of jQuery.

Which is not gratuitous or useless. I’m just showing off my skills, is all.

Third: Team Vancouver. I’ve been working on this site quite a bit in the last few weeks; the design’s not done yet, but we’re well on our way. I tell you, there’s no feeling like looking at a half-finished design and suddenly seeing how it’ll all come together in the end. Instead of the blah green design, I took my inspiration from the new Team Vancouver uniforms and put together a kicky blue palette with sharp lime green accents, that has zing and pizazz and all sorts of “z” words. Add a revision of the site structure and content, a reshuffling of the layouts, and we’ll have ourselves a site that’s fun, fresh and eminently usable.

So that’s what I’m up to lately. Once I get all that out of the way, I’ll have time to really get cracking on redesigning this blog.

Chaos and Numbers

I finally have the bones of my new design. It’ll be a 3-column layout, 960px wide. Spent so much time fiddling with the widths, and then it hit me: all I had to do was take a clue from the 960 grid system and let column widths be fractions of the total width. Easy-peasy.

I finally have the bones of my new design. It’ll be a 3-column layout, 960px wide. Spent so much time fiddling with the widths, and then it hit me: all I had to do was take a clue from the 960 grid system and let column widths be fractions of the total width. Easy-peasy. After a bit of experimentation I settled on a 5-column grid, with the left and right sidebar each taking up one column, and the main content section taking up three. The main page will be built on a four-column layout, and will feature a bit more than just a list of recent posts.

And you know, there’s something deeply There’s something deeply satisfying about these proportions. Something clean and orderly. Ancient Greeks (as I understand it) dabbled in numerology, getting all mystical about numbers like the Golden Ratio even as they practised solid mathematics. I can understand that a little better now.

Now comes the hard part: fleshing it all out. But I’m working on that.

In other news, the Team Vancouver is coming along. I had some good breakthroughs in the last week, but I’m one step behind my own site. Instead of seeing everything coming together, I’m at the stage of breaking everything down, trying to forget the present design. It’s all right, though, that’s another kind of satisfaction, to ignore what is, and start seeing the possibilities…

Out of chaos, I bring order. Out of order, I create chaos. To everything, there is a season.