Web Archives - Jones.in' for a Blog

Merry Christmas from the Joneses

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!

A Responsive Retrofit: Frostic School of Art

Frostic School of Art Homepage A 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 website The 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

Review: 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.

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.

Opinion: How to fix Yahoo!

It’s been a while since Yahoo mattered much. You hear about it every once in a while in the news, usually about an attempted take-over or how irrelevant it’s become and how much money it’s hemorrhaging. Over the last few days they’ve actually had some positive press. For the first time in a long time they’ve made a really great choice. They’ve hired Marissa Mayer as their CEO. Mayer is a very intelligent woman who is one of the first 20 or so employees of Google. It’s big news.

I wrote off Yahoo years ago. I figured they had their time and were easily replaced by the likes of Google and other forward-thinking companies. It seemed Yahoo had stalled out. Occasionally they’d do something smart, like buy Flickr but they’d always mess that up too. When’s the last time Flickr was relevant? Yahoo basically bought a great innovative product it and never did anything with it, letting the competition catch up and surpass it.

I’m hopeful that Mayer can turn things around. What I’ve read about her it seems she has the smarts, the leadership and vision to turn it into something useful again. I’m no expert but I have a few opinions on Yahoo. If I were in her shoes I’d concentrate on making Yahoo do one thing really well instead of 60 things just ok. They’ve got a huge portfolio of products but none of them are outstanding. A few of them are decent and if resources were re-arranged and concentrated to those products, they could become great.

Yahoo isn’t going to be Google. It’s just not. We don’t need it to be and they shouldn’t fizzle into oblivion trying to be. I think they just need to re-focus and narrow in on a few things to do. Becoming a news portal or beefing up Flickr to be creative again could be a couple of ways to improve. I just hope Mayer isn’t afraid to really shake things up. It’d be a shame to see such an iconic company such as Yahoo fade away but it needs a lot of work and radical change to survive. I wish you the best of luck Marissa, I truly hope you and Yahoo can succeed.

Foursquare Tips: Lists

When foursquare announced lists a while back I got really excited. It seemed like such a cool way to build up a collection of hot spots. A few days later I all but forgot you could make them. The problem was, I just didn’t have a need. Around my town there’s about a dozen lists for “Best Mexican Restaurants” that all have the same 5 or so places. Why do I need to make yet another list of the same old spots.

Then foursquare launched the #VisitUS challenge. It was a really cool contest that would award a few cities badges based on user-sourced “best of” lists. About Foursquare has a good write-up on it. That’s when I created my first useful list. I collaborated with a friend and we gave Kalamazoo a city guide, foursquare style. Kalamazoo didn’t end up winning a badge but it was a great exercise in creating lists.

Fast forward a few months and I actually pulled up that list again and shared with a couple of friends who were in town for my wedding. They had never been to the area and wanted to know where to go for food and fun. The list was perfect, it was already created, offered and easy way to share the info and gave them directions to and info about each place on it.

This re-ignited my passion for foursquare lists and I set out to make another. This time I planned to make a list of disc golf courses in Michigan (yes, disc golf is an obsession). It was mainly for my benefit. I liked the idea of exploring the state and playing disc golf along the way. I used review websites to compile nearby courses I was interested in playing and then found them on foursquare so I could add them to my list. It’s quickly grown from a small list of nearby courses to a giant list of courses all over Michigan.

Making lists are easy. Adding new places to your list are even easier. Here’s a quick how-to so you can start creating your own lists. When you come across a venue you’d like to add to your list, just click the “Save” button. A menu will pop up listing your current lists (and a “Create a new list…” option if you don’t have any). Just select the list you want it saved to and you’re all set. You can do this on the website (see screenshot) or in the mobile app. It’s the same basic procedure either way.

If you’re creating a brand new list, a dialog pops up for you to add a name to your list. Don’t worry, you can always change it later.

Editing your lists is easy too. Just navigate to your list on the website (pull down menu under your name > lists) and then hit the big orange “Edit” button. You can then put the venues in a certain order, add tips or photos and remove venues. Near the top of the list you can edit the name and description of your list and use the search box to add more venues. When you’re all set just click “Finished Editing.” Be sure to share your list when you are done.

Do you make a lot of foursquare lists? Maybe you just like to follow them. What lists are your favorite?

Designing a Wedding Part 2

If you haven’t seen Designing a Wedding Part 1, I went over how we got started with our invitations. After that design hurdle was jumped, we moved on to our website. Wedding websites are all over the place these days and there are plenty of free templates to get you started. Because we already established a very unique look (compared to a traditional wedding at least) we opted to design our site from the ground up.

abbyandchristopher.com homepage

We started with a splash or welcome page. It very closely resembles our invitation design but with more simplified information. We added our links to bottom to allow our visitors to get to the more specific information they’re looking for.

Our Story webpage

We tried to keep it simple and had only five links. We did one for our story which gives a little background on how we met and how our relationship developed. There’s a page for the locations of our venues with convenient links to maps and directions on how to get there. An accommodation section lists nearby hotels. We decided that an online RSVP form would be more convenient for guests and us (a win-win you might say). The back-end of that is powered by Google Forms. I was able to completely customize the look, which I discussed in this earlier post. Finally, we added a page with links to our gift registries.

locations page of our wedding website

The “secondary” pages all have the same design. They use the top from our invitations and homepage and turn it into a unifying header. The links turn into a simple menu to the left to allow visitors to navigate from page to page very easily.

The whole design is very simple and compliments our invitations very nicely. The invitation directs recipients to the site so we thought it was important to give a unified experience. While it’s not massive or even very complicated, I think it turned out to be a nice little site with all the relevant information easily accessible.

We haven’t made it this far but I do hope to incorporate the designs into our program and thank you notes. As those progress I’ll throw up another post about them. I always think it’s fun to see a whole design package and how all the pieces fit together and this particular project has been extra special for me. I hope you’ve enjoyed this look at our wedding design process.

The Internet’s Obsession with (fake) Nostalgia

I’ve noticed an interesting trend lately. It seems there are “retro” versions of our favorite websites and services popping up all over the place these days. From what Twitter would like in the 80s to what Facebook would look like in the 90s and even Google done through a BBS Terminal. They’ve even gone so far as to spoof everyone’s favorite smart phone apps, Angry Birds and Draw Something as old PC games. I always get a kick out of these and applaud everyone who has taken the time to make them.

My first computer experience was in the 80s when my parents (both teachers) were able to bring home an Apple IIe over summer vacation. There was something magical about that big, beige machine loading up a game of Oregon Trail or my favorite as a kid, Fischer Price Bowling. Everything on-screen was so blocky and the gameplay so simple by today’s standards but it was still hours and hours of fun. I think we’re at a point in technology where everything has moved so fast and is improving everyday that people want to reminisce about those old days. They want to slow down and enjoy the BASICs (see what I did there?) again. I’m more than grateful for today’s modern technology but I do thoroughly enjoy this recent trend of imagining today’s services as if it was yesteryear. Have you found any other versions of these? Please share them in the comments, I’d love to check them out.

CityMaps Shows You What’s Nearby with Logos

A while ago About Foursquare reported on a really cool new map service called CityMaps. They’re billing it as “the social map” because it’s connected to a number of social media services like Twitter and foursquare. What I find most interesting was the inclusion of logos on the maps instead of just names. As a designer I’ve got a soft spot for logos so an entire map full of them makes me smile. I think it’s a really unique way to convey the information. In a lot of ways, it’s a lot more useful too. If I’m looking for the nearest Starbucks or McDonald’s, their logos are going to pop out at me much quicker than just their names. In this day and age logos are so recognizable that this approach seems to make perfect sense. I’m actually a little surprised this hasn’t happened sooner.

Beyond just the unique logo integration, they pull in foursquare tips and recent tweets. It’s a really great mashup of social information on top of a nice looking map. Right now they just have maps for New York, San Francisco and Austin but there are more on the way. There is even an iPhone app so you can enjoy CityMaps on the go. With all of that info combined together it really shows just how powerful APIs can be. I think they’re trying to make it a useful “explore your city” services but so far I don’t think it has much on foursquare. I’ll be keeping an eye on CityMaps because it’s already cool and has so much potential to become even better.

Venn Diagram Generator

I’ve always been a huge fan of Venn diagrams. They’re a wonderful way to express so many different types of ideas and with such simplicity. For a few years now I’ve been running a fairly popular Venn Diagram Tumblr and this past fall I started a pet project for an online Venn Diagram Generator. I wrote it with HTML5 and a little JavaScript. I spent just a few days on it before getting side tracked with other things. It started as a very simple web app and I kept adding features and released a few versions. It’s currently in a “beta” release and could use a little more work. To be honest I kind of forgot about it but I think I’m going to revisit it soon. Feel free to leave any suggestions or feedback in the comments and I’ll post about it again as it progresses.

Meaki is Pinterest for Web Designers

Pinterest is quite a big deal right now. It’s branched out beyond just ladies pinning crafts and has even become popular with companies and sports teams. I’ve had an account for a while and I think it’s a great services. It’s a great way to keep track of cool stuff you find on the net. That said, I don’t use it. It doesn’t fill the one need I really wanted to use it for, pinning websites. On Pinterest, you’d need to screenshot a website, then upload that screenshot and paste in the link of the website. That’s a lot of work just to pin a cool looking webpage. After that realization, I pretty much pushed Pinterest aside and all but forgot about pinning.

Enter Meaki. It does exactly what I was looking for. Instead of just pinning a single image from a website, it actually pins the whole site. It’s perfect for web designers. I often come across websites with a cool feel or a neat trick that I’d like to remember for later. Inspiration is all over the web and as a designer it’s nice to have a collection of said inspiration easily accessible when your next project comes along. Meaki makes that easy. You just get their “Clip-it” bookmarklet and then “clip” any cool websites you come across. When you go back to your collections on the Meaki website you can see the whole site you clipped, not just an image from it.

A possible issue I see is what happens if a site makes changes after you’ve clipped it? Does Meaki actually save the site when you capture it or just embed the site? I haven’t been using it long yet but so far Meaki is a very promising service and I think it will fit in to my workflow quite nicely. I could even see creating a collection of sites for a particular project and then sharing that with a client as an online mood board. While their interface isn’t quite as slick as Pinterest yet, Meaki is still a very young service so I expect it to get better over time. It might not ever gain the widespread and mainstream success of Pinterest but I think within the niche market of web designers (and those who prefer visual bookmarks), Meaki could really take off.