optimize

Nothing drives users crazy like a slow-loading website. Back in the day, we happily waited 30 seconds for pages to load over a 56K modem. Now, we expect pages to load immediately, and we get frustrated and click away when they don’t.

There are a number of ways to optimize sites for speed; some involve server side issues and client side code. Here are four methods that you can and should be implementing on any site you develop.

Optimize images
One way to optimize speed is to get resources from your server to browsers quickly.  One way to do this is to crop, resize, and compress (encode) images appropriately. For example, if you’re using a photo from a 6-megapixel camera as a thumbnail, make sure you’re not transferring that large image across the Net just to have a fraction of it show on your site.

Instead, use tools like Photoshop, Gimp, or even Paint.NET to crop out components you don’t want in the photo, resize the image, and use appropriate compression.

If your image is a photo, we recommend JPG file formats.  Logos and graphics work best as PNGs. And small icons and limited-color objects might be best as GIFs.

Reduce requests to the server
You can also increase speed by combining logos and icons into one larger image—a sprite map—that you show portions of as needed.

Think of loading a webpage like ordering a printer online.  Your printer comes in the mail, and it’s only then you realize you need a special cable. You order the cable, then realize you need paper.  And then ink.

These tiny shipments are similar to HTTP requests.  Most browsers can “order” two things at a time from a web server, but the more items are requested, the longer the page takes to load.

That’s where sprite maps come in.  Using a sprite map is like getting an entire kit of supplies for your printer in one package, instead of in multiple tiny shipments.  With sprite maps, you create one image that contains all of your logos, icons, and backgrounds.  Then, with CSS, you use properties like background-position to restrict which parts of the image show to users at any given time.

This reduces the number of requests to the server and in turn, speeds loading time.

Avoid inline styles and consolidate CSS
Imagine reading a story about a boat. Every time the author mentions the boat, they call it “the rickety white boat from Nantucket.”  Using that phrase over and over would waste space and slow readability.

That’s what developers are doing when they abuse inline styles. Describing every “p” tag in your document as having a specific margin and padding wastes time when the web browser is trying to download the site. Using CSS in external files reduces this bloat. Plus, CSS is cacheable, significantly reducing  load time on subsequent page requests.

Cache is king
One of the best ways to create an incredibly fast browsing experience for returning users is to cache your content on their computer.  One of the easiest ways to do this is to have your web host install mod_speed, from Google.  It’s an Apache module that provides recommended cache lifetimes depending on file type.

Things like images tend not to change very often on your site, and CSS files and Javascript files also tend to be static.  Why have your users download them every time they visit your site? mod_speed configures this for you and is a free download. It also provides the added benefit of “zipping” (actually gzipping) traffic between your server and your visitor’s computer.

To learn more, you can check out tools like YSlow from Yahoo, that give recommendations on caching content, where your holdups are, and even provide tips on whether you are requiring too many  HTTP requests.

Speed = less server load
Users will definitely be happier when you speed up your site. And there’s an added bonus: the faster you deliver content, the faster users will find what they need and leave your site. That means less drain on your servers, giving you the ability to serve more customers with less hardware.

Want to talk about how Atomic can help speed up your website? Contact us today.

Fonts have been a sore spot for web designers for a long time.

Back in the day, we were limited to the most basic of fonts – Arial, Times, and Helvetica – because we needed to use fonts that most people had on their machines. Then came the time of JavaScript- and Flash-based plug-ins. They let us use a wider range of fonts … but things still weren’t great. Often the fonts didn’t load quickly or smoothly. Strange things happened when you used special fonts for links or wrapping text. And of course, Apple has decided not to support Flash in the iPhone and iPad environments.

Thank goodness, we finally have something new. It’s Typekit.

Typekit is a subscription-based library of fonts that designers can use for their websites. All the fonts are hosted online by Typeface, so anything you can find on Typekit, you can plug into your site. And your users won’t require Flash, like other font substitutors have in the past.
As a designer, I appreciate the selection of fonts that Typekit makes available. They look like they were hand-picked by someone with a strong design sensibility and an understanding of what works visually on the web.

And as a developer, I love how easy it is to find the font you’re looking for and apply it to your CSS classes, IDs, or any other HTML tag in your markup. You can also pare down your bandwidth use by choosing only the weights and styles in each font family that you need.

Finally, from a business perspective, Typekit is just plain affordable. You can buy one subscription for your company and use it across all the sites that you develop.

I can hardly believe I’m saying this, but Typekit may make fonts fun again for web designers. I think it’s time to break out the champagne.

web semantics

Have you ever wished that the web was more helpful—and less robotic?

Let’s imagine you’re traveling to Florida for Christmas.  You hop onto your search engine and query “christmas florida.” But the first eight results are about the city “Christmas, Florida” — not what you had in mind.

Wouldn’t it be cool if search engines could tell the difference between Christmas the city and Christmas the holiday?

Enter the semantic web. The semantic web is a development paradigm, part of the HTML5 proposal, that structures the content of sites so the internet can “understand” words based on context.

For example:

  • If you search for “house main character,” the semantic web would understand that you mean the TV show House, not a house where someone lives.
  • If you search for “green windows,” it would understand that you meant energy-efficient windows—not windows that were painted green.
  • If you wrote “I love Atomic Interactive – they provide excellent web development,” the semantic web would understand you mean that “Atomic provides excellent web development.”

In other words, the semantic web can understand the association between pronouns and the words they’re linked to. Wow.

How does this all work? The semantic web’s enhanced understanding of words is driven by microdata, one of many new tags in HTML5.

So if I were writing content about Christmas, Florida, I would include microdata indicating that I’m talking about a location. Conversely, if I were writing about celebrating Christmas in Florida, I would include microdata indicating that I’m talking about the location Florida, but the event Christmas.

Modern search engines like Bing, Google, and Yahoo take advantage of this microdata to keep your search results relevant.  In fact, Bing was built from the core up to parse microdata and associate content together. That explains why Microsoft markets Bing as a “decision engine”— supposedly, it helps you make better decisions by getting rid of superfluous search results.

The bottom line? If you have a data-heavy website or are having trouble with SEO because search engines are confused about your content, utilizing the semantic web can help. Atomic can help you take the first step in coding for this brave new web. Reach out to us anytime you want.

thanksgiving-blogpost2

It’s the time of year when people sit back and reflect on the things they appreciate in life.

With a long weekend stretching out in front of us, Ryan and I thought we’d take a minute to write about some of the things we’re thankful for. Call us sentimental … but we want to share some of the things that are important to us … things that we appreciate every day.

  • Our awesome clients. Your support and belief have helped us grow from just an idea to the thriving company we have today. It’s been great to work with each and every one of you. Thank you.
  • Our staff. It’s exciting every day to walk into our shop and know that we’re working with such a talented group of people. Everyone from our designers and developers to our project managers and SEO specialists are the best at what they do. They’re also excited about learning new things – helping us and our clients “push the envelope” and constantly take advantage of new technologies.
  • Our space. We’re so glad to be in the Firefly Building and to be part of the revitalization going on in our downtown. It’s inspiring every day to be in this space – to see how a few visionaries took a “junk” building and turned it into something amazing.
  • Our city. Yeah, we know Dayton’s not New York. Got it. But there’s a tremendous amount of creativity here – c{space and the new group culturemash are just a couple examples of many. And there’s a tenacity that we admire – people who see opportunity and interest in a landscape where others see only waste.
  • Our technology. Of course, at heart, we’re geeks. And we’re crazy about the technologies we work with and the possibilities they bring for our clients. So we’re thankful for the hackers creating holograms using XBox Kinect, our own developers creating new apps for the iPhone … and everyone in between.
  • Our families. Sometimes going the extra mile for our clients means extra hours at work. So here’s a final shout out in this Thanksgiving edition to our wives Nikki and Lisa. Thank you for supporting us in this venture and picking up the slack whenever we can’t. You’re the best.

Enjoy the next couple days off … spend some time with the people who are important in your lives … and we’ll catch you next week. Thanks to everyone for being part of the Atomic family.

plugins

Some of our customers are nervous when we tell them that we use open source software for our web projects. They think that open source means fly-by-night or unregulated.

That couldn’t be further from the truth.

Open source applications —like Linux, MySQL, WordPress, and Firefox — are reliable and stable. Often they have fewer bugs and security holes than proprietary software. That’s because the source code is open to the public, and a huge community of developers are reviewing it and suggesting improvements. A control board reviews the suggestions and implements the best ones in each new version of the software.

We use open source software in a number of ways for our clients. We think it has some distinct advantages.

  • Flexibility. The code on open source software is literally “open” to developers. That means we can easily change it to meet our clients’ needs. For example, we recently created a WordPress plug-in for realfootballtalk.tv that allows the site administrators to track the stats of various pro football players. That’s an example of a very specific application that you couldn’t get off the shelf—but that we created and easily added in to WordPress.
  • Innovation. Because the community of developers for open source software is so large, there’s a ton of innovation. It’s like apps for the iPhone — it seems like every day someone invents something new and cool. We pull from this universe of plug-ins to constantly bring new features and tools to our clients.
  • Cost savings. Open source software usually costs significantly less than proprietary software, or is even free. We pass that cost savings on to our customers. In addition, using open source software as a base reduces our development time significantly. We spend our time on customization, not on reinventing the wheel. Once again, this saves our clients time and money.

One of the sites we created recently using open source software was chapelhillhouse.org, a weekend retreat for families coping with childhood cancer. Part of the reason we could donate our design and development time for this site was that using open source software made the process so easy.

blog-pic-html5

HTML5 and CSS3 are the new web development tools on the scene, and they’re making life easier and more exciting for development geeks around the world.

Earlier versions of HTML and CSS have been around for years. HTML, of course, is the language that browsers use to display web pages. And CSS is a tool that developers use to control what web pages look like, and to ensure that any changes they make to a web page “cascade” through the site consistently.

HTML5 and CSS3, the new version of these tools, don’t actually help developers do anything radically different – you still can’t click on a candy bar and have one materialize on your desk. (Maybe soon ???) The true power of HTML5 and CSS3 is that they help developers do some of the same things they always have – but much more easily and quickly.

For example:

  • HTML5 lets you add increased functionality to a site – like audio and video, or drag-and-drop features – directly in your HTML5 code. Previously, you had to add a third-party plug-in to your HTML to do the same thing.
  • In the same way, CSS3 makes it easier to display certain design elements on your site – such as rounded corners, rotating elements, drop shadows, or special fonts. Previously, you would have needed multiple lines of code to execute such features, or a Flash or JavaScript plug-in.

Creating these elements using HTML5 and CSS3 can make life better for everybody – the designer, the client, and the end user. The designer benefits because shorter, simpler coding makes for faster, and frankly, more enjoyable development. The client benefits because the more efficiently we can work, the more cost-effective development and ongoing maintenance are. And the end user benefits because sites that don’t rely on endless plug-ins load more quickly.

Now, truth be told, not all browsers are ready to support HTML5. Mobile devices are leading the pack – in fact, we’ve been developing iPhone and iPad apps and sites right and left using the new language. Chrome and Safari are on the way to supporting it fully … Firefox is getting there … and IE is not even close. So, depending on what browser most of your audience is using, folks could have difficulty viewing sites developed in HTML5.

But soon enough, everyone will catch up. In the meantime, designers and front-end developers are going to be enjoying our new toys … experimenting with creating new websites that are more interactive and dynamic than ever before.

Mom always told me to clean behind my ears. But clean code? She wasn’t too familiar with that.

At Atomic, clean code is a way of life. It’s the foundation of all our development work. It’s how we make sites that run well now – and are easy to update and maintain over time.

A hundred and one variables separate clean code from messy code: being compliant with W3C conventions; using standard naming conventions; using a single CSS stylesheet; using title tags, in a clear hierarchy, to define page content; and eliminating extraneous code, just to name a few.

But in short, clean code uses streamlined, standardized protocols; is easy to read and understand (by humans and computers); and conveys complex information elegantly.

Here’s an example of clean versus messy code:

Web Proposal

There are a number of benefits to writing code like this:

  • Promotes good search. Code that is properly organized and tagged is easier for search engines to crawl and understand. That means you get better results in SEO.
  • Helps with cross-browser compatibility. Using clean code helps your site display correctly no matter what browser your audience uses. See the difference in the pages below? That’s the result of careless coding. One browser is able to “figure out” what the confusing code means; the other browser can’t.

Web Proposal

  • Simplifies maintenance and troubleshooting. Most people want to update their websites over time – maybe add functionality or fix a security weakness. To do that, your code needs to be read and revised, often by someone other than the original developer. The easier your code is to read, the easier it is for the developer to find the code they need, understand it, and update it.
  • Saves money. The difference between updating a messy site and a clean site can be the difference between 2 and 10 hours. Most developers charge an hourly rate for update and maintenance work, so the cost savings from having a cleanly written site can be huge.

You can right-click nearly any website and select “View Source” to see how the website was built. Wondering if your site code is clean or cluttered? Give us a call anytime. We’ll be happy to take a look.

Custom Social Media

Using social media channels is a great way to promote your business. But a lot of companies view social media only as a means to an end – as a way to push people to their own website.

From my perspective, these companies are missing a key point about social media: the fact that most people don’t want to be redirected. They’re on Facebook or Twitter or YouTube for a reason. They want to be entertained. To catch up on the news. To interact, comment, get in on the conversation.

With that in mind, smart companies are focusing less on getting people away from social media sites – and more on establishing a strong brand presence within them.

Here are some great ways to do that.

  • Facebook. Facebook pages aren’t fully customizable, but they do have some strong features. You can create custom tabs on your Facebook page and sell things using PayPal. You can also create custom landing pages. If you search for “Starbucks” on FB, for example, you’ll go straight to their Starbucks Card tab, rather than their Wall. All of this customization is done using FBML, Facebook’s proprietary markup language.And although this isn’t exactly customization, some companies are using FB as a customer service portal. Look at the posts and comments on Best Buy’s page, for example. Best Buy is resolving customer complains within FB – not wasting time redirecting customers to its home page. What a great concept.
  • Twitter. Like Facebook, Twitter also lets you customize your page to reflect your brand. Atomic’s Twitter page, for example, is decked out with our logo, contact information, and brand colors. We’ve also included with headshots of our staff and their Twitter handles.
  • YouTube. YouTube allows for elaborate customization – look how Coca-Cola has designed its YouTube channel to reflect its current “Celebration” campaign. Dr Pepper hasn’t done quite as much work – its “I’m a doctor” campaign videos run on a standard Dr Pepper background. But still, the channel is customized. That means you don’t have to go to these companies’ websites to experience their brand; they’ve brought their brand to you.

Here at Atomic, we’ve been helping lots of companies take their website presence and apply it to social media sites. Ready to do the same?

Atomic Interactive‘s new space was well thought out and planned, creating an environment optimized for productivity and creativity. We explored options, looked at swatches, and came up with a unique end product that surpassed expectations (the same thing we do for our clients every day).

Here is a little taste of some of the thought that went into creating our awesome, super-sweet space that has created much more than just a little jealousy.

taurine-free energy

In an attempt to create some natural energy and reduce our addiction to energy drinks, we took advantage of the talents of interior designer Heidi Miller. Heidi helped Atomic balance an organic feel and modern design in a space with an industrial appearance. The balance is one of the first things you notice when you enter the studio – exposed ceilings, brick walls, plants, lots of natural light, modern (yet comfortable) furniture. Yucca Cane and Golden Pothos plants were added for their beauty and because researchers have suggested these plants are capable of reducing air born pollutants caused by office equipment and produce above average amounts of oxygen, which helps feed our brains.  Our collaboration with Heidi ensured that our team would be positioned in a loose framework and bathed in natural light every day to avoid turning into “cubeville.”

hippie tree huggers

We’ve switched to using energy efficient fluorescent light bulbs to reduce our energy consumption. A majority of the new furniture we purchased is made from manufacturing companies with low carbon footprints and we integrated refurbished furniture, which otherwise would have been thrown in a landfill. Even our bean bags are stuffed with environmentally friendly materials! You can call us crazy…and you’d be right, we’re crazy…crazy about the environment.

don’t feed the creatives

Our new space has ten foot ceilings, which researchers determined increases creativity. Upon learning that researchers at Ohio State University concluded that lemon balm plants help increase creative thought, we placed these plants above the desks of our designers and developers. All of Atomic’s employees have access to the community library, which contains books ranging in topic from logo design to CMS development to Ogilvy on Advertising. We even have a nice collection of cheesy self-help books. Our employees have also added their own personal touches, from a mustachioed cactus to a time-traveling DeLorean that help make our office more like our home.

love, peace & ping pong

Along with our happiness and creativity-inducing plants and natural light, we have a number of recreational resources at our disposal that serve as much-needed stress relievers. Namely, our ping pong table, Foosball table, big screen television and Nintendo Wii. Nothing allows you to get away from it all like an overhand smash against your greatest office ping pong rival. For celebrating victories after hours, we have a Red Bull mini fridge stocked with energy drinks and a certain liquor that goes well with energy drinks.

Atomic firmly adheres to the “work hard, play hard” mantra. We believe that ensuring that every one of our team members enjoys coming to work will allow us to continue to create award-winning, industry-leading design work.

so there you have it

A bunch of research + a lot of planning + a team that knows how to get stuff done = the coolest 3,500 square feet in Dayton, Ohio…maybe even the world (excluding all places that have roller coasters which were slightly outside of our budget).

If you’ve read all this, you might be interested in calling us and setting up a tour. Don’t be surprised if you get stuck here.

Dayton Web Design Award

Each year, the Greater Dayton Advertising Association and the American Advertising Federation honors creative excellence in advertising by inviting accomplished advertising and design firms to take part in the Hermes award competition.

There are three levels of Hermes awards: Gold, Silver and Bronze. Recipients of the Gold award are publicly recognized at an annual banquet, given the opportunity to say a few words of acceptance and gratitude among their creative peers and, most importantly, given a life-size bust of Hermes himself.

This year, Atomic Interactive was honored to receive its first Gold Hermes Award for excellent creative design in the Public Service category. It is rare for a company as young as Atomic Interactive to be honored with a Gold Hermes Award. We at Atomic showed our appreciation and excitement with the nomination and eventual award when every employee of Atomic, along with our significant others, attended the awards ceremony at the Dayton Masonic Temple.

Atomic was presented with a Gold Hermes Award for creating a website for GetUp Montgomery County, an initiative to encourage the children of Montgomery County to lead healthier lives. Atomic created a beautiful, fun site that appeals to both adults and children alike.

At Atomic, creating an excellent website relies on establishing a functional and pleasant relationship with each client, which is precisely what happened when Atomic collaborated with GetUp. We were more than pleased to work with Lorraine Russel, Chris Schlorman and Jim Gross, Montgomery County Healthy Commissioner. Each of these members of the GetUp team played an integral part in the development of their award winning website. We feel grateful any time we get to work with a client who is receptive to our creative vision and GetUp displayed a great amount of confidence in our abilities as a design team.

For Atomic, the Hermes award ceremony was a tremendous success. Along with the Gold Award, we were also honored to receive three Silver Awards and three Bronze Awards. The Silver Hermes were for the design of Buckeye Business Solutions’ website in the category of Interactive Media; in the Public Service category for the design of a Digital Learning Portal website for the Public Health Department of Dayton & Montgomery County and for a Digital Storytelling website for the ThinkTV Network, also in the Public Service category. The Bronze Hermes were all awarded to Atomic for design in the category of Interactive Media for the following website designs: Bullen Ultrasonics, Siesta Key Vacation and MacTown.

Currently, our Hermes Head is proudly displayed in our Downtown Dayton office. It will serve as a reminder to all of our employees of the fun time had at the awards ceremony and as an incentive for creating websites in the future that are also deserving of the Hermes Gold Award.