Category: Web

Why I Love OpenStreetMap

OpenStreetMap logo drawn by Ken Vermette.What have I been up to lately? Mostly editing OpenStreetMap. It’s an online map free for the world to edit and use. Think of it as the Wikipedia of maps. It lets users correct errors and add new data to keep it up to date. My wife would say it’s become an obsession, but I just love good data so I’ve been very active in mapping the world around me.

The whole idea behind OpenStreetMap is to create a useful, up-to-date map for the people, by the people. It’s free to use in your projects (just requires an attribution, no payments). You can style the data however you’d like, in fact some services like Mapbox make it super easy to create stunningly beautiful maps.

I first heard of OpenStreetMap when Foursquare made the jump from Google Maps. I was intrigued by the project. I was already a very active super user on Foursquare, editing their data, so it seemed like a natural step to edit the mapping data they were now relying on behind the scenes.

It’s been very rewarding. Kalamazoo wasn’t terrible road-wise, but they had barely any other data on the map. I started with Western Michigan University’s campus. As an alumnus and employee spanning nearly a decade, I’ve become pretty familiar with the area. I traced all the buildings, parking lots and sidewalks. I tracked down the info on WMU websites to fill in correct building names and information. As I travel around campus for meetings, I make note of certain things (like bus stops) and add those in too.

I expanded my reach far beyond WMU, or even Kalamazoo at this point. I’ve taken part in some of Scout’s OSM challenges and have made edits throughout the United States. I haven’t won yet, but I’m going to keep trying. I really enjoy cleaning up and adding data. I find it strangely soothing and absolutely satisfying. One of the coolest parts is seeing that data pulled into Foursquare. When on their site, the maps show all the building traces that I (and others) have done. It’s nice to see some more context to the maps than just empty gray space between white road lines.

One of the best part of OSM is that it’s an ongoing project. It will never be finished because the world is constantly changing. New roads, new buildings, they’re being built everyday. I’ve really enjoyed being a part of the project and I highly encourage everyone to find out what it’s all about. Edits can be as simple as fixing a one-way street or as massive as mapping out all of your city’s schools. OSM relies on everyday people with local knowledge. You could really make a difference.

Are you intrigued yet? Start with this welcome page and then check out the wiki and help sites to dive further into the OpenStreetMap world.

Merry Christmas from the Joneses

Abby and Christopher want to wish you a merry Christmas. Check out www.abbyandchristopher.com

 

I hope everyone is having a wonderful holiday season. My wife and I decided to try a new take on the traditional Christmas card thing. We’ve decided a website card is more our style. Since we still have abbyandchristopher.com from our wedding website, we’re going to update it each year with a year in review and Christmas greeting for friends and family.

For me, it’s a great way to experiment with some Web design techniques. This year’s site uses the “full-page” trend that’s so hot now. It was fun to experiment with and I’m pretty happy with the final product. I was careful to craft something responsive since so many people will be looking at it on various devices. I wasn’t able to test on everything, but from the testing I did do, it works well at any size. I look forward to trying something new next year. I think I’ll archive each year’s site, which will be fun to look back at as time goes progresses.

Merry Christmas, everyone!

Review: GroupMe

GroupMe logoGroupMe is a service I’ve been happily using with my friends for years now. It’s great for sending messages amongst a group of people. It’s device independent, in fact even people without smart phones can receive and send messages via SMS.

The basic idea is you have various people assigned to groups. Then you can send a message (whether that be an SMS to a dedicated number or a message using one of their apps) and GroupMe takes care of delivering that message to all members of the group. It’s really handy for a group of friends who regularly hang out. No longer do you have to send out a mass text only to get various responses from people and then having to send out another message to let the rest of those people know who replied to the first one and what they said. With GroupMe, you send one message that everyone in the group receives and their replies are also sent to everyone in the group.

Why use GroupMe? It’s easy. It’s free. It takes very little set up and you can add new groups with ease. Do I need to continue? It’s really a big time saver. Trying to get the family together for the holidays? Set up a GroupMe and everyone can stay in the loop. Going to the beach on Saturday? Start a GroupMe so everyone can plan what they’re bringing and where you’re meeting.

Various phones using GroupMeWhile GroupMe is designed to work with SMS, it really shines at its brightest with their apps. There are apps for iOS, Android and Windows Phone. With the native apps you can opt to have messages routed through the app instead of SMS (you can still be notified of new messages via push messages). This gives you the benefits of seeing all your groups in one place. Managing current and new groups is a breeze right in the app. Other app features include a “typing” indicator, profile pictures and an easy way to see who’s in each group.

The design of the app feels very native to each platform. They’ve done a nice job using their own design language, but within the expected experience of each platform. You know it’s a GroupMe app, but you’ll feel at home using it whether you’re an iPhone or a Windows Phone user. You won’t see one of those crappy ports here.

Over the years they’ve continued to improve the GroupMe experience. They’ve added the ability to send photos and videos with your message, and you can even include a location, so it’s easier to meet up with friends. There’s also a Web interface to make sure you’re always able to connect with your groups. One thing to note is that with the app or website, you can stay in contact with your friends when you’re out of the country (as long as you have an Internet connection). No huge roaming SMS fees; now that’s a bonus.

GroupMe has done a fantastic job with their service. It makes texting with multiple people a breeze, regardless of their phone type. I’ve experienced very little downtime while using the service, and anytime there is a problem, they seem to jump on and fix it very quickly. I highly recommend giving GroupMe a try.

Intro to Interactive Programming in Python on Coursera

For some time now I’ve been intrigued with Coursera. The idea of being able to take real courses, for free, online, just seemed amazing. My friend, Rachel, has been a big proponent of it, and had time and time again pestered me to give it a try. For whatever reason, I hadn’t until recently.

A few weeks ago I started a Coursera course through Rice University called An Introduction to Interactive Programming in Python. As the title implies, it’s a beginner course dealing with Python (a programming language). While I’ve programmed some in the past, it’s all been pretty basic and mostly self-taught. I took a couple of classes in Visual Basic and C++ back in high school, but that was over a decade ago. Lately my coding hasn’t gone much beyond HTML and jQuery. The Python class sounded like fun, especially when reading that the final project is an Asteroids clone.

I’m now wrapping up week three of the class and I’ve already learned a lot. It turns out Python has a lot in common with other languages I’ve worked in (C++, Java, C#), but also has different features (like the lack of semi-colons after every line, thank you!). To make the class really accessible and easy to complete, the professors even created an in-the-browser environment to write and run your code, called CodeSkupltor.

Every project in this class takes the skills you learn about each week, and applies them to mini-games. The first few projects have included a rock, paper, scissors, lizard, Spock game (based on the Big Bang Theory reference), a guess the number game and a stopwatch that tests your reflexes. All of these can be run from a modern browser, so click the links and give them a try. Just his the “Run” button in the upper left.

It seems like we are learning great amounts from week to week and I can’t wait to see what’s next. This has been a great experience with Coursera so far, so I’m already looking at what to take next. Have you tried Coursera? What did you take?

A Responsive Retrofit: Frostic School of Art

Frostic School of Art HomepageA long, long time ago, in a gala… I mean when I was but a mere student of graphic design, I designed a really cool website for the Frostic School of Art along with fellow student, Max Millermaier. When it was time to build the site, I was hired on after graduation to do so. So in the summer of 2009, I was so psyched to launch, what at the time was, a bleading-edge, video-background website. Fast forward four years and the site was starting to feel sluggish, dated and disjointed.

A few months back I started thinking the Frostic School of Art’s site was a prime candidate for a makeover. I didn’t want to completely remake the site. Instead I decided it just needed to take advantage of the latest trends and technology. I dropped the dreaded use of Flash for videos and replaced them with HTML5 video, thanks to BigVideo.js.

iPhone screenshot of Frostic School of Art websiteThe next step was to make it mobile friendly. I’m a huge fan of responsive websites and have dabbled with them for a while now. I recently did a project that used the Skeleton boilerplate and found it to be very easy to use and produce great results with. I set off to re-write the whole site on top of the Skeleton. It wasn’t a small task, but in doing so I removed a lot of messy and redundant code. Like I said, the original site was made in 2009. A lot has changed in the Web world, and I’ve learned a lot too. Now the site looks awesome whether you’re on a desktop, a smartphone or a tablet.

Another goal I wanted to complete during this process was clean up. Over the years, files, directories and content became a mess. By starting from scratch, I was able to cleanup a lot of the mess. Now the end user should have an easier time getting around the site and finding what they’re looking for. There’s still some work to be done, but it’s already improved leaps and bounds.

Overall, I’m quite pleased with this retrofit. It’s not always an easy task to take an existing site and slap on a responsive framework. I suppose in a way, I didn’t really do that. I more or less rewrote the site, staying within the design guidelines of the original, but replacing almost all of the underpinnings. It was interesting to revisit a design from four years ago, and I’m happy with the results. What do you think?

Screen Shot 2013-05-15 at 2.48.09 PM

The User is Drunk

User experiences and interfaces are some of my greatest interests. My love of design and technology fuels this, but even in everyday life I am constantly thinking of user experiences. Whether it’s using a self-checkout at a supermarket or driving through a round-about, my mind is always thinking of how it could be better or how clever it is. That’s why I really enjoyed this little video called “The User is Drunk.” It’s a humorous take on user interfaces, but it makes very valid points.

When I’m designing websites and other interfaces, I’m always trying to keep things simple, elegant and most importantly easy to use. The video points out imagining the user as drunk is one way to ensure your end user’s experience is a good one. My personal rule of thumb has always been, “Can my mom use this?” but “the user is drunk” works too. Either way, the point is the same. Interfaces shouldn’t be complicated. A user shouldn’t have to have a computer science degree to fill out your form. In the video, he brings up the point that a good user interface disappears  I couldn’t agree more. The less you notice an interface and just get done whatever you were trying to do, the better.

Enjoy this little video, and pay attention. There are some great points in there, even if the title is a bit funny.

Review: Gogobot

Gogobot

Gogobot bills itself as a social travel site. It is part reviews, part recommendations and part passport of your travels. I’ve been using it for almost a couple years now, and I love it. It is full of terrific information that seems much realer than Yelp or similar services.

I was originally drawn to Gogobot just before I left for Switzerland. I read about this new startup that was hooking up social and travel in compelling ways and thought it might be useful. One of the cool social features is its integration with Foursquare. I hooked up my account and now it auto imports places I’ve been right into Gogobot. On occasion, I go back through and look at my recent imports. This gives me a good place to start when I want to post reviews of recent places I’ve been.

You do not have to be a Foursquare user to take advantage of Gogobot. You can add other places via their website or mobile app. I went through and added a lot of trips I took before ever having Foursquare. After you have added a few places you have been, you start building your digital passport. It gives you a nice breakdown of the countries, cities and individual places you’ve been. Sometimes I find myself just browsing it to relive old memories.

Screenshot of a Gogobot passport page.

Like many other travel sites, reviews are part of Gogobot. You can add a star rating, a short text review and/or photos to any place on Gogobot. It is pretty standard stuff, but when combined with the other site features, it becomes quite handy.

One of the coolest features, and one that sets it apart from the pack, is letting users ask questions to the community. Let’s say I’m headed to Toronto for a weekend and want to know the best places to eat or how to spend my Saturday afternoon. I can head over to Gogobot and post a question. Anyone who has been to Toronto (or my friends) would automatically see my question show up in their feed. If my friends so choose, they can add places I should check out.

Something that makes Gogobot fun to use is its gamification. There are a number of badges you can earn for various things like adding photos or reviews and having other people like your reviews. Each time you do an action (even visiting the site once a day) you earn points. There is a site-wide leaderboard that you can compete to be on top of (I used to be in the top 100, but as the site grew and I explored the world less, I’m in the 300s now. Each year Gogobot chooses members with outstanding contributions and badges them as pros. I was a 2012 pro, and it was pretty cool to have that little badge on my avatar throughout the site. There are even pro meetups in major cities (SF, NYC, Chicago), but I could never attend one. Maybe next year.

I’ve watched Gogobot really grow in the last couple of years. When I first started using it, there was not a lot of content outside of some major cities, and there were not a lot of users. It has since really blossomed, and now contains a wealth of information. The site itself has added many new features like making reservations for hotels and restaurants right on the site. Overall I’m extremely pleased with it. I find it quite useful for planning trips, or even discovering cool places I want to visit someday.

Project: Partners in Dance

Screenshot of WMU Partners in Dance website.

I  recently launched a website project at work for Partners in Dance, which is a community support group for Western Michigan University’s Department of Dance. It was a fun project because there wasn’t a ton of content and I could have a little fun with the design.

I opted to keep it very clean and simple with a big, bold area for photos. The dance department provided me with some great shots from previous performances. I noticed most of the pictures had a natural “fade to black” quality to them. I capitalized on this by creating a black band at the top of the page. I then set it to randomly choose from a variety of images that all make it seem like the photo exists across the entire top of the page.

The “Partners in Dance” logotype at the top carries over from a brochure they had made previously. The rest of the type is a Google web font called Lato. I was trying to find a nice sans-serif with a good mix of weights and Lato seemed to fit the bill.

Below are a few more screenshots, but be sure to check out and explore the live site. Feedback? Questions? Leave them in the comments.

Screenshot of WMU Partners in Dance website.

Screenshot of WMU Partners in Dance website.

Screenshot of WMU Partners in Dance website.

Opinion: Reset Buttons Suck

Have you ever filled out an online form only to lose it all by a poorly placed reset button? Why do these buttons even exist? I can’t think of a time I’ve ever filled in a whole form only to say, “hey, I didn’t really want any of that information, let me erase it all at once.” Luckily in recent years it seems less and less forms have these annoying buttons but they still exist. I’m calling for everyone to check their forms right now. Go ahead, I’ll wait… If you’ve got a reset button on your form, it’s time to reconsider that choice.

A reset button is just a bad user experience. A user can easily change the information they’ve entered without having to delete it all in one click. I’d say almost no one intentionally hits that reset button. It’s probably an accidental click while thinking it was the submit button. Having that button in place is doing more harm than good. Do your users a favor and leave off that reset button. That way you don’t have to needlessly frustrate your users and you have the added benefit of a cleaner, less cluttered form.

Project: University Theatre 2012 Season Site

At work I’m often playing within strict guidelines. The university is moving everyone into the same look and feel on the web as part of their massive branding effort. It makes sense but it can be dull when you’re working on it day after day. Sometimes it feels like I’m just going through the motions.

University Theatre Season website screenshot

That’s why I was so excited to have a project that breaks the mold. The University Theatre at Western Michigan University was interested in a website to feature their upcoming shows for the new season. Luckily they fall under one of the areas I work for so I was happy to oblige. The overall design of the posters and other materials were done by interns in the Design Center (oh the memories). They were a great jumping off point for a new website.

I tried to keep the overall “awaken” theme the interns had come up with in their work but translate it to the web. I filled the site with the pertinent information about each show and how to get tickets. It is an extremely simple site and there were still some stiff requirements but compared to the templates I usually work in all day, it was creative field day. It’s nice to break away from the constraints every once in a while and think creatively. Make sure you explore the University Theatre 2012 Season Site and let me know what you think.