We have a long and strong relationship with Franklin Electric. As their web agency of record for nearly ten years, we’re always happy to work with the friendly folks at Franklin.

Screenshot taken on an iPhone 4S.

Most recently, we created a microsite for Franklin’s new Gemini product line: extremely innovative secondary containment fittings for fueling systems. Inspired by the microsite we created for their Evo product line, we changed it up a bit with a darker color scheme to enhance the shiny black veneer of the Gemini fittings. The green ribbons running through the background only enhances it more.

Because this site does not incorporate a content management system, we had a little more flexibility in our layout. We realized we wanted to write as little text as possible in order to put an emphasis on the product, and to showcase the short videos featuring the product.

Best yet: it’s fully responsive! Scaling it down to tablet or smartphone width will enhance the important information and narrow the focus into a single column of information.

Screenshot taken on an iPad in portrait orientation.

Because Franklin Fueling markets internationally, the site is featured in five languages — English, Spanish, French, Italian and Chinese.

While learning about fueling systems secondary containment may not be for everyone, go check out the site: it’s sleek, it’s fast and it’s responsive.

That’s when I learned Associated Press style: the format journalists use in their writing. It’s beautiful in its simplicity — AP Style’s primary goal is to express the most information possible in the least amount of space. So, instead of saying “although”, for example, you’d say “though”, saving yourself two characters but not changing the meaning of your sentence. It’s elegant. It taught me to use my words efficiently to have more impact. It ruined me for the academic papers I had to write and the flowery, verbose language required by MLA style.

AP’s also pretty good at changing with culture, especially Internet culture. Originally, “website” was supposed to be written “Web site”, and “email” was “E-mail”. As Internet users themselves adapted, “website” and “email” became the norm, and pretty soon, AP followed suit.

The one thing that seems to have stuck around both in AP and, well, everywhere else is “Internet”, with a capital I.

I argue that it’s time for that capital letter to go. The Internet is as present in our lives as cars, electricity, phones, and air. We don’t capitalize those nouns, do they? The capitalization implies a proper noun, like Wikipedia, Samsung, or Google (though arguably Google is becoming generic enough to warrant a lower-case usage in its verb form).

But Andy! you might say. The Capital-I Internet is a powerful thing! We should all show it the respect it deserves!

I totally agree! All of my coworkers and I would not have a job without the Internet. We definitely respect the Internet.

But we know the Internet is a tool. Ubiquitous though it is, we manipulate it every day, and use it and its standards and protocol to convey information in (we think) an attractive and efficient manner. It’s not an entity unto itself (until SkyNet goes live, of course), and it’s not a brand name. It’s a commodity. It’s a community. It’s a tool. (You don’t say, “Pass me that Hammer,” would you?)

I say we stand together, and teach our spellcheckers that internet is spelled with a small “i”. Language is ever-evolving, and rather than try to lobby for new words like “gr8″ and “i’ma” (as in “I’ma let you finish”) to find its way into dictionaries and stylebooks, let’s improve the accuracy and precision of our lexicon and give the internet its propers by referring to it as what it is: a tool.

Andy Welfle is a content and social media strategist at Reusser Design. He likes nothing better than to argue about the (I/i)nternet, read a good novel, or look for lolcats to use in a specific context. Follow him on Twitter at @awelfle, or connect on  LinkedIn.

New Homepage

Old Homepage. Click to embiggen.

Sometimes, Reusser Design has the privilege to lend our web-building expertise to stalwarts in the local business community. One recent project that was relevant to this was with Deister Machine, an industry leader in aggregate sorting — they make shakers, feeders, inclined screens, and portable processing plants for the mining, gravel, asphalt, and recycling industries. Best yet, they’ve been located in Fort Wayne — and remained family-owned — for a century.

They came to us late last year wanting a new website. Their old site, while useable, was not scaleable: with a fixed width and a set functionality, it was difficult to change content or even to just reformat it.

Website screenshot taken from an iPhone. Notice the simplified layout and faster loadtime without "dumbing down" the interface.

That’s where we came in! After a content strategy session and some usability testing we’ve talked about before, we were off! Outfitting them with an ExpressionEngine content management system chock-full of custom functionalities, they can update their site easier than ever. A few of the features in Deister Machine’s new website:

• A fully responsive website, with different layouts for a computer monitor, a tablet and a smartphone screen (go ahead: resize the window and watch it reorganize).
• A big, bright slider they can use to display some amazing photography of their enormous products and calls to action.
• A sub-slider calling out specific pages and products from their homepage.
• Multiple relationships between different data points: you can sort information in different ways. You can find a specific product, for example, by industry or by machine type. You can locate a service rep by location or by industry.
• Lots more!

Head on over to Deister Machine’s website to see it for yourself.

A couple of weeks ago, we announced that we were going to officially end support for Internet Explorer 7, a six-year old browser that is hemorrhaging market share. There are many reasons for this, but the most compelling is apparent in the usage statistics.

The Numbers

Statistics found at W3Schools.com shows that as of February 2012, IE7 shows, on average, 2.6% of browsers visit their site. We think that is skewed a bit low, since most W3Schools.com visitors are web developers, and would therefore use newer, standard browsers. After sampling some of our clients from a wide range of industries (a bank, a radio station, an auto dealership, and a few others), we found that number to be more like 6.5%. That represents an average percentage of users ranging from 3.1% on a highly-trafficked client’s site to 7.55% on another.

As web developers committed to building innovative sites with some longevity to them, the more important number for us is how these numbers are trending:

Source: 2007-2010 estimates from http://en.wikipedia.org/wiki/Internet_Explorer#Internet_Explorer_7. 2011. Figure from 2011 from RD client statistics.

As you can see, in just two years, IE7 usage dropped from its peak at just over 45% to 11.6% in 2010, when IE8 was just a year old. Though we haven’t found consistent reports of the downwards trend, it’s clear it’s trending down.

Why not just keep on supporting it?

Many people don’t realize that all web browsers are not created equal — What you see in the latest version of Google Chrome, for example does not necessarily look the same in Internet Explorer. There have been some attempts at standardization — both Safari and Chrome use WebKit, an open-sourced rendering agent that displays web language and graphic files uniformly. Firefox uses Gecko, which works very similarly to WebKit.

Internet Explorer seems to be the odd man out. When IE7 came out, there were no set standards, so Microsoft (IE’s developer) set their own: They placed default padding on image and text blocks, some advanced CSS selectors, and more.

This presents a conundrum for web developers. We want all of our users to experience our websites in a uniform, optimal way. Getting IE7 to play nice with our modern web development practices takes time and energy to fix, tweak, and balance our styles to play nice with all browsers. This is time and energy taken away from innovating and creating the best user experience for the vast majority of users as we can.

How many other web companies are dropping their IE7 support?

Reusser Design is not alone in this — we believe in innovation, an open web, and making sure our customer’s money is spent wisely. Of course, we’re just a small piece of the pie in the web marketplace. Web giants like Google and Facebook dropped IE7 support as well — Google, in fact, only supports browsers two versions back! When IE10 is released, Google will drop support for IE8. The same goes for the other browsers as well — Safari, Firefox, Opera, and even their own browser, Chrome!

Microsoft operates a website counting down until IE6, a decade-old web browser, is dead.

Will my website still display for IE7 users?

Of course it will! Your site will still have basic functionality. That won’t change. Some of the bells & whistles might not work, depending on what features are developed — some sliders, dropdowns, etc. All customers will still have access to information and basic functionality.

We’ll also display a friendly reminder for users of unsupported browsers to upgrade.

Why should I upgrade my browser?

Not only will you be able to use Facebook, Google, and others to their fullest extent, but the web will just look prettier. On a more serious note, you’ll be patching up numerous security flaws that have been exploited in older browsers like IE7.

If you upgrade to IE 8 or later, or switch to Chrome, Safari or Firefox, you’ll be able to let the browser update itself. This will ensure you’ll stay on top of web standards and always have the best browsing experience.

What do you have against Microsoft and Internet Explorer?

Absolutely nothing! Admittedly, we run an all-Mac environment here (with the lonely PC in the corner used solely to debug our sites for Internet Explorer), so we use Safari, Chrome and Firefox. But we respect IE and their use and reputation in the corporate world.

We’re thinking Microsoft would applaud our efforts to get our users onto one of their more modern browsers! We know they operate an IE6 Death Watch Countdown website, so it’s clear they’re committed to getting users to upgrade. As they say, “friends don’t let friends use Internet Explorer 6.” It’s only a matter of time until we see their IE7 countdown!

And In Conclusion

We’re excited for this, and we hope you are too. It really lets us laser-focus on creating an unrivaled user experience that modern browsers can handle. And in a market where that experience is fragmenting quickly — what with tablets, mobile phones, televisions, and more gaining high-resolution displays (see our post about designing for retina displays). We’re encouraging users with obsolete browsers to upgrade, and we’re celebrating the web display standards set forth by web development pioneers.

Any questions? Feel free to sound off in the comments below, or drop us a line on our contact page.

Adaptable is a responsive, Sass-based photo grid system just for you! Download Adaptable, fork it, and hack away to make your web development easier.

Demo

Some things are better left to a visual. View the demo

Why did we make this?

Albert Einstein once said, “responsive photo grids with multiple breakpoints are nearly impossible to calculate”¹.

He’s right.

A responsive photo grid needs to use percentage based widths and margins so it resizes flexibly. (Warning: math ahead)

If you have an image gallery and you want to display five of them in each row your image width might be 19% (5 images x 19 = 95%) and your gutters would then be 1.25% (4 gutters x 1.25 = 5%). We can write this out like so:

ul li {
  float: left;
  margin-right: 1.25%;
  width: 19%;
}

ul li:nth-child(5n) {
  margin-right: 0;
}
									

Now let’s check this out on a mobile device.

It looks like five images in a row makes everything a little cramped. We’ll add a media query to target mobile devices and show three images in a row instead of five.

@media (max-width: 480px) {
  ul li {
    float: left;
    margin-right: 2.25%;
    width: 31.667%;
  }

  ul li:nth-child(5n) {
    margin-right: 2.25%;
  }  

  ul li:nth-child(3n) {
    margin-right: 0;
  }
}
									

But now what about tablets? Or users with larger monitors? All these calculations are getting a little confusing and wasting valuable time.

Enter Sass

With Sass we have an entire library of options to automate this process. We can use addition, subtraction, multiplication, division, conditionals, arguments, and much more.

We’ve taken this library and built a mixin to make building photo grids simpler. For example instead of this:

ul li {
  float: left;
  margin-right: 1.25%;
  width: 19%;
}

ul li:nth-child(5n) {
  margin-right: 0;
}
									

You now can do this:

ul {
  @include grid(5);
}
									

The number in the parenthesis tells the mixin to calculate a gallery with five images in a row. It’s wonderful. We can then write media queries like this:

@media (max-width: 480px) {
  ul {
    @include grid(3);
  }
}
									

Download the add-on

View Adaptable on Github

¹ Source: Totally real Albert Einstein quotes (Abridged)

As all you web developers are finding out, this presents a unique challenge for us. Because of the extremely fine detail encapsulated in these devices (with more than three million iPads sold in the three weeks its been out!), our regular old “web-resolution” sites are displaying slightly pixelated.

The solution? .Net Magazine explains how Apple delivers high-resolution images to the iPad:

[T]he company loads regular images and then switches them out for higher-res equivalents should the device request them. The drawback: “As far as I can tell, there is no attempt to prevent duplicate downloads of images. New iPad users are going to download both a full desktop size image and a Retina version as well.”
[Link]

Of course, this creates a “page bloat”, because your device is loading both the regular site and a high-resolution version of the site. It’s slower (even with the faster processors on these new devices), and if it’s using 3G, it eats through the user’s monthly data allotment faster.

What does this mean for me?

A cutaway of a screenshot of the Fort Wayne Trails' mobile website from an iPhone 4S. On the left is the standard-definition logo displaying. On the right half is a retina-display optimized display. Click image to embiggen.

At Reusser Design, we want our websites to look the best they can on any device. We do feel that at this point, however, creating a full Retina-display showcased website would diminish your user’s experience rather than enhance it. We’ve experimented with different solutions, and it we think the best way is to enhance the most important display element on most sites — the company logo.

Check out this shot of the mobile version of the Fort Wayne Trails’ website, taken from an iPhone 4S. Their beautiful logo (designed by the talented folks at One Lucky Guitar), in standard resolution on a retina display is blurry and softened. After inserting a conditional media query in the code to display a higher-resolution version of the image when requested by a browser on a retina-display-enabled device. It’s the same technology we use for responsive design! You can see the world of difference it makes (click here to see a side-by-side comparison of the same screenshots).

We feel this is a good compromise between displaying a great looking website for a retina display, and combating the browser-bloat that would occur for non-retina displays, a vast majority of current web users.

We were honored to work with Wayne Pipe and Supply on building a new website recently, as one of our first new projects of 2012. Wayne Pipe, a grande olde (yes, with extra “e”s on the end) established business in northeast Indiana, has been supplying plumbers, engineers, and other builders with supplies for — gosh, a really long time. In fact, we saw photos in their archives where product was delivered by horse and buggy.

Although they celebrate their heritage and history, as all good companies do, they innovate. Within the last few years, they’ve opened a kitchen and bath showroom, and quickly because a leader in the latest styles in bathtubs, showers, sinks faucets, toiletry, and much more. They have consultants on hand to help customers as well as contractors pull together colors, styles, and solutions to make their kitchens and bathrooms beautiful, comfortable, and efficient.

To do that, they needed a new website. We were presented with an interesting challenge: Take the strong, established branding of the Wayne Pipe Industrial/Commercial sales, and blend it seamlessly with the branding from the newer, hip Kitchen and Bath showroom.

A recreation of an older version of Wayne Pipe's logo.

We think it came out pretty well. Notice the stylesheet differences between the two sites. While the colors and logos changed, the structure stayed the same, so as not to create a user experience dissonance between the two “sides” of the website.

Upon creating a clean, vectorized version of the red, flagged Wayne Pipe logo, we were excited to be given permission to hearken back to an older version of the logo, with a blockier typeface and a sort of 1960s Tool & Dye aesthetic. Wayne Pipe liked it so much, they put it on the side of a truck!

A list of other features on WaynePipe.com:

• Completely integrated into a content management system, ExpressionEngine
• Fully Responsive design!
• Sub-page headers that are fully customizable by the client
• Dynamically sorted vendor lists
• “Meet the Team” pages that aggregate to either the Commercial/Industrial or the Residential page, or both.
• Rotating banner images on product pages, with drag-and-drop image placement and ordering

Cruise on over to their website to see the responsive design and big, beautiful images in action! And while you’re at it, drop them a line if you think any of those bath or kitchen fixtures would look good in your house!

According to research by the US Department of Transportation, drivers aged 65 or older face an increased risk of being involved in a vehicle crash. And starting in January 2011, more than 10,000 baby boomers turn 65 each day, a pattern that will continue for the next 18 years.

With that in mind, there’s some exciting stuff going on in Ohio, folks. The Area Agency on Aging (A3) is a small nonprofit in western Ohio that services seniors living in a seven-county area: Auglaize, Allen, Hancock, Hardin, Mercer, Putnam, and Van Wert counties in Ohio. They help seniors who are no longer able to drive safely find transportation, be it a paid taxi service or free rides via an area nonprofit. A3 recently partnered with local transportation organizations to develop a microsite focuses just on transportation needs for seniors and other in-need demographics, and Reusser Design was lucky enough to help them turn this project into reality!

Developed in WordPress, this super-simple website features a bright, bold layout with easy-to-read type treatment. Some features and functions of MyTransportation.org, the address for this microsite:

• It features clear calls-to-action to visit resources to help seniors and their loved ones with their driving and transportation questions
• Has a comprehensive list of providers sorted by county. The table of contents at the top automatically lists anchor tags to scroll directly to each county’s resources
• A simple and elegant news blog page

Head on over to their site to check it out, and learn how you can help the cause.

Powers of One's old site.

Recently, we had a chance to redesign Powers of One’s website. When we designed their old site three years ago, it was intended to be simpler, with just a static list of classes, a schedule, and special events. Since then, they’ve grown! They have updating schedules, new instructors, workshops, and a bigger client base with differing needs. They needed a news listing, to offer supplementary educational materials, linkables from around the internet, and provide a voice for Valerie and the studio. They needed a sophisticated events calendar, with class listings, and a page describing classes, and they needed all that displayed in an attractive, easy-to-interpret grid.

Luckily, we can do that. Some interesting features of their new site:

• Rebuilt from the ground up, and deployed with ExpressionEngine, our favorite CMS
• An online payment form with PayPal integrated
• Easy to manage events calendar with the EE SolSpace Calendar plugin
• Small CSS3 animations, like the “wiggle” on the masthead logo at top. Go ahead, move your mouse over it. Details like this really make a site come alive.
• Rotating photo banners with customizable text to highlight different parts of the website.

If you ever find yourself in The Noke, and need to stretch your body and center your mind, check out Powers of One. You’ll be energized and refreshed, especially knowing you’re supporting local downtown businesses!

Small town business are at the heart of our client base. When Bippus State Bank, a Huntington-based bank in northeast Indiana, said they needed a refresh, we were excited to work with them! Their long history and commitment to their community in Huntington, Roanoke, and Manchester, Indiana is laudable. In a time when banks merge with each other to gain profits, BSB stays independent and local.

One thing was clear – BSB needed and wanted a content management system so they could be in control of their content. Instead of editing static HTML in Dreamweaver, we upgraded them to ExpressionEngine, a PHP-based CMS complete with CSS styling to promote a consistent, modern look and feel, with beautiful, bold typography.

Beautifully styled tables with easy-to-update rates and product matrices.

Some other great features:

• Special content types for bank and ATM locations, that dynamically interact with Google Maps to provide custom directions. This increases the scalability and longevity of the site, as BSB expands and adds locations and ATMs.
• Specially-styled rate tables that display interest rates, product matrices, and structured information in a consistent and easy-to-read manner.
• A Javascript rotating banner and promotion carousel on the homepage, so BSB can constantly display new and refreshed information.
• A restyled portal to their online banking system — allowing customers to login from the homepage without interrupting their user experience.

We’re glad we can help the great staff at Bippus State Bank take control of their content and stay on the leading edge with their website.

Check out their site at BippusBank.com! And click below to see some additional screenshots from Bippus Bank’s website.