, , ,

Website redesign: Read if you dare

As Atomic’s business developer, I’m often the first guy clients talk about revamping their websites. You might think we start by brainstorming cool design ideas and interactive features. Our conversations are actually a lot more straightforward than that, though—but that doesn’t mean they’re not important.

Creating a new website is a little reading like a Choose Your Own Adventure book.

Remember those? You start with a mission. And every few pages, you make a choice that decides where the story takes you next. Before you know it, you’re fighting off mutant spider ants, space vampires, and killer slime. Make one wrong move and you’re in for a sure death. But play your cards right and you’ll live to tell an unbelievable tale (unless you get turned into a grasshopper, that is).

While CYOA missteps end with you getting eaten alive by sand dragons or abandoned in outer space, bad calls in web design can lead your site’s visitors to pretty bleak fates, too: unsure where to look for information, and lost in an abyss of subpages and links.

I’ll go ahead and spoil that story’s ending: After one failed mission, they probably won’t return.

Okay, maybe designing a new website isn’t quite a real-life version of Prisoner of the Ant People. But the choices you make at the beginning of the redesign process really do affect your end product—and whether user experience efforts fail or succeed. So I try to go over a few key questions with clients before we get rolling. Think of me as the narrator of your web design adventure. The choices you make are up to you.

These questions will help decide your site’s fate:

• What do you want your new site to do? Sell a product? Inform users about services?

Have people fill out a contact form? Decide your site’s main goals from the get-go, and you’ll be off to a good start.

• Who are your users? A review of your current site’s analytics will help you make some important decisions about your redesign. Are most of your users browsing on mobile devices? If so, build a responsive site. What terms are people using to find your business? Use those keywords in your copy. Understanding your audience’s needs will help you give them the best experience possible.

• How will you market your site? If nobody knows your site’s out there, it doesn’t matter how much great, user-friendly content you’ve got. You might as well await the lethal sting of a giant scorpion. Do you want to issue a digital press release or make use of other SEM strategies? How will you continue to promote your site once it’s live? We’ll plan your site with your chosen techniques in mind.

• Who will maintain your site internally? Launching your site doesn’t mean the mission’s over—far from it. Designate someone who can upload blog content, news releases, and updated company information regularly. Otherwise, you risk misinformation and broken-link black holes. Content management systems like WordPress are easy even if you don’t know code, but may require a little training at first.

A good user experience means more clicks, leads, and business for our clients. That’s why we ask customers these questions before getting started on a big project—and again during research and planning phases. The answers clients give help guide the layout, design, and information architecture of every website we create.

And when you consider that the alternatives include getting turned into bacon or becoming collateral damage in an interplanetary war, we think that’s a pretty important job.

If this doesn’t make you want to dust of your old CYOA books, I don’t know what will. (All plot references are real, by the way.) And if you want to avoid endings like these, talk to Atomic. We’ll help you guarantee mission success.

 

,

Why designers should know (a little) web development

So, you’ve got a great design idea for a new website, and you’re ready to take it to a developer. Or so you think. The developer looks at your mockups, and he’s got a few questions. Will it use jQuery for animations? How will drop-down menus behave? What will be your links’ hover states and rollover styles?

If your answer to these questions is, “uhhh…” (or anything similar), listen up. If you’re designing for the web, it doesn’t matter whether you’re doing the actual coding. Knowing at least a little about the world of web development is now officially part of your job.

Your design files should allow a developer to easily pick your design apart, build it, and take it live. To do this, you need to speak developers’ language—so you can explain exactly what you want them to do.

Why’s this so important? Because if you aren’t clear about how you want things to look, certain features won’t be built into the live site. (I learned this one the hard way.) But knowing the basics of web development means you can communicate clearly. And that will make your life—and the developer’s life—a whole lot easier.

At a minimum, here’s what you need to know.

• Get some basic CSS3 know-how. Gradients, buttons, drop shadows, and even basic shapes and rounded corners can be built with CSS. And using CSS instead of images cuts down on the size of a site—meaning faster loading time. Design visual elements that can be reproduced in CSS (rather than creating clunky image files), and developers will thank you for it.

• Use standard fonts. Choose fonts from Typekit, Google Web Fonts, or another major font directory. Again, if you choose a font that isn’t common on most browsers, your type will have to be displayed as an image, meaning slower loading times—and frustrated developers.

• Go easy on the backgrounds. The same goes for webpage backgrounds. Go for a solid color—or a small image or texture that can be easily repeated. This will also help cut loading times.

• Be careful with images. If you’re a designer, Photoshop is probably your thing. Here’s a tip for sharing images with web developers: Use the Pen Tool to cut out all images that will need a transparent background, instead of using blend modes. If the developer goes to save the image and you used a blend mode, it’ll show up on the live site with one of those ugly, patchy backgrounds. Don’t let this happen to you.

• Keep responsive features in mind. As some screens get bigger, while others get tinier, you need to make sure your design can easily adjust to different browser sizes—or appear in a totally different configuration based on the device it’s viewed on. So make sure design elements can be resized easily or simplified for faster viewing on mobile platforms. But don’t forget a high-res photo for full-width banner images—that way, it won’t get pixelated if viewed on a huge screen.

And where can a designer learn development basics—fast? You can’t learn to code overnight, but sites like Codecademy and Smashing Magazine are a great place to start. Another cool trick I’ve learned: find a site you like, and peek at its code using the Inspect tool in Chrome or Firefox. Just right-click on an element, click “Inspect,” and voila—learn any site’s coding secrets!

Soon, you’ll be throwing around terms like “cell padding” and “pseudo-class selectors” with ease. And you’ll be happy seeing your design creations come to life—just the way you imagined them.

Want to see what our designers are capable of? Contact Atomic, and we’ll give you all we’ve got.

 

,

Unification: The latest in responsive design has arrived

Web designers, it’s time for some spring cleaning.

Thanks to the rise of mobile devices, responsive web design (RWD) has been one of the biggest web trends of the past few years. (And it is great—I explained why in a previous post.) But like trucker hats, fanny packs, and other trends of yesteryear, the latest and greatest thing never stays that way for long.

As RWD has evolved, it’s birthed all kinds of design-related buzzwords. “Device-agnostic.” “Mobile-first.” “Adaptive content.” “Resolution-independent.” All of these have helped web designers communicate (or confuse) as they navigate the world of desktop, mobile, and everywhere in between.

All together now

Now, the next phase of web design’s evolution has arrived. So, of course, we’re in for a new buzzword: “Unification.” Unification rejects the idea of building separate mobile-only and desktop sites with content and layout tailor-made for each. As the name suggests, unification means just one site, with information and appearance that’s identical (or nearly so) no matter where you look at it.

Standard RWD typically calls for mobile sites that are condensed versions of a company’s primary, desktop site. People use mobile devices when they need quick info on the go, web designers reasoned, so let’s cut out the fluff and only give mobile users what they absolutely need.

Now that responsive sites have gained traction, and we’ve all had some time to figure out what they can do and how they’re being used, web designers have come to a few important conclusions.

First, mobile users aren’t necessarily “on the go.” Plenty of people use their smartphones to read the news, look up recipes, do research…all while sitting on the couch.

Second, as designers, we shouldn’t dictate what users are allowed to see where. Users choose what devices to display our sites on, and a full site should be available to them, no matter what.

A new approach

So does this mean a return to the pre-RWD era? Hardly. In assessing the value of mobile vs. desktop sites, designers came to a third conclusion—perhaps the most important of all:

User like mobile site. Mobile site good.

The great thing about mobile sites is that they’re inherently usable. They’re not bogged down with complicated menus and loads of text. They’re streamlined, simplified—and designed with UX in mind at every step.

This is the big breakthrough of unification. We’ll start designing one-size-fits-all sites for all devices—but they’ll look like mobile sites. Why? Because the user is, ultimately, all that matters. And mobile app-style interfaces make for some of the most user-friendly sites we’ve ever seen.

Sites will still be responsive, in the sense that image and column widths will automatically adapt to screen size. What will change is a slimming-down of content.

Dropping the excess

Things are getting cleaned up around the web. Companies are starting to ask themselves, “If this isn’t important enough for my mobile site, why am I including it at all?” Unified sites compel designers to feature only what’s truly needed—to give users the most no-frills, awesome experience possible.

Unification is still in its early stages. But it won’t be long before we start seeing sites like them all over our tablets, laptops, gaming consoles, and hey, maybe even our Google glasses. That is, until the next big thing comes along.

Want to be sure your business’s web presence is keeping up with the times? Talk to designers at Atomic to get in the know.

, ,

Moving Beyond the Fold

Clients often tell me that they think their sites scroll too much. “People are too lazy to scroll,” they say. “We want all of our most important content visible at once.”

I hear what they’re saying. Designing “above the fold” used to be huge in web layouts. But unless you’re still living in the early 2000s, this way of thinking just isn’t relevant anymore.

Designing above the fold means content has to fit in a space the size of your computer screen. That seriously limits design options—and can make your site look crowded as everything gets tinier and tinier to fit. Exactly how much space do you have to work with? That’s hard to judge, too, considering the countless screen sizes, resolution levels, and devices someone might want to view your site on.

I’m not saying you should load down your sites with never-ending blocks of text. The new generation of scrolling sites uses movement to tell a story. They’re perfect for introducing a new company or product: you can walk users through what your product does and how it works, then lead them right where they need to go to learn more—or better yet, buy. These sites are animated—but they require viewer interaction in order to come to life. Check out these examples to see what I mean:

http://www.zensorium.com/tinke/

http://www.milwaukeepolicenews.com/

http://a-class.mercedes-benz.com/com/en/index.html

Sites like these seem like they’d be complicated to build, but they’re really not: most of the effects you see can be created using just jQuery and CSS (get started with a framework like Blueprint or Foundation). Like any new trend, scrolling sites have their kinks: some techniques are only supported in current modern browsers, and adjustments have to be made for mobile displays.

But personally, I’m excited about what scrolling sites have to offer. I could click around sites like these all day and never get bored—they’ve got the power to hook even the laziest of web surfers. And I keep going back to show other people how awesome they are. As a developer myself, I know that’s music to a site creator’s (and client’s) ears.

Is your site trapped in a scroll-less rut? Contact Atomic, and we’ll help you set your site free.

, ,

Hooray for the Hub

A few years back, I was working as special projects manager for the City of Dayton. The city needed a firm to take on a unique assignment: creating a website for the Ohio Aerospace Hub. Dayton earned the Hub title in 2009, an initiative to draw aerospace-related jobs, education, and economic development (read: cash money) to the region.

Researchers partnering with the Ohio Aerospace Hub are up to all kinds of crazy stuff: advanced sensing, drone technology, cybersecurity, you name it. The Hub needed a website to show off its research to the world.

But the website had to do more than just inform. The Ohio Aerospace Hub will require significant investment over time—not to mention an A-team of scientists and engineers to get things done. Now, we locals already know how cool Dayton is. But the city wanted to raise its profile by attracting a new segment of people: techies, creative types, entrepreneurs, and businesses keen on Dayton’s new aerospace economy. That’s a tall order for one little website—but Atomic was up to the task.

In the search for the perfect firm for the job, Atomic really set themselves apart. (It also led to my job here—but that’s a different story.) Throughout the development process, there was great collaboration between the guys at Atomic, the director of the Hub, and all of the partners involved. The result: an awesome site—that got people talking as soon as it launched.

And it’s not just Daytonians taking notice. International publication fDi Magazine held its first annual Digital Marketing Awards in 2012, sizing up economic development sites worldwide on design, innovation, and social media strategy. More than 50 organizations entered the contest. The Ohio Aerospace Hub won 12th among websites overall, and third among Economic Zones, a category for initiatives within a city, state, or country.

I’m proud of what our team has accomplished. Now, Atomic is ready to help the Ohio Aerospace Hub move forward as its research products take flight. (Plus, maybe they’ll finally let us give their latest gadgets a try. Fingers crossed.)

We can’t wait to see what the Hub does next.

, ,

Web Design Management│Keep Your Eyes on the Prize

Designing—or redesigning—a site can be so much fun. (We understand. We get excited about this stuff, too.) But in discussions of content, design elements, and awesome interactive plans, it can be easy to lose sight of what should drive all decisions you make: what is your site’s goal?

As project manager, I’m reminding clients of this all the time. It’s my job to keep plans moving forward—and also on task. While this goal may elude you at times, it shouldn’t be too hard to come up with. Chances are, it’ll be right in line with the aims of your business overall.

For example, if you sell gourmet gluten-free cupcakes for dogs, you may want customers to visit your shop to admire your canine confections. If you’re a purveyor of bouncy castles for birthday parties, maybe you’d like interested party planners to call you up to check availability. Or maybe you want visitors to set up a meeting, request a quote, place an order online, or comment on your site’s content.

No matter what your purpose, you should define it—clearly—from the very beginning of a project. Make sure clients and design teams alike understand it, and know how to bring it to life. This ensures that every step, from sitemap to content placement, supports the goal you want to achieve.

If you want visitors to get in touch, place a simple call-to-action form on every page of the site. This makes it easy for readers to do what you want them to—without them having to search the site to find your phone number or email address.

(And please, please: keep contact forms short and sweet. If visitors have to spend too long trying to reach you, or don’t feel like giving personal information right off the bat, they’ll get out of there quick.)

When a site is built around a central objective, everything else just falls into place. It makes for on-task design teams, satisfied clients—and site visitors that find exactly what they need.

Are you sure your site is doing what it should? Contact Atomic, and tell us about your goals.

, ,

Peace, Love, and RWD

We’ve talked a lot lately about responsive web design—and if you’ve been paying attention, you know it’s an innovation we’re pretty excited about. As Atomic’s new web development manager, I’ve noticed something else: responsive design has changed the designer-developer relationship.

It used to be that a graphic designer would create a finished Photoshop document depicting his or her vision for a site. The developer’s job was to make the site match the doc, pixel for pixel. In design school, you’d lose points for wrongly-sized columns or incorrect text. And if you were a professional developer, the consequences weren’t any friendlier.

Now, things are different. As Web platforms, screen sizes, and resolution types multiply like rabbits, a layout that looks great on one screen might not look so good on another. This means that designers and developers alike have had to learn to compromise.

Designers have to accept the fact that their designs aren’t going to be exactly the same form one viewport to the next. And developers have to realize that they can’t build a unique site for every device—coding time and costs would be way too high.

Another downer for developers: with the number of screen sizes out there, we have to give up on pixel perfection. Why? Responsive designs use percentages, rather than fixed widths, to tell browsers how to display websites. For ensuring a consistent look from one screen to the next, this is great. The problem is that when percentages aren’t expressed as whole numbers, browsers get confused. The number ends up getting rounded either up or down, meaning that sites don’t always display the way we plan. But fortunately, most of these rounding errors are usually only obvious to other keen-eyed developers.

So yes, responsive design has created some bumps in the road. But ultimately, I think it’s led to a more collaborative relationship between style-minded designers and code-bound developers. Designers still bring the initial creative force with a site mockup. But developers don’t have to follow it blindly: they’ll create a beta site, and we’ll test it on different devices to make sure all of the responsive elements work. The designer comments; the developer tweaks. We’ll go through as many iterations as we need until both sides (and of course, the customer) are happy.

And when my team’s happy, I’m happy.

Need a site that looks great on every screen? Call up Atomic and we’ll make it happen—no matter how many trials it takes.

, ,

Tip-Top Typography For All

If you’ve used the Internet in the past, like, three years, you’ve probably noticed something: Fonts are looking good these days. Custom web typography is huge, and it’s a trend that’s here to stay. Here’s why.

  • It’s insanely easy to implement. Plenty of free services can help you get beautiful fonts up and running on your site. Typekit and Google Web Fonts are great online apps. You can also use CSS3’s @font-face query, which lets you upload custom fonts to your site’s server. Even visitors who don’t have the font installed will be able to view the font in all of its typographic glory.
  • It doesn’t limit designers’ creativity. Quite the contrary. Advanced typography multiplies what web designers can do. For us at Atomic, it allows us to create more beautiful websites, and better represent our clients’ brands.
  • It’ll only get better with time. Back in the day (you know, 2008), if you wanted to use a special font, you had to apply a Flash plugin. But Flash is no good on mobile devices, and now there are easier ways to flaunt your fonts. Plus, font libraries will continue to grow, and fonts themselves will become more standardized. As a designer, that’s a lot to look forward to.

 

But there’s a catch: even as gadgets and programming languages surge ahead, advanced fonts can still mess with layout on older browsers. That’s where responsive web design comes in. Programs like Modernizr can sniff out compatibility issues, and input queries to tell a site to switch the font based on screen size, browser version, and so on.

Custom typography is making the web more beautiful. And it can really add value to your site. It’ll set you apart from the rest—and look awesome while doing it.

Still stuck in a Times New Roman time warp? Contact Atomic and we’ll get you up to speed.

, ,

We Can See Clearly Now

When Apple rolled out the Retina display-equipped MacBook Pro earlier this year, the world oohed and aahed at its eye-popping renderings of nature photographs and smiling stock photo models. Meanwhile, web developers everywhere did a collective facepalm.

‘Retina’ quality devices are said to have such high pixel quality that at a normal viewing distance, the human eye can’t detect pixelation. Less pixelation means, crisper, cleaner, more beautiful-looking websites. Newer iPhone and iPad models already use Retina displays, and with the release of the new MacBook Pro, these devices are gaining market share.

That’s great. But for web designers, Retina displays pose a few problems. Plenty of consumers have scrambled for the new MacBook Pro (despite the hefty price tag)—but plenty haven’t. When Retina-display users view a site designed for an ordinary low-res screen, all that pricey pixel potential just gets wasted. But completely revamping web graphics and typography in Retina quality means larger image sizes and longer page-loading times—even for users without Retina display. It’s a lose-lose.

So how’s a designer to create a great cross-platform web experience and stay cutting-edge? The answer is responsive web design (RWD). Just as media queries can be applied to CSS to tell a site how to behave on different devices, they can also be used to change what users see depending on whether they’re viewing in a high-res or low-res environment. It means non-blurry, fast-loading pages for everybody—and less headache for developers.

Dealing with a new set of compatibility standards isn’t always easy. But at Atomic, we’ve made RWD part of our standard development processes, so we can respond and adapt with ease. As it happens, so-called retina-quality devices don’t even come close to the pixel-perceiving quality of the actual human eye (they’re based on 20/20 vision—but plenty of people can see even better).

Retina 2.0 may not be far off—and we’ll be ready.

Do you know how your site looks in Retina-vision? Contact Atomic and we’ll get your page up to snuff.

, ,

Break The Mold With Custom Web Design

Ever visit a restaurant that got the dining experience just right? I don’t mean only great food. I’m talking about a place that really understood what they were about. From the impression when you walked in the door, to the look of the menu, to taste of the meals themselves—this place showed that they were something special. You probably recommended the restaurant to friends, and maybe even became a regular customer. You went for the grub, sure, but it was the experience that kept you going back.

The way we interact with websites isn’t so different. While it might be a little easier (for us non-programmers, at least) to pick out the details that set restaurants apart, it doesn’t take a trained eye to tell the Bob’s Diners from the hip eateries of the web world.

As Atomic’s business developer, I get asked all the time what the big difference is between template-based and custom websites. Why shell out for a custom site when you can get an off-the-shelf template for a fraction of the cost? It’s a valid point—but one you may end up paying for later. Here’s why:

Credibility. Your website reflects your business. A custom-made site says, “I know what I’m doing. This look takes work. Let’s get to know each other. Sit down and stay a while.” And a template looks like, well, a template, no matter which “unique” design you pick. As a veritable fast-food chain of websites, it says…not much.

User experience. Good luck incorporating your company’s branding elements into a template site. All templates have virtually the same navigation and site map, leaving little room for customization. Have extra service lines, a unique business model, or want additional functionality? Too bad. Visitors may never find out about them, because if they don’t fit within the template’s preset formula, you’re out of luck.

Custom design, on the other hand, shakes things up. It gets users excited about all the cool things the Web can do. Plus, it allows for all the business-specific gadgetry your enterprising heart desires (like order tracking, purchase histories, and clear calls to action).

Back-end ease of use. Web code has high standards. These standards help developers organize data so that it’s logical for upgrades. They’re also important for sharing information with search engines, like Google. If standards aren’t obeyed, search engines won’t index your site correctly, making any SEO work you’re doing for naught.

But website templates aren’t always built with standards-compliant code. The worst part? You won’t know if a template is compliant or not until after you’ve purchased it. Reputable web companies build custom websites with clean, well-organized code.

The bottom line is, you just can’t accomplish a memorable user experience using a template (did I mention they’re also prone to hacking?). By the time you spend the time and money to deal with the headaches templates cause, you’ll wish you’d invested in a custom website from the start.

Be the place people are talking about. Don’t be the greasy spoon.

Fortunately for you, custom web design is kind of our thing. Contact Atomic for ideas on how to help your site chuck the cookie cutter.