A Mobile State of Mind

by Dan Redding on · Leave a comment

Typically, when a web design client discusses a new site with their awesome new team of designers, the discussion will likely include examples of desktop websites that can serve as inspiration. This will lead to mockups of the desktop appearance of the new site. We are used to focusing on the desktop experience, only considering the mobile version of the site as an afterthought. This is dangerous – the layouts will differ, and mobile sites often require top-level reconsiderations of content and user experience. It’s time to transcend desktop-centric thinking. Designers and clients alike must increasingly ask ourselves to repeat the mantra, “But how does it look and function on mobile?”

The ‘Mobile First’ Approach

Way back in 2009 – a mere apartment lease ago to us, but a half-dozen lifetimes for the Internet – designer Luke Wroblewski began positing that we should reverse our desktop-first approach to web design. Websites and applications should be designed for mobile first, he said. His primary justification is that “mobile is exploding.” That trend has only accelerated since 2009; mobile web use is likely to eclipse desktop use this year.

Whether or not a mobile-first design process is appropriate for you, Wroblewski’s approach should cause a seismic shift in the way we think about the web. Focusing entirely on desktop is outdated and dangerous.

Our latest responsive project for www.miquon.org

Beyond the PSD

Historically, the first steps of a web design job have included presenting the client with Photoshop mockups of a website’s desktop appearance, from wireframe to final design. This is desktop thinking, and it is a “process that makes less and less sense in this multi-device age,” according to designer Brad Frost. Now that responsive design is the industry standard, we must design for a variety of shapes, sizes and formats. Photoshop mockups are static; responsive websites are dynamic. One way to handle this challenge is to present clients with two or three layout mockups (desktop browser and iPhone 5 portrait, for example), and discuss where and how the design and user experience should change. Another approach would be to confirm wireframes and then design in browser.

Repeat After Me

The responsive era is bigger than mobile. It doesn’t mean we should add one iPhone layout to our consideration and call it a day. Rather, it means expanding our expectations for a flexible website that can respond to a variety of browsers and devices – including those we have now and those that will emerge as the Internet continues to evolve. Those can be overwhelming concerns; we don’t always have time for a complete overhaul of the way we think. For now, the next time you encounter a client or colleague who is solely focused on desktop appearance, just ask, “But how does it look and function on mobile?” It’s a good start.

Share this post yo:
  • Twitter
  • Facebook
  • email
  • LinkedIn
  • RSS
Posted in: Responsive Design · Web Design · Tags: responsive design · Leave a comment

The Base of Our Camp

by Joshua Bolt on · Leave a comment

BasecampWe’ve lightly touched on the tools we use here at Command C, but I’d like to go further in depth about Basecamp, our project-management system. This online resource was developed and launched in 2004 by 37signals, a privately held web application company based in Chicago. Because communicating with our clients is what we place the most emphasis on externally, communicating amongst our team internally must be just as important. Basecamp helps Command C keep both our team and our clients in the know at all times.

SAME PAGE
Organized on a project-by-project basis, Basecamp keeps everything organized and everyone on the same page. Each member of our team has a profile. When they log in, they can see assigned tasks and collaborate with other members of the team. While email communication will never become extinct (nor do we want it to), with Basecamp, digging through emails and contacts is a thing of the past.

REMOTE COLLABORATION
Loop the people in that matter to the project most. Share documents, designs, files, photos and more with Basecamp’s easy drag-an-drop tool. In text docs, brainstorming works! While you write, your team members can provide feedback in real-time. Everything is constantly autosaved, so we never worry about losing anything. Also, there’s a complete history, showing who did what.

ORGANIZED FACE
Endless emails, large sloppy attachments, six people communicating with a single client; what a headache! That’s why Basecamp is great. Clients aren’t overwhelmed. The user interface inside Basecamp is effective, well-designed, easy-to-use and manageable for clients. It streamlines the entire operation in an organized fashion – everybody wins. And when your project has been executed and deemed done, it is archived for future reference.

INEXPENSIVE SOLUTION
At Command C, we simultaneously manage multiple large-scale website development projects. This is no easy task, but we have to credit Basecamp for helping us keep everything (and everyone) organized. This great tool ranges from $30 to $150 per month, providing difference elements with each package. It’s pay as you go and there are no contracts. There’s also a free 60-day trial to get you started and see if it works for you.

–

All images used in this post are courtesy of Basecamp.com

Share this post yo:
  • Twitter
  • Facebook
  • email
  • LinkedIn
  • RSS
Posted in: Business · Tips · Tags: basecamp · Leave a comment

To Social Button or Not to Social Button

by Dan Redding on · Leave a comment

Most savvy website owners were quick to adopt social sharing when the ‘Web 2.0’ and its ensuing horde of social media services crowded the digital horizon roughly a decade ago. That’s a good thing; the way we have embraced content sharing has made the web what it is today. The downside is that in 2013, many websites have a slew of social media buttons lazily pasted on by default; some features, like the ubiquitous ShareThis toolbar, are overbearing (including dozens of unheard-of social sites) and difficult to use. Isn’t that style of social gluttony somewhat, well, antisocial?

So is it still necessary to include social buttons on your website?

PROS AND CONS

We’ve become conditioned to use social buttons by default; most clients will request them right off the bat. To some, the mere presence of these buttons adds a sense of legitimacy; to others, they are merely free advertising for Facebook and Twitter. As web designers, we should always question their use before proceeding. Will the buttons be effective – or used at all? How will they impact the rest of the site’s user experience?

If possible, conduct tests. If you can analyze your users’ social behavior on your site and the corresponding impact on traffic, you can diagnose the effectiveness of these tools.

One prevailing opinion is that users will share with or without the buttons on your site. After all, genuine sharing comes from an authentic interest in your content, and a happy blog reader will be naturally inspired to grab your URL and tweet something nice about it. “If you provide excellent content, social media users will take the time to read and talk about it in their networks,” says Oliver Reichenstein in his case against social media buttons. “That’s what you really want. You don’t want a cheap thumbs up, you want your readers to talk about your content with their own voice.”

MOBILE CONSEQUENCES

The mobile era may be a step towards the obsolescence of social buttons on your website. The reason: mobile device developers are integrating the buttons into your native user experience. In Apple’s iOS6, for example, Twitter and Facebook buttons have been added to the ‘share’ screen by default.

iphone
The iPhone's native sharing tools render most local share buttons obsolete

This means that users can share on the web’s two most popular social platforms quickly and conveniently. Still want buttons for MySpace, Flickr, and obscure social site X? Before you add them, consider the broader ethos of designing for mobile: less is more, and simple efficiency prevails.

Speaking of efficiency, it’s possible that your social buttons are harming your site’s load time – a major flaw. According to designer Jonathan Smiley, “I think the real killer for (social buttons) on the web is simply speed – they brutally damage page load, especially on a mobile device that might have a slower, higher-latency connection.’

CONCLUSION

Surely, the use of mobile buttons should be determined in a case-by-case basis: what makes sense for one site might not make sense for another. If your target audience has high social-sharing web behavior, then  you’ll likely want to include them. The web is an experiment in evolution, so you can always test your site with and without social buttons. There are no rules.

There may not be a simple yes or no answer here – but there is a moral to this story. The time when social media buttons were considered a default must-have website feature has come and gone. Just like any other feature, this element should be given careful consideration before implimentation. As the mobile web leads us down the path of potent simplicity and lean efficiency (those should have always been our guiding principles, anyway), it’s time to reconsider our default settings.

Share this post yo:
  • Twitter
  • Facebook
  • email
  • LinkedIn
  • RSS
Posted in: Tips · Top Posts · Tags: social media · Leave a comment

Why Your Business Needs Responsive Design

by Dan Redding on · 2 Comments

As we’ve all heard by now, responsive web design is the strategy that contends that a website should respond to the user’s device, platform, and screen size. If you’ve read our articles Responsive Design 101 and 102, you already know that a responsive website will conform beautifully to your desktop computer, your iPhone, or any other gadget that you or the folks at Apple can dream up. What you may not know is this: a responsive website is a necessity for your business. Here’s why.

Responsive Design is an Industry Standard

The concept of responsive design has come a long way since Ethan Marcotte popularized it with a seminal article published in 2010. Since then, responsive design has been embraced as an industry standard. Social media publication Mashable declared 2013 “The year of responsive web design.” Influential web design publications like Smashing Magazine see (2011′s ‘Responsive Web Design: What it is and How to Use It’) have been on board for years.

In short, a responsive website is a necessity for the modern digital audience. If all you offer is a desktop version of your site, you might have a frustrated mobile audience pinching and scrolling around the desktop version of your site, confused about why the text is small and the interface kinda seems broken on their iPhone or other handheld device.

Responsive design we created for Pop Cart Lab

Now’s the part where you might find yourself furrowing your brow, exclaiming, “But I just updated my website with a beautiful new design two years ago!” It’s a fair point – web design evolves at rapid pace. The truth is that responsiveness is not a trend or a gimmick, but a necessity that was developed to harness and respond to the booming mobile and tablet landscape. The devices we use to connect with each other online will continue to change; responsive design attempts to provide the flexibility that’s necessary to change with them.

Responsive Design Means a Bigger Audience

Going responsive means reaching out to users on all devices: desktop, mobile, tablet, and beyond. Cast a wide net, and you’re providing a welcoming experience to your site visitors. iPhone users, for example, deserve a user experience that is tailored to fit their device. These audiences are growing – and fast.

Mobile is big, and it just keeps getting bigger. According to Google, smartphone use among the U.S. population increased from 31% in 2011 to 44% in 2012. That means that in 2013, your website might be visited by more smartphone users than desktop computer users.

Mobile Graph

Tablet growth is booming, too. In fact, tablet sales could eclipse laptop sales in the next few years. If your business intends to maximize its reach, these users can’t be neglected.

A responsive website design is a welcoming embrace for these users. It’s time to provide a comfortable user experience to the users who could be your primary audience as soon as 2014.

A Responsive Future

Upgrade your website to a responsive design today, and you’re making a decision to be adaptable. New gadgets will emerge down the road, and the flexible spirit of responsive design aims to respond accordingly. So don’t be daunted: responsive design means going with the flow of an ever-changing Internet.

Share this post yo:
  • Twitter
  • Facebook
  • email
  • LinkedIn
  • RSS
Posted in: Responsive Design · Top Posts · Tags: Pop Chart Lab · Responsive Web Design · RWD · 2 Comments

Sites We Love: SVPPLY

by Joshua Bolt on · Leave a comment

It’s true, we love finding new websites and today we’re going to show you one that really stands out. Ladies and gentlemen, please help us welcome SVPPLY. Their unique site helps you find the products you love, from the people and stores you find interesting. They represent over 70,000 stores and brands. Let’s get to it, here’s why we love SVPPLY.

 

 

Much like Facebook, Twitter and other popular feed-focused sites, SVPPLY helps you post and discover new products. In light of the simple and sleek site design, you’ll notice that a lot of young creatives from all industries are using SVPPLY.

SVPPLY is a development mastermind. They created an incredible bookmarklet that when clicked, frames any product online allowing you to add it to your feed. As a matter of fact, every one of the 1.1 Million products listed has been selected by hand by their members, and brought to the site using that nifty bookmarklet.

Not only are the products added to your real-time feed, they are put in a collection, curated by you.

The bottom line: we love that SVPPLY is making a bold statement with their timeless design and extremely functional site development. Their well-designed user interface is a great way to discover cool new products and curators from all over the world. Not too shabby in our opinion.

Share this post yo:
  • Twitter
  • Facebook
  • email
  • LinkedIn
  • RSS
Posted in: Business · ecommerce · Graphic Design · Interface Design · Web Design · Leave a comment

Communication is Key to Successful Web Design

by Joshua Bolt on · Leave a comment

COMMUNICATION IN 3 STEPS

We all love getting to the final result. But when working with a website development and design company, how do you get impressive final results that shine? Command C Founder, Sara Bacon, tells us it’s all about using effective communication,

“We focus so heavily on communication because we’ve found it to be the number one determining factor in a successful project. If the communication isn’t happening, it’s pretty much a guaranteed problem. One of the things I love about design is that it offers us the opportunity to learn so much about so many different things. That said, to be successful at it, we really have to have a clear idea of each businesses goals and goals of their website. For us to get knee-deep into your business and really understand what’s important to you, we have to communicate… a lot.”

Here are three simple steps to enhancing communication leading you to your dream result:

Step 1: Make Friends

Harnessing a healthy relationship is extremely purposeful. By doing this, you gain respect, set boundaries and explore eachothers work styles. Communication is easier when you know who you’re dealing with.

Step 2: Ask Questions

You’ve heard it said, “No such thing as a dumb question”, and it’s true. If you’re wondering, ASK! Good communication is all about clearing up the unknown.

Step 3: Be Honest

Everyone needs to be on the same page, so share what’s on your mind. It’s impossible for everyone to know everything. Communicating honest feedback and ideas addresses concern and many times, leads to more conversation.

And there you have it. Honest, clear communication never hurts and more often then not, it betters your results. Bacon closed by saying,

“A healthy client/agency relationship lends itself to efficiency for both parties and ease of communication, benefiting all of the aforementioned points. Plus, it makes things fun. And most of all we want to enjoy what we do. It makes us do better work.”

Share this post yo:
  • Twitter
  • Facebook
  • email
  • LinkedIn
  • RSS
Posted in: Business · Interview · Tips · Web Design · Tags: communication · Leave a comment

WordPress Crash Course for New Users

by Dan Redding on · Leave a comment

If you’re the proud owner of a shiny new WordPress site, you already know that this robust platform has a reputation for user-friendly, accessible goodness. So it’s time to kick back and enjoy a cup of joe while your site runs itself, right? Well, the truth is that your new site is every bit as user-friendly as you’ve heard, but using it will require some basic familiarity with WordPress fundamentals, image uploading, and more. Here’s a crash course to get you up and running once the keys to the site are turned over.

1. POSTS VERSUS PAGES

A standard WordPress site has two primary publishing options: the Post and the Page.

Typically, a WordPress blog entry is a Post. Posts are generally presented in reverse chronological order (newest first), and are therefore used for news and updates. By default, site visitors can comment on a Post.

A WordPress Page is generally used for less time-sensitive, non-blog content like your ‘About’ page, your ‘Contact’ page, or your ‘Links to My Frasier Fan Fiction’ page. Pages don’t usually allow comments, and they can be divided into heirarchical sub-page categories. Read what WordPress has to say about Pages.

WordPress is very robust, so Posts and Pages may have unique customization on your site. If your site is highly customized, you might ask your developer for a quick tutorial on its functionality.

2. IMAGES

Your awesome post is written, but it needs a beauteous photo or illustration to bring it to life. Using images online can raise several questions for new bloggers and site administrators.

To insert your image into a Post or Page, enter your cursor where you want the image to appear in the text (you’ll also probably want to make sure that you’re in ‘Visual’ view – see below to learn more). Click the ‘Add Media’ button that appears below the title of your Post/Page. Now you’ll see the mighty media uploader. You can either drag your image file onto the uploader from your desktop, or click ‘Upload Files.’ Not sure if your image is the right size? Don’t worry – WordPress can resize it for you, even reducing its resolution to 72 dpi (the ideal image resolution for display on the web) if necessary. Once your image is uploaded, you can click ‘Insert into Post’ (bottom right side of screen) and be done with it – or add advanced options like a link, caption, or custom display size and formatting.

As with most subjects, the WordPress Codex provides very helpful information on using images.

Do you need to crop an image, extract an image from a PDF, or make a similar adjustment? WordPress is very powerful, but it is not an image editing program, so you may want to use Photoshop or a professional designer for more advanced edits.

3. VISUAL VIEW VERSUS TEXT VIEW

WordPress provides two different views while editing a Post or Page. At the top right corner of your text field, you’ll see two buttons: ‘Visual’ and ‘Text.’ Visual view means that you will see the Post/Page (roughly) how it will appear on your finished site. ‘Text’ view – formerly (and more appropriately) known as ‘HTML’ view – will show you the HTML code that makes up your Post/Page. Most bloggers will need only the Visual view. In general, the Text view should be used by those with experience working with HTML.

It’s possible that your site developer has added custom formatting into your Post or Page. In this case, consult your developer before editing the HTML, and always backup your work externally before making changes.

4. UPDATING WORDPRESS

One of the core benefits of WordPress is that with each release, there can be huge strides in user experience of the backend interface. Running the current WordPress version is also critical in ensuring that your site remains secure from bots or hackers with malicious intent. However, with some custom WordPress sites, upgrading can result in a broken site. Command C recommends that clients do not ever attempt to upgrade on their own for this reason. Therefore, when you see the upgrade prompt at the top of your WordPress dashboard, it’s best to contact your site developer so that they can do it for you or advise accordingly.

5. ASK WORDPRESS

WordPress is a thriving community built on the hard work of supportive users. When you’ve got a question about any WordPress-related subject, a quick Google search can often answer it. You can also go directly to the source – a search for ‘Using Images’ at WordPress.Org instantly turns up dozens of useful resources. Visit the Plugins section to extend your site’s functionality, or search the Themes section for a new look. Happy blogging!

Share this post yo:
  • Twitter
  • Facebook
  • email
  • LinkedIn
  • RSS
Posted in: Top Posts · Web Design · wordpress · Tags: wordpress crash course · Leave a comment

SEO is Science, Not Magic

by Dan Redding on · 2 Comments

Search engine optimization can be an esoteric, mysterious subject for the average website owner, but the fundamentals of SEO are not wizardry. On the contrary, it’s easy to learn the basics or even learn to make site improvements on your own. While reputable SEO companies are certainly capable of delivering results, the industry is also home to snake oil salesmen that use ‘black hat’ SEO methods or exploit the public’s naïveté on the subject. That’s why demystifying SEO in layman’s terms can be the first step towards empowering you – and causing an upwards spike in your number of daily visitors.

Search engine optimization is the process of improving the way your site interacts with search engines in the hopes of ultimately advancing its ranking in organic (unpaid) search results. Optimization efforts often include keyword research and revision of a site’s page titles, meta tags, URL structure, and more.

The foundation of SEO is a website built on well-written, standards-compliant (X)HTML. That’s why the smartest SEO choice you can make is your first one – the choice of which web design firm you hire to build your site. A site that’s coded with best practices in mind will facilitate the communication that occurs between your web site and the various search engines that crawl, index, and rank your content. Struggling to decide which designer to hire? We’ve got you covered there, too.

SEO fundamentals aren’t just for web developers. Many of the best resources and information are available for free online. There’s no reason that the average website owner shouldn’t take matters into his or her own hands – either to make site improvements or simply to become an educated consumer before hiring an SEO consultant. Our number one recommendation is Google’s superb (and free) Search Engine Optimization Starter Guide PDF. This document was originally developed for internal use by Google staff, so you know it’s good. After all, most of our SEO efforts are intended to affect our rank in Google, and we will likely use their Analytics products to track our successes – so who better to trust on the subject? According to the Starter Guide, “search engine optimization is often about making small modifications to parts of your website. When viewed individually, these changes might seem like incremental improvements, but when combined with other optimizations, they could have a noticeable impact on your site’s user experience and performance in organic search results.” It’s important to emphasize that SEO is not just about search results, but also about improving the structure and layout of your content – and therefore, the user’s experience. That’s a huge added benefit. For another user-friendly and thorough read on the basics, try The Beginner’s Guide to SEO by SEOmoz.

If your site runs on WordPress (we certainly recommend it), there are several popular plugins to enhance your search results – namely All in One SEO Pack andWordPress SEO by Yoast. Joost de Valk, author of the latter plugin, says in his exhaustive article, “WordPress is one of the best, if not the best content management systems when it comes to SEO.” These plugins aim to support and enhance the platform’s existing SEO strengths. Rule number one: enable your pretty permalinks! Search engines like to read and interpret descriptive words in your URLs.

These resources and basic tips should help shed some light on a topic that is not as daunting as it seems. If you do decide to hire an SEO firm or consultant, safeguard yourself by learning what questions you should be asking them. Now go forth and optimize!

Share this post yo:
  • Twitter
  • Facebook
  • email
  • LinkedIn
  • RSS
Posted in: SEO · Tips · Tags: SEO · 2 Comments

Non-Profit Web Design: Acumen Fund

by Mary Barbour on · Leave a comment

After Hurricane Sandy tore through Brooklyn a few weeks ago, we’re more aware than ever of how much we need the helpful companies out there who are doing everything they can to help the world. This month we’re taking a look at some companies who are doing just that – and backing it up with awesome web design and UI/UX.

Acumen Fund is a NYC based non-profit that has been working to combat poverty on a global scale. Their investment of time, energy and resources has continued to create awareness and generate funds to better the lives of millions of people around the world.

One of the best ways an organization can reach new audiences and celebrate a cause is by having a beautiful and easy-to-use website that clearly defines their identity alongside their mission. Acumen Fund’s site does exactly that.

The new Acumen site is  young, fun and colorful – complete with videos, maps and infographics while also facilitating commenting and social media interaction. The overall effect is a bold and friendly narrative arc of the company’s history. There is tons of content, but it’s clean and accessible, allowing users to explore it with ease and leave with a firm understanding of exactly what Acumen is doing to better the world.

Share this post yo:
  • Twitter
  • Facebook
  • email
  • LinkedIn
  • RSS
Posted in: Content Strategy · Graphic Design · Tips · Web Design · Tags: acumen fund · command c · command c design · custom website design · interface design · web design · website redesign · Leave a comment

Case Study for Senior Planet

by Mary Barbour on · Leave a comment

Last week, we went live with our redesign of the Senior Planet  website!

Senior Planet is a social and informational site for youthful seniors who are still active in the community and want to stay hooked in.  They wanted us to update their site to make it easy to navigate, with a user-friendly interface that their audience would respond to.

We did a complete redesign on WordPress, updating their image with vivid colors and  big pictures, bringing the most essential information to the foreground. We used large print and bold menu tabs to facilitate user navigation.

We also built a custom events calendar that can be easily updated with new content.

Lastly, we made sure the site was optimized for social media sharing in order to increase their visibility.

Just for point of reference, this is what the old site looked like when Senior Planet contacted us about the redesign:

We think the new site is a pretty big improvement and were happy to help bring Senior Planet up to date in their web presence. Tell us what you think.

Share this post yo:
  • Twitter
  • Facebook
  • email
  • LinkedIn
  • RSS
Posted in: Case Study · Tags: command c design · redesign · Senior Planet · website redesign · Leave a comment