Web Development

My Weekend at Seattle GiveCamp

Thursday, October 25th, 2012

I spent the last weekend attending Seattle GiveCamp on the Microsoft campus in Redmond. If you’re not familiar with it, it’s a yearly event where designers, developers, and other technical & marketing folks get together and help out local not-for-profits for a weekend.

It’s about 48 hours from start to finish, beginning on Friday evening. There were long days and nights (some folks even slept over) and it was hard work but what a wonderful time! It’s not often I get up at 7am and I’m out until 10:30pm or later. Luckily the drive was off hours so it only took 25 minutes instead of … I don’t even want to think about it.

I met and worked with some really amazing people. Our team worked on a new WordPress website for fellow West Seattle-ites Southwest Youth & Family Services. (Big thanks to the folks from SWYFS – it was a true pleasure meeting & working with you!)

Here’s the before:

Southwest Youth and Family Services website before

SWYFS had an HTML site that they wanted to convert into a WordPress website so it was easier for them to update. Our designer, Sheyna, kept most of their design elements and spruced them up a bit. We added a slideshow to the home page, featured image banners (in place of the slider) on all the other pages, as well as updating the navigation and adding a News feed (blog).

I built the WordPress theme from scratch (not something I’ve ever done in less than 48 hours before and I don’t think I’ll be trying it again anytime soon – but it was worth it!). I started with the Boilerplate theme and used Sheyna’s design to create their custom theme. The slider is one I’ve worked with several times before, Advanced Slider (from CodeCanyon). I set up the banners so that everywhere but the home page, it uses the featured image if it’s set and uses a default image if not.

Here’s the after:

If you have the chance to participate in a GiveCamp near you, please do. It’s a great way to give back and I think you’ll really enjoy yourself. You don’t have to be a designer or developer (or geek of any kind, for that matter). If you don’t have a particular technical skill you can help out as an administrative volunteer. It’s a good way to spend a weekend and help out those that help others in the process.

Tags: custom WordPress theme, GiveCamp, Seattle GiveCamp, Southwest Youth & Family Services, WordPress
Posted in Featured Project, Web Design, Web Development | No Comments »

Featured Project: MIO Nonprofit Corporation

Wednesday, July 13th, 2011

I recently finished a WordPress website project for MIO Nonprofit Corporation. They provide public education about the benefits of broadband in Washington state. The main focus of the website is to share information by posting featured stories, blogging, and linking to social media.

To keep costs down I used an existing theme, Link, from Theme Forest and customized it to compliment the Move It Online LLC website. The theme uses HTML5, some CSS3 elements, and incorporates Nivo Slider and Timthumb.

Original Link Theme

MIO Nonprofit Corporation website

The original theme is pretty dark and MIO was going for a very simple, clean look. So, I lightened it up quite a bit and got rid of most of the gradients and backgrounds.

I kept the main structure of the website and a lot of the functionality, but I changed some key pieces.

Changes

Separate Blog page

MIO wanted to have three very distinct sections of articles/posts: the Information categories separate from the Communications: Past, Present, & Future section and the blog, which would have more of an editorial feel. I created a separate theme template and page to show only the blog posts. Currently, it is showing blog posts and articles from the Information categories until they have enough blog posts to display on their own. Having a separate page for the blog sounds simpler than it is. The current “Home” page is the blog as far as WordPress is concerned. If you try to configure it otherwise, of course, it breaks everything! So I created a page of posts using a tutorial from #! code as a guide.

Other Changes

I removed the top navigation bar, added social media icons to the navigation, moved the search field from the top navigation to the main navigation bar, and removed some of the widget functionality in the footer. I added Twitter and Facebook feeds to the sidebar on the post/article pages and used Widget Logic to keep the About Us sidebar widgets confined to the About Us pages.

Before/After Slider

One of the key articles on the MIO Nonprofit Corporation website is on the Tulalip Tribe’s success with broadband. It includes a before and after slider to show aerial photos of how broadband increased business growth and development, similar to the one the New York Times used to show the effects of the tsunami disaster in Japan. The before/after slider from Catch My Fame is an easy to set up, lightweight jQuery script.

Snapshots

Click an image to see a larger snapshot of the website.

Visit MIO Nonprofit Corporation to view the full website and to learn more about broadband in Washington.

Tags: before/after slider, CSS3, HTML5, jquery, MIO Nonprofit Corporation, WordPress, WordPress customization, WordPress themes
Posted in Featured Project, Web Design, Web Development | No Comments »

Weekly Tech Roundup – April 29, 2011

Friday, April 29th, 2011

Weekly Tech Roundup

I read a lot of blogs. I subscribe to a lot more blogs than I have time to read. Sound familiar? If you're like me, you don't have time to read everything you want (if you do, please tell me your secret). In an effort to reduce the chaos of life, I do two weekly article roundups: one for technical things and one for small business things.

Here's a roundup of the most interesting tech articles I found this week. Enjoy!

10 Characters for Your WordPress Blacklist – As pointed out by someone in the comments, if you have “Comment author must have a previously approved comment” turned on, these spam comments will never get through. Still a good tip.

Faking ‘float: center’ with Pseudo Elements – Awesome tip! Had to share.

Writing made easy with Writing Helper – WordPress has added two new features to their wordpress.com blogs: Copy a Post and Request Feedback. I really hope they add these to Jetpack soon so we wordpress.org folks can use them! I’ve been dying for a post copying feature for a while now. Particularly for these weekly posts!

Why IE9 is a Web Designer’s Nightmare – A cautionary tale for designers and developers who think they no longer have to worry about IE-specific design & code with IE9. It’s no IE6 but it’s far from perfect. My advice is to continue cross-browser testing when you create a website. You’ll have to do it anyway until everyone is on board with the same HTML5 and CSS3 standards.

21 essential resource sites for web designers – An excellent resource for designers, developers, and those that want to learn. I noticed two comments at the bottom of the post: one commenter suggests W3Schools and the other suggests W3Fools. I use W3Schools occasionally when I can’t remember the exact syntax for something and want to look it up quickly. I’ve never used it for detailed “how to” so I didn’t realize how bad they are. I have noticed several times that they were wrong but I figured it was just outdated (like many educational things are). W3Fools is a very interesting read.

Have a great weekend!

Tags: comment spam, CSS, IE9, resources, w3fools, w3schools, WordPress
Posted in Technical, Web Design, Web Development, Weekly Tech Roundup | No Comments »

WordCamp Seattle 2011 Recap

Tuesday, April 19th, 2011

This was my first WordCamp. I had no expectations and while things were a little shaky, it was a really great experience. I attended with Joy Worthen of Worthen Creative.

Getting a parking pass, finding the building, and getting through the enormous check-in line was really the worst part of the day. Good thing it was at the beginning!

We missed the opening remarks and arrived after Scott Berkun had begun speaking. He was a great speaker, super easy to listen to and informative. He talked about how Automattic runs WordPress.com (hosted) and how that translates to WordPress.org (self-hosted). I found it fascinating that they use WordPress to the extent that they do. I mean of course they use it, it’s their product, but they use it in cool and unique ways. For example, the P2 theme, which they developed and use for team collaboration. I’m on a mission to find a project management tool that is actually useful for me, so I was very interested in this part. I’ve since installed it, but I haven’t played with it much yet.

He also talked about JetPack, which essentially is a bridge between WordPress.com and WordPress.org. It combines several plugins that were previously only available for WordPress.com sites with a few that you could get individually for WordPress.org sites (e.g. WordPress.com Stats). One funny moment was when he asked for a show of hands for who had heard of JetPack and maybe 10 people raised their hand. Then he asked how many had installed it and it was only one or two. He was very disappointed as his team was the one that developed it. I’d seen it before a few times but I hadn’t installed it. I have now and it’s pretty cool. I’ve already turned some of the built-in stuff off, but I think it will be great in the future when they add more functionality.

Cool stat: 15-20% of all tweets include URLs and probably most of them are to blogs.

Next we broke up into three tracks: user/blogger, themes, and development. I went to development, which was “Using AJAX in Plugins and Themes” by Will Anderson. Yes, the ratio of men to women in the room was about 25 to 1. Not surprising, right? Anyway, the bulk of the presentation was very basic, how to call jQuery properly and some simple examples. I think just about everyone in the room already knew everything he was covering. I know it’s hard when there is such a wide range of skill levels but I was hoping for something a little more advanced.

Here is his presentation: Using AJAX in Plugins and Themes (PDF)

After that, I went to the theme track and stayed there the rest of the day. The first presentation I saw there was from Toby McKes of Cheezburger. Yes, the LOLCat guys. The topic was “Cool as a LOLCat: Making Custom Theme Options Easy” and it was pretty damn neat. They have a custom admin panel called CheezCAP that they’ve created that allows them to do a bunch of configuration changes in the admin instead of hand coding it all. It’s available for download for anyone that wants it. It will be in the WordPress plugins directory soon. I’m definitely going to check it out. It could be very useful.

Cool stat: WordPress is about 12% of the Internet and about 10% of that is Cheezburger.

Next up was “Theming for the Masses” from Michael Fields. This was another amazing presentation. He created a free theme, documented his experience, and presented it to us as a case study. Lots of lessons learned and interesting information. You can find his Ghostbird theme in the WordPress theme directory.

He also gave us tips for some plugins and tools: Theme Check, Theme Unit Test, and Meteor Slides.

He said the presentation slides and some discussion points would be coming shortly to his blog in post format.

We had a hard time deciding on the last track session to attend but we ended up staying in the theme track for “Advice for Selling Your Theme” from Chris Molitor. I’m so glad we did. I have the most notes written down for this presentation! He talked about selling themes in three major marketplaces: Theme Forest, Mojo Themes, and Woo Themes. He went over what you want to provide in your themes as a designer/developer, marketing, branding, and support. It was quite thorough.

Here is his presentation: Advice for Selling Your Theme (Zip)

We then watched an interview with Alex King, which was very quiet and hard to follow. I honestly can’t remember what they talked about. I was fading fast at that point. We missed the Ignite WordCamp presentations because we’d had enough fun for the day and took off early.

All in all I think it was a great time and definitely worth the money. I’ll be back next year.

Tags: WordCamp, WordPress
Posted in Technical, Web Design, Web Development | No Comments »

Weekly Tech Roundup – March 25, 2011

Friday, March 25th, 2011

I read a lot of blogs. I subscribe to a lot more blogs than I have time to read. Sound familiar? If you’re like me, you don’t have time to read everything you want (if you do, please tell me your secret). In an effort to reduce the chaos of life, I’m starting two weekly article roundups: one for technical things and one for small business things.

Here’s a roundup of the most interesting tech articles I found this week. Enjoy!

Firefox 4 Review – Firefox 4 officially came out this week. If you’re wondering whether you should upgrade, this review should help you decide.

How to Fix Annoyances with Firefox 4’s New Look – If you’ve already downloaded the new Firefox 4, you’ve probably noticed it’s a little different. Personally, I find it faster (which is great because I’d recently switched to Google Chrome over performance issues with FF 3.6) and I kinda like the new layout. This article gives you some tips to make the new FF feel more like the old FF.

A few more Firefox 4 articles: Firefox 4 Available, 11 Must-Have Add-Ons For Firefox 4, and the very interesting new speed tests from Lifehacker Browser Speed Tests: Firefox 4, Internet Explorer 9, Chrome 11, and More.

How To Choose A Typeface – I love fonts. I’m not good enough to spot one and tell you exactly what it is or anything, but I love them. I collect them. This is a really great article from Smashing Magazine on choosing an appropriate typeface for your project.

Farewell IE6 – Are you one of the 2.9% of Americans still using Internet Explorer 6? (please tell me you’re not!) Apparently only 12% of the world is still using it. I think that means we can finally stop caring about how our websites look in it. Even Microsoft is on board to say goodbye to IE6 for good. If you’re still using IE6 (or even IE7), it’s time to upgrade. Current versions of all major browsers: Internet Explorer, Firefox, Google Chrome, Safari, and Opera.

Ultimate HTML5 Cheatsheat [Infographic] – Excellent HTML5 cheatsheet for designers & developers. It includes everything you need to know and what browsers support which features.

Tags: browser speed, Firefox 4, fonts, HTML5, IE6, tech news, typefaces
Posted in Technical, Web Design, Web Development, Weekly Tech Roundup | No Comments »

Troubleshooting When Something Goes Wrong

Thursday, January 13th, 2011

There is nothing more embarrassing than having something broken on your website. What’s worse? When you’re a web developer and you have something broken on your website. Yes, unfortunately, it happens to everyone.

Note: This post might be a tad on the technical side for some of my regular readers. If you don’t feel comfortable troubleshooting an error on your website, contact me to have a look for you.

So what do you do when you find something isn’t working? (After swearing and/or crying.) Not every problem is going to work out the same, but there are some practical steps you can take to hunt down the source of the problem.

Determine what’s happening (or not, as the case may be). Make a note of everything that is happening, what should be happening, and where is stops working.
If you’re comfortable, take the offending code out of your website. Especially if you can’t fix it right away, take out what isn’t working so your users aren’t discouraged or deterred by it.
Again, go with your comfort level – Create a new page for testing purposes. Copy and paste the original code from the page that’s not working into a test file. You can use this to troubleshoot what’s happening and not have a negative effect on the rest of your site.
This is where it really starts to depend on the problem you’re having. Look over your code and make sure there’s nothing obvious wrong. Misspellings are the #1 culprit of errors. If it was working previously (and you’re sure it was working) then you can be brief here. Just double check. There’s almost nothing worse than spending an hour or more troubleshooting something only to discover it was a typo.
If the element that’s not working has multiple pieces, try commenting them out, one at a time, to see what changes. For example, if you are using a tool like FancyBox (like I am elsewhere on this site), try commenting out the optional script calls. If you are using any plugins or widgets (in WordPress, for example), try disabling them one at a time to determine which, if any, is causing the problem.
Check to see if there’s a new version of your app/tool/plugin/widget. If there is a new version, the author may have fixed the problem you’re experiencing. Note: This can also be the cause of some failures! If you’ve recently updated the item that is broken, try to revert to a previous version. If reverting works, you might need to check with the author about what changed in the new version and why it no longer works for you.
Use Google. Check the Help site. One of the best troubleshooting tools is Google. Perform a search using terms related to the problem you’re experiencing and see if any of the results sound right. At the very least, you should be pointed in the right direct. If your problem is coming from an app/tool/plugin/widget, look for the author’s website. Usually they have a Help or FAQ section with detailed information to help you troubleshoot.

There are many more problem-specific options to try. If you’ve tried all of these steps (or you don’t feel comfortable doing them) and you’re still stuck, then give your web person (hopefully me!) an e-mail or call. Include everything you noted from step #1 and how you’ve tried to fix it.

Tags: problem solving, troubleshooting, website errors
Posted in Web Design, Web Development | No Comments »

Recent Posts

Archives