3D CSS crop rows

In the spirit of New Earth USA, here’s some minimalist crop rows in 3D CSS.

Let’s look at how this is built. Continue reading 3D CSS crop rows

Responsive design with “switch to desktop site” option

In my latest responsive design creation, I wanted to follow Jakob Nielsen’s guidelines and allow mobile users to have easy access to the full desktop site, if desired. This is relatively straightforward to do if you have a CMS, but a static site has to be a bit more creative.

Here’s the solution I came up with. It uses JavaScript, a small browser cookie, and that magical tool no web developer should be without, Modernizr. Continue reading Responsive design with “switch to desktop site” option

Caching Google Maps geocoding lookups

Google Maps geocoding — the ability to send an AJAX request with a street address and get back a specific latitude and longitude (and lots of other data) in response — is a very useful tool for any number of mapping applications. Best of all, these applications can be written in pure JavaScript — but at a price. Google has strict usage limits for its free geocoding service, which can only be increased for a fee.

However, if your application tends to hit the same addresses over and over again — say, to plot the location of restaurants near your business address — it’s possible to cache these lookups in a database. You’ll still be using Google to look up new addresses, but any user hitting the same address twice in the same day will use your database instead of Google’s service. Continue reading Caching Google Maps geocoding lookups

Allowing mobile users to toggle between desktop and mobile versions

While responsive site stylesheets that give mobile users an alternate small-screen version of your site are a good idea, not every mobile user wants the small-screen version. Fortunately, it’s possible to give them a choice in the matter using only a little bit of JavaScript.

Here’s one approach that takes advantage of mobile browsers’ use of the <meta name="viewport" content="width=device-width"> tag. Continue reading Allowing mobile users to toggle between desktop and mobile versions

Geocoding with Google Maps without OVER_QUERY_LIMIT errors

Problem: A JavaScript application needs to do more geocoding lookups than Google will let you do at once. It’s possible to use setTimeout() to make JavaScript wait, but with the callbacks, it’s cumbersome.

Solution: Use a server-side script that will retrieve the same data, requesting it over and over if an OVER_QUERY_LIMIT error occurs.

Continue reading Geocoding with Google Maps without OVER_QUERY_LIMIT errors

More pure CSS menus

two-line pure CSS menus

See it in action

In an ongoing effort to squeeze the most flexibility out of nested-list navigation menus, I developed this two-line version. Unlike the traditional OS-style dropdown menus, this one sacrifices horizontal space to save on vertical space, which is usually preferable in a small website. The menus can easily be aligned to the left or right instead of to the center.

Continue reading More pure CSS menus

Indicate special links with CSS

CSS makes it easy to highlight special links across your entire site. For instance, many of our sites indicate when a link points to a PDF or external website by labeling it with a special icon.

In the bad old days, web developers added “(PDF)” to each and every PDF link in your site by hand. This is doable but tedious, especially if someone else is making changes to the site after you’ve finished building it. This is where CSS generated content comes in handy.

Continue reading Indicate special links with CSS

Simple slideshow

There are any number of JavaScript/jQuery slideshow plugins out there, probably the most popular of which is jQuery Cycle (which I’ve used repeatedly).

However, sometimes you just want something so simple that even a few KB worth of plugin is more trouble than it’s worth. With that in mind, I’ve written my “world’s easiest slideshow” script — just ten lines of jQuery and ten lines of CSS. I’ve used this three times in the last month alone, and it’s about as simple as I can imagine.

Continue reading Simple slideshow