Web Archives - Page 3 of 3 - Jones.in' for a Blog

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.

Linking done right

Links are one of the most basic parts of HTML. They’re everywhere and usually pretty useful. One thing I really hate to see is bad linking practices. A link named “click here” tells me nothing. For all I know you’re trying to lure me into downloading a virus or some phishing scam (or perhaps worse, Rick-roll me). Here are a couple quick tips on how to link effectively:

Name your link something that makes sense. You want to clue the user into where they’re going. “Online Registration Form” makes much more sense than something generic like “click here.” It’s irritating and even scary to not know what you’re getting into and by giving your links good names, you can instill a sense of trust and legitimacy in your site. As an added bonus, well named links should help your search engine scores.
Surprises are a bad thing. If you’re linking to a PDF or a video file and it’s going to trigger something to download or open a plugin, you should tell the user this beforehand. A simple icon in front of the link or a description like “(PDF)” after a link can really improve user experience. People like to know what to expect and it’s easy to tell them. At the very least put a description in the title attribute so a user can get an idea while hovering over the link.

It’s really pretty simple but by keeping these things in mind we can make a better, friendlier web.

Google Maps 8-Bit Prank

Google has a long-standing tradition of April Fools jokes. This year is no different and they’ve set up a hilarious little prank with Google Maps. To check it out in your browser, go to Google Maps and click the “Quest” button in the upper right of the map. This is a really clever idea and I hope they keep it around for a while. It’s a really nostalgic way to view your maps, especially for any video game lover. Well done, Google.

Making Google forms your own

One of the greatest features in Google Docs is the forms. In just a few minutes you can be up and running with a form that accepts user input and automatically fills that information into a spreadsheet. It’s super easy to set up and that’s why I’ve been using them for a number of tasks both at work and in my personal life. I’ll soon be marrying the lovely abbyabbyabby and we wanted to do online RSVPs. I immediately knew a Google form would do the trick with little-to-no work on my end. The problem was how the final product looked.

default style of my RSVP Google Form

Because both Abby and myself are designers, we weren’t comfortable directing people to such an un-styled form. “No problem,” I thought, figuring one of the many provided templates from Google could do the trick. I looked over the options, and while there are many they actually were worse than the default look.

some themes for Google forms

I was at a loss. I tried messing around with the embed code a bit but it was just an iframe pulling in the URL to the form. A few Google search attempts finally turned up this wonderful post about how to style Google Forms. It was perfect, easy to understand and provided me with the absolute control that I wanted. Below you’ll see what my final form looks like. It’s quite a bit better looking than the original. With my new-found trick my future projects with Google forms will look just as good.

the final RSVP form with my styling