Things web developers wish designers knew

Images

  • Keep backgrounds simple. You shouldn’t add things like overlays, semi-transparency, or gradients in Photoshop — those can be added using CSS. This has the advantage of making the overlays/transparency/gradient easy to tweak in code, while increasing the reusability of the image.
  • Save images in as large a size as practical, especially photos. It’s easy for us to scale an image down, not so easy to scale them back up.
  • Don’t bother optimizing image files. We do that before moving them to production anyway. Continue reading Things web developers wish designers knew

New site: Lincolnshire Furniture

Another site that went out a while ago and just wasn’t added here until now. Lincolnshire Furniture is a small business that (re-)creates custom furniture for homes and hospitality.

Lincolnshire Furniture

They don’t sell online, so there’s no e-commerce, but they do have a fairly large and interconnected catalog. This was a perfect opportunity to use Drupal (specifically the Panopoly distribution), tagging each product in its own page and setting up multiple views to display furniture by type, room, function, or a combination of those. Search functionality also comes with this CMS, naturally.

The theme used started off as one of those included in the distribution, but was modified to match the previous site as much as possible.

Vasilko Architects

Vasilko Architects

 

This is a fairly basic site content-wise, but it’s the first client site we’ve built on the Bootstrap 3 framework — extensively customized, of course, and fairly heavily optimized. jQuery provides animations when you mouse over project thumbnails, and the project slideshows themselves are powered by Bootstrap’s Carousel component.  Continue reading Vasilko Architects

Respond.js

How did I never know about this before? Respond.js is “a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).”

In other words, it makes HTML5Boilerplate even better by eliminating the need to craft a separate, IE8-and-below stylesheet when you don’t want those browsers to see the mobile-first version of your site. Better yet, it works with Modernizr (also part of HTML5Boilerplate) by utilizing its media-query detection code.

I just add it at the bottom of my modernizr.js file (a mere 3K of extra data) so that it starts to run before the DOM is even loaded. Sadly, it uses AJAX to get the CSS file, so there’s still a flash of mobile-first styling. But the convenience is well worth it.

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

Village of Riverwoods, Illinois

vor

Every now and then, when things get slow at work, I look for an existing site on the server that needs its code updated and rebuild it. Same design, with a few minor or largely hidden changes, but using minimal HTML5 and lots of CSS. Last week, the Village of Riverwoods, Illinois got picked out for an under-the-hood makeover.

Continue reading Village of Riverwoods, Illinois