HTML5 and CSS3 make development more powerful than ever

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.

Clean Code

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.

, , ,

Customizing Social Media

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?

, ,

Cubicle Envy

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.

, , ,

Atomic Wins Gold at Hermes 2010

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.

,

Using jQuery to simplify web development

Dayton Web Designer

 

If you’re a web developer and you’re not using jQuery, I have three words for you: get with it.

jQuery is a JavaScript library that makes working with JavaScript a lot easier. Basically, it helps you code more efficiently and more cleanly than you could using regular JavaScript code. It cuts out a lot of the mundane work that used to be required to add different types of animations and interactions to a page. In short, it helps you find whatever you want on a page, and make it do whatever you want.

If you’re not a web developer, the main thing you want to know about jQuery is that it can help make your website interface much more user-friendly. For example, you can use jQuery to …

  • create calendars that let customers click on a date to make a reservation for an event
  • create seating charts that let customers select a seat on a plane, or in a theater
  • create forms and make sure that customers fill out forms properly
  • let customers “rate” shopping items by clicking on a certain number of stars
  • let customers magnify part of an image – such as the image of a product they’re thinking about buying

Having your developer use jQuery is also important because, frankly, it saves so much time. That means we can build more functionality and more interactivity into your site more quickly. That keeps development costs down and helps your project get done in a timely fashion.

I like to think of jQuery as a library of shortcuts for web developers … effects that we can pick up and plug in to your site without reinventing the wheel. Again, this saves you time and cost.

Nearly every site we build at Atomic uses jQuery in some form or fashion. A great example is our site for MacTown. We used jQuery to create a horizontal slider on the homepage to highlight different product categories. We also used it to create a shopping cart with drag-and-drop functionality, which simplifies the purchasing process. And who doesn’t want to make it easier for customers to buy stuff?

Interested in talking about how animation and interactivity can make your site more user friendly? Contact us anytime.

, ,

New Demo Reel & Studio Tour

[hana-flv-player video=’/wp-content/uploads/2010/02/atomic_final_vmed.flv.flv’ /]

We had the pleasure over the last three weeks of having Casey Spitnale, an intern from The School of Advertising Art join our team. Casey is an uber-talented young designer with a passion for interactive and motion design. We gave Casey a rough idea for a motion design piece that would show off the killer design work and not-so-serious environment of Atomic Interactive. Casey infused his creativity and technical knowledge to create a fun, professional looking piece that exceeded our expectations.

, ,

Is your website helping your business?

Often when I’m talking with a potential customer, they get stuck one question. Is improving their website really worth the investment?

They might want a good website in theory. But paying for it can seem like money spent on overhead, without much return on investment.

That’s why I help customers figure out clear business goals for their website, before they get started. Goals intended to help their business grow.

Those goals could include things like having more customers:

  • Fill out a “request for estimate” form
  • Click a “chat with a salesperson” button
  • Download a brochure, sales flyer, or white paper
  • Watch a sales video
  • Download a coupon
  • Sign up for a mailing list
  • And, of course, make a purchase!

Once we set goals for a website, its value becomes more clear. And our job as web developers also becomes clear: design a site that will achieve those goals.

We do that in a lot of ways. By creating a professional website that lends credibility to the business. By building intuitive navigation that lead visitors through a desired “path” in the site. By making contact information easy to find. By creating easy-to-use forms. And by designing effective calls to action.

The proof in the pudding is when we measure results against the goals. We can measure just about anything using Google Analytics. But we also love to hear firsthand results from our customers. Like when HotSpring told us that the majority of their sales were now coming in through their website. Or when K12 Gallery told us that online donations were starting to roll in.

From my perspective, a beautiful website is great. But if it’s not helping your business grow, it’s just so much ink on … well, a screen.

, ,

Managing scope changes

As Atomic’s project manager, my job is to plan our projects and keep them on track. Sounds easy enough … maybe even boring. But there’s one little thing that keeps my job challenging.

Changes.

Scope changes. Schedule changes. Software changes. You name it, I’ve seen it. In fact, it seems to me that no matter how carefully a project is planned, some level of changes are inevitable. That’s just what happens when a creative concept evolves into a reality.

So instead of closing my eyes and hoping that changes won’t happen, I’m always ready for them. Here are some of the strategies I use to keep our projects on track in the face of the unexpected.

  • Talk openly about the impact of changes. Sometimes a client thinks of a new requirement or new idea partway through a project. We can always accommodate these requests, but it’s my job to make sure the client understands exactly how those changes would affect schedule and budget. That way the client can make an informed decision on whether to implement the changes or stick with the original plan.
  • Be honest about delays. Every now and then, it takes us longer to execute a task than we thought it would. (Yes, it’s true – we do make mistakes!) In those situations, I always let our clients know right away that we need to bump our schedule back a couple of days. Clients appreciate this honesty, and it helps them to better plan their review cycles accordingly.
  • Constantly monitor and adjust milestones. If we miss a milestone in our project schedule, we don’t just throw up our hands and say, “well, we’re sunk now.” Instead, I constantly readjust project milestones as needed. If we get behind on a deadline, I find out if we can expedite subsequent ones. And, if needed, I crack the whip and get our team really cranking to help us meet a deadline.

Of course, in my fondest dreams, all projects tick along perfectly, with every milestone met to the minute. I’ll keep hoping for that … but in the meantime, when changes come along, I’ll be ready for them.

,

Pay Per Click: yes or no?

Email Marketing

Here at Atomic, we talk a lot about organic search – getting your site a high ranking on Google through strong website content, without using paid ads.

But paid ads do have a role in search, and pay-per-click is one of the best ways to utilize them.

Pay-per-click involves advertising your business on a search engine like Google. When people search for one of your keywords, your ad appears next to the search results. People can click your ad to make a purchase or learn more about you. The system is called “pay per click” because you’re charged only when someone clicks your ad, not every time the ad is displayed.

How do you know if pay-per-click is for you?

  • You need paying customers quickly. Maybe you just invested in a new location and need to start recouping your costs ASAP. You can’t wait a few months for customers to find you through organic search – you need customers in the door now.
  • Your business depends on web sales. Maybe you don’t have a storefront – you’re an online business. In that case, getting qualified buyers to your website is of prime importance, every day.
  • You’re targeting highly competitive keywords. If you’re one seller in a crowded marketplace, relying on organic search alone won’t cut the mustard. To stay on par with your competitors, you need the help of pay-per-click.
  • You have a changing product lineup. Organic search involves optimizing your site for keywords of ongoing importance – “DVDs,” for example. But what if you want to let customers know that you’ll have Star Trek in stock THIS TUESDAY? In that situation, organic search can’t get the message across quick enough. You need a pay-per-click campaign targeted to that specific release date.
  • You need to advertise a special sale or promotion. Maybe your business is having a once-a-year sidewalk sale, and you want to move as much product as possible. In that scenario, you want to take advantage of every advertising opportunity that you can afford – and pay-per-click is one of the most effective and most affordable options out there.

It helps to think of organic search and pay-per-click as dual strategies, working together to drive traffic to your website. Organic search is a long-term strategy that involves getting the best search results for your site over time. Pay-per-click is an immediate-term strategy that can get results quickly, when you need them the most.

Wondering if pay-per-click is for you? Talk to us today.