The Four Secrets to Every Successful Website

No. 1: Websites that are designed well

Good design is the simplest one that works.

–Albert Einstein

Users that come to the websites we create should have a purpose. A reason for being there. Just like you are here, reading this post right now. If users are coming for something, whatever it is, the website should be designed such that it is as easy as possible for them to quickly find what they’re looking for.

The most important consideration is organization. Walmart, Home Depot, Lowes, Harris Teeter — to name a few — spend massive amounts of time and money organizing. They lay out new floor plans, studying their user flow meticulously. They A-B test the arrangement of products on shelves, placing the higher profit items at eye-level and making further adjustments to design the optimal shopping experience.

Why do these multi-billion dollar companies focus so much of their energy on design?

They understand that customers — their “users” — will be frustrated, and those customers might leave. They might try to find the things they are looking for at a competitor’s store. Or worse — on the internet!

No. 2: Websites that showcase great UI/UX

UI is the saddle, the stirrups, and the reigns — UX is the feeling you get being able to ride the horse, and rope your cattle.

–Web Designer Depot

There’s something that reaches beyond textures, colors, imagery, a grid, organized content, etc. It’s called user experience. UX is a feeling. It’s the emotion you feel when doing or using something. And when whatever it is that you’re using works well, exactly as predicted, it feels natural. It’s a perfect fit. You immediately relate. And relating feels good.

In 1996, Starbucks revolutionized a market. At a time when any gas station and hotel lobby offered a cup of joe for a buck, Starbucks taught a brand new kind of customer to believe that specialty coffee drinks could cost $3, $4 and $5.

But why? Why would anyone pay five times the going rate for a marginally better product? Because of a great experience. Customers began buying into a feeling — a lifestyle choice — not a product. They bought into a brand. And they allowed it to dictate their life decisions. They woke up 10 minutes earlier for work just to have it. And they began putting Starbucks stickers on their most valuable assets: cars, laptops, I’ve even seen some pretty shoddy Starbucks tats. (Pro tip: never get a trend tattooed on your body for life. Your future self will thank me.)

No. 3: Websites that offer compelling content

The quality, visibility, and relevance of your content will be the most influential factor in determining the success or failure of your new site. Shouldn’t it be given some attention during the design process?

–Search Engine Watch

You’re bound to hear it if you haven’t been around advertisement for long… “Content is king.” Without something to talk about, without a beneficial service, without a story to tell the world, who cares?

But what makes good content?

There’s no short answer, unfortunately, so I’ll have to tackle that in a future blog.

No. 4: Websites that can be learned from

There are now some amazing tools in the marketplace that didn’t exist 20, 10 or even five years ago. Google Analytics (GA) hails as one of the most influential tools for running a successful website. Offering insights on user flow, demographics, response to paid advertisement and more, GA gives us as marketers a direct correlation between cause and effect.

Just as Walmart studies their customers’ moves from one section of the store to the other, as I mentioned before, we can also watch our users’ behaviors when interacting with our website. And we can make intelligent decisions based off of those insights.

These insights can justify why or why not to move, remove or create content. Post rationalization shouldn’t be the means, but sometimes a little reinforcement can talk your clients into sticking with the right choice.

Secrets to Speeding Up Development

Thanks to amazing learning resources like W3Schools and NetTuts, picking up the basics of web development is made extremely easy in our modern age. But what if you’re past this point? Maybe you’ve added more advanced languages to your repertoire and you want to kick it up a notch. How can you shift your workflow into overdrive? What does it take to develop like a professional?

Use the Right Editor

Finding an editor that fits like a glove is crucial to agile development. Sublime Text is, by far, my editor of choice. Touting hundreds of plugins and extensions, this editor is extremely malleable, allowing for customization of nearly everything. As a bonus, Sublime is cross-platform, and works just as well on OSX as it does Windows.

There are a handful of alternatives, CodaEspressoBrackets.ioTextMate, but regardless of which editor you choose, master it. Learn keyboard commands, code snippets and shortcuts decrease your development time and increase your productivity.

Don’t Reinvent the Wheel

Open source, mass-tested frameworks and boilerplates are always the best place to start. They’re free to use, and can save you hundreds of hours, cutting out the trivial and time consuming development that’s typical at the start of a web project.

HTML5 Boilerplate acts as the skeleton for your website’s front end. The source is riddled with nuggets of gold that veteran dev professionals have injected to turbo charge your websites. When used in compliment with CSS3Please snippets and font sizing from PXtoEM, focus can remain on the meat, not the bones.

Complimentary to front end, there exists a handful of back-end frameworks that act as a common code bases to begin from. LaravelCodeIgniter and Ruby on Rails are excellent springboards for your websites and web apps server-side scripting. Developing in these frameworks cuts down time spent building mundane chunks of code, such as routing, pagination, database interfacing, asset management and so on…

Develop Locally

Long gone are the days of frantically uploading PHP files via FTP just to test and see the 12 errors filling up your view. It is arguable that this was always the wrong approach, but before a couple of years ago, setting up one’s own server, which ran the choice server side language and database, terrified any developer unfamiliar with the command line.

Queue MAMP for PHP and Ruby Stack for Ruby. These apps are a one-click install that allow you to develop in server-side languages locally on your machine. It’s incredibly important to develop locally because it shaves off precious seconds that can add up to hours at the end of a project.

Note: if you’re on Windows, XAMPP and the Rails Installer are a great alternatives.

Subversion

If you’re not checking your code in, you’re risking losing hours of your life to frivolous mistakes that every developer is bound to make. For many small projects, Git and can seem like overkill. However, SVN is much simpler, and is relatively easy to setup on most service providers. MediaTemple has an article on how to set up SVN on their Grid Servers. You’ll also need an SVN client like Cornerstone to commit and checkout repositories. It’s highly recommended if more than one developer is working on a project at the same time.

Anything Else?

This is a very brief list of ways you can speed up your workflow. There are hundreds of ways to speed up your process further. So if there’s a great app, tool or service you feel we’ve left out, leave a comment about what resources you might recommend and why.

The Benefits of Building With Foundation 4

Foundation 4 boasts itself as the most advanced responsive front-end framework in the world. Which is a bold claim. And I’ll admit I was skeptical at first, but having dug into it the past few weeks, I can’t help but believe… they may actually be right.

Why Foundation?

First, what’s the point of using a front-end framework? Why wouldn’t we use something simpler, like HTML5 Boiler Plate or HTML5 Blank? While both of these are fantastic options for starting with a fresh set of HTML, CSS and JS to work from, Foundation goes further.

The Grid

Foundation uses a powerful grid system, giving us a tremendous amount of flexibility when writing markup. By adding some simple classes, we can make intelligent decisions on how a layout flows on small and large screens. Infinite nesting, centering, offsets and pushes mean better markup, and better markup means better SEO. The grid is responsive, too, so everything scales up or down to maximize screen real estate.

Everything and the Kitchen Sink

Foundation comes with a plethora of minimally styled elements. Form elements, various navigation types, tabs, accordion menus and much more. All of these elements can be built upon and further styled, which is where SASS really comes into play.

SASS & Compass

Every Foundation project is built with Compass and utilizes SASS. And that is great news, because it gives us the power to change huge chunks of CSS — literally hundreds of lines at once — by editing a few variables. The _settings.scss file in the project gives us the power to change the number of columns we’re using, the gutter and margin of the columns, colors of elements, fonts, borders, you name it.

Note: if SASS terrifies you, Foundation 4 can be downloaded as a static CSS build, too.

Reusable Code

The ultimate decision to use Foundation at Myjive was made because, finally, our developers can go from prototype to final deliverable on the same set of code, saving hours per project.