, , , , , , , ,

How to know if you need a new website

If you don’t have these 4 things, you need a new website.

Online shopping has become one of the easiest and efficient ways to shop. That’s why more and more people are going online to look for products and services rather than going to a physical location. That means your company’s website is crucial to keep up with the times and capture your consumer’s business.

First impressions are everything

I’m sure you’ve heard that expression before. The same goes for your website. Consumers need good experiences so if someone goes to your website and it looks outdated or they can’t find anything, they will more than likely go somewhere else. You may not be hearing complaints about your website, but that doesn’t mean there’s not a problem. If you had an updated website, you could be getting even more traffic, leads, and sales. What we tell customers is to redesign your site every 2-3 years with periodic updates to ensure you’re giving your customers exactly what they want: content, user-experience, and appealing design.

Is your website optimized for mobile?

If not, you need a new website. Something to keep in mind is the importance of mobile. Whether you’re a manufacturing company or a retail company, your customers have phones. There are a vast number of searches every day on mobile devices so that means your site must be designed as such. Responsive design for mobile devices will ensure your consumers have a good experience wherever they look at your website and services.

Is your site SEO capable?

If not, you need a new website. Search engine optimization, or more commonly referred to as SEO, is where your site will appear on search engines. Consider this, you have a solid website, enticing brand messaging and a cool logo, but your website isn’t optimized so no one will ever find you to even see that. That makes all your previous efforts meaningless. Having a site that is ready for SEO is huge so if you don’t have a site that gives you that ability, you are already way behind the game.

Does your website take forever to load?

If so, you need a new website. If your site is slow, your rank on Google will be drastically lowered. Not to mention, people want things exactly when they want them. If your page takes forever to load, people will bounce off your site and onto your competitor’s.

Can you link social media on your website?

If not, you need a new website. We mentioned people go to your website to look at your services and may look up your website on their mobile device, but we haven’t talked about the power of social. A large number of people also want to know what other people have to say about you and whether they want to do business with your company. That means they may go to social platforms to make their decision. It’s important to be on social to funnel your potential customers back to your website. If you aren’t on social, that’s an opportunity to gain even more business, but if you are on social and don’t have a website that links with them, that’s just as bad!

Final Thoughts

There are plenty of reasons to update or get a new website, but if you don’t believe us, just look at your competitor’s website. Technology is always changing and so is the way people do business. If you want to ensure your business is future-proof and continues to do solid business, you may want to consider updating your website.

, , ,

Why You Should be Using Icon Fonts

Remember dingbats?

They’re the fonts that come preloaded on most computers, made up of hand gestures, zodiac signs, and tech dinosaurs like floppy disks and cassette tapes. (Windows’ version is called Wingdings.) They were used for…actually, I have no idea. Sending secret messages in code, maybe?

Well now, dingbats are all grown up. And believe it or not, they’re an important part of any modern web designer’s toolkit.

Say it with icons

We’ve talked a lot about responsive design here. But there’s one piece of the puzzle we have yet to address: how to deal with icons. The most obvious move might be to upload an image of the icon you need—say, a shopping cart to represent your online store, or a gear to link to your settings menu.

But image files are clunky. They get pixelated on larger displays. They don’t always size correctly. One option is to use a vector to ensure consistency across screens—but these tend to be large files, and can slow down your site if you have lots of icons to display.

So, what’s the solution? Over the past few years, many web designers have made the transition to icon fonts. Says The Next Web, think of icon fonts as a grown-up version of dingbats—with an actual purpose. These font faces are made up of the symbols we see all over the web every day: tiny speech bubbles, which we now associate with commenting features. Lock icons meant to suggest security. Miniature trash cans that allow us to scrap whatever we’re doing and start over.

Without even meaning to, we’ve all learned the “language” of these icons. When we see a picture of an envelope or a calendar page, we know what to expect. And fortunately for web designers, you don’t have to start from scratch when you need icons to use for your own site. There are plenty of font libraries out there—some of them available for free. Many of these fonts even contain logos for social platforms, like the Facebook “f,” Twitter bird, and Google “g.”

Good for users, good for you

Why else do icon fonts trump images? Chris Coyier at CSS-Tricks gives a great explanation. With just a few deft change to your code, you can change icons’ size and color, add shadows, use transparent knockouts, rotate, and more.

Plus, icon fonts’ minimalist, no-frills look is right in line with what’s popular in design right now (think Windows 8 Start menu icons or Apple’s new iOS).

Getting started with icon fonts is pretty simple. Download the font packs you want, then use the “data-icon” attribute to tell your CSS how you want icons to behave. You can take this a step further to be sure icons are interpreted correctly by screen readers—more on that here.

You can also use a service like IcoMoon, which allows designers to create one-of-a-kind icons (or use IcoMoon’s own), then store them remotely on IcoMoon’s servers. Then, you can swap out icons easily, without having to change your CSS.

This might sound complicated, but once you get the hang of using icon fonts, you’ll wonder why you ever bothered with pesky jpegs and vector files. Your site visitors will see faster loading times and great displays on any screen.

Sometimes icons speak louder than words. Need help integrating them into your site? Give Atomic a call today.

, ,

6 Design Trends to Watch for in 2014

It’s almost the end of the year, and you know what that means. It’s time for 2014 countdown lists! These are Atomic’s predictions for the upcoming year’s major trends in web design. These trends entered the stage in 2013, and we think they’ll stay big in the year ahead.

1. Responsive design. We’ve highlighted responsive design before. But we believe it’s much more than a passing fad. As we enter the era of phablets and smart watches, smaller laptops and longer iPhones, we think responsive design (and, specifically, a move toward unification) is here to stay. It’s become clear that designers can’t possibly keep up with all of the screen sizes available. Instead, we need to be designing websites that scale to fit.

2. Flat design. Call it the Jony Ive effect. Flat design means getting rid of 3D-like effects like bevels and drop shadows, and opting instead for crisp, textureless swaths of color. It’s right in line with responsive design trends (flat colors load quicker), and with the release of iOS7 this fall, is sure to become a sign of the times.

3. Minimalist design. Remember when we all needed to show off our web design chops with animated buttons, pop-up windows, tons of photos, and type so bright you had to squint? If the number of minimalist sites we’ve seen lately is any indication, it’s time to give that up. Minimalism is flat design taken a step further, removing not just color effects but all unnecessary features and content. In 2014, think lots of black and white, simple menus, quiet animations, and definitely, definitely no WordArt.

4. Full-width background images. Not quite ready to face the look of a stark-white site? One way to make your site pop—but still stick with the times—is with a high-quality background image that fills the entire screen. This only works if it’s executed right, though—take some time to learn the CSS tricks you should know to make images look beautiful on responsive sites.

5. Print-inspired typography. Proof that print will never truly die? Nostalgia for a simpler, pre-Snapchat era? Whatever the reason, typography and layouts resembling print publications have being springing up all over the Web. Fortunately for designers, staying hip doesn’t have to be a design headache. Typography options are growing and using web fonts is easier than ever.

6. Parallax scrolling. Parallax effects go hand-in-hand with the scrolling website mega-trend. It means that different elements on a web page scroll at different speeds, giving a sense of 3D movement. To avoid giving your site’s visitors motion sickness, use parallax scrolling in moderation. Check out a few great examples here.

2014 is sure to bring its own crop of brand-new design trends (who knows what we’ll be reviewing this time next year?). In the meantime, if you want to be on the cutting edge in web design, these are the trends to follow. At Atomic, we’ll be keeping our eye on what’s next as we continue to deliver great design to our clients.

Is your site looking a little, well, “last year”? Contact Atomic to get your website with the times.

,

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.

, ,

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.

,

Any way you look at it, responsive web design rocks

Sure, it’s a first-world problem. But it’s more than a little annoying: you want to know, let’s say, the contact number for a nearby restaurant. You load the webpage from your smartphone, only to find that the text shows up in teeny-tiny print.

A minute of touch-screen pinching and squeezing later, you’ve finally got the text to a readable size. But you still can’t find what you’re looking for. Instead, the number is buried on another page, or in a corner you can’t possibly see once you’ve zoomed in.

If memories like these make you want to chuck your phone across the room or use your tablet as a boomerang, take a deep breath. It doesn’t have to be this way.

Changing up design to fit the medium

That’s why there’s Responsive Web Design (RWD), a way of leveraging current web standards to adapt the layout of what you’re displaying, no matter where you look at it. Like mobile web platforms themselves, it’s a new concept. But as more people access the Internet via mobile devices, it’s gaining ground—and making for a much friendlier browsing experience.

There are a few different frameworks you can use to get your site mobile-ready. I like Foundation’s intuitive, easy-to-use interface. Another good one is Bootstrap, from Twitter. And WordPress has also developed some responsive themes for bloggers.

Foundation allows you to lay out pages quickly and logically within a flexible, nestable system. Upload your content into preset grids, and enter rules in CSS to dictate how windows will appear on various devices. Foundation applies ratios to areas of content (rather than absolute pixel sizing), ensuring that fields remain proportional. Plus, Modernizr is built in, ensuring your site looks its best even on older browsers.

Giving users what they need

What’s great about RWD is that you can emphasize what really matters. If your client wants customers to call, give ’em a landing page with a fat, clickable button they can use to dial the number right from the site. If they want users to be able to make reservations with ease, make sure a reservation schedule shows up on top.

If you’re a developer and you’re not using RWD yet, you should be. It’s a huge timesaver because it means only one development cycle, and one set of code applied to all devices. Just add in the media queries, which control which style rule gets applied, to your CSS, and voila—no more writing entirely separate code for a mobile-only site.

Here at Atomic, we try to incorporate RWD into client projects by default. The way we see it, it’s just the way web design should be done. While some prevailing wisdom favors the ‘Mobile First’ approach, we kind of turn that model on its head. We make desktop sites the best they can be, and go from there to create amazing mobile versions, without sacrificing quality.

The world is going mobile. Don’t let your site be the cause of any smartphone-projectile-related misfortunes. You’ve been warned.

Does your website need to clean up its mobile act? Contact Atomic Interactive to learn how to make responsive web design work for you.