All posts by Corey Martin

To maximize the perceived affordance of clickability, color and underline the link text. Users shouldn’t have to guess or scrub the page to find out where they can click.

from Nielsen Norman Group, a pioneer in usability. My blog entries now reflect their guidance. Before, the links were gray all of the time. Now, each link is blue, then red when as you click it, then purple if you’ve visited its destination before.

Nielsen Norman Group’s advice is based on extensive observation. It’s amazing how much one can learn from watching someone use a web application or site. We’ll have more on usability testing.

In my last post, I talked about the emergence of front-end frameworks. Creating a high quality responsive web site does not require writing all of the CSS from scratch, though doing so is a viable option. Frameworks start you out with a cross-browser, standards-compliant CSS and JavaScript base. When properly used, frameworks save time and result in modern, maintainable web sites.

The Grid

Every front-end framework described here is based on the responsive grid. Your content is arranged into rows and columns, which adjust themselves based on screen size.

For instance, if you have three columns of information on a large screen, they may become one column on a small screen.

The responsive grid makes your site look good on desktop computers, tablets, and phones.

Here is an example of the grid in action, thanks to our friends in Sweden:

Notice that the site’s columns shrink in the transition from desktop to tablet, and become a single column on a phone.

More and more, people expect content to look good on all devices. Sometimes, a separate “mobile” web site or app is a good approach. However, a responsive web site is often the clearest path, and frameworks make it easier to implement.

Front-end frameworks are rising in popularity. From Twitter Bootstrap to Zurb Foundation, these tools can save a tremendous amount of time by doing a lot of CSS heavy-lifting for a web site.

I will be comparing a few frameworks for use in my first web application. But first, I should tell you why I am even considering one.

What’s a front-end framework?

The unsophisticated definition: a framework provides a basic user interface for your web site, and you build from there. It saves you time.

More specifically, a framework:

Makes responsive design much easier. Your content will look good on any device.

Provides a familiar, intuitive interface for your users. Links are blue. Buttons look clickable. These subtle design decisions, already made for you, make your site easier to learn.

Works cross-browser. The best frameworks are well-tested on all of the major browsers, so you won’t have to do as much debugging.

Should I use a framework?

There are pros and cons. Chris Coyier of CSS-Tricks summarizes them in a post from 2007 that is still relevant.

For sites that need to be heavily customized or introduce a new kind of interaction that isn’t standard, it may take longer to customize a framework than to build from scratch.

But, as Chris wrote about one major framework, “I think a web app startup could do a lot worse than starting with this to get up and running quickly.” That sums it up for me. I am a one-man band on this project, so time is of the essence. I’ll be using a front-end framework.

Frameworks don’t excuse ignorance

Someone could use a front-end framework to build a site without knowing any CSS. That’s fine, but the site will look like thousands of others.

In reality, anyone doing front-end development should know how to write CSS from scratch, without the cushion of a framework.

So, in addition to using a framework for my web app, I am going to read a real CSS book. Stay tuned for updates on that.

It’s time for speed dating

The past few years have seen dozens of new front-end frameworks. To find the right match for me, I need to spend a little bit of time with each of them. You’ll come along for the ride in an upcoming posting. Keep in mind, though – everyone’s framework soulmate may be different.

As I said in my introduction, I’m an IT consultant who has been developing intranet web sites, primarily in SharePoint, for many years. My goal is to dive into modern web development, front-end and back-end. I’m going to learn by doing, and share everything on this blog.

The Pitch

First, of course, I need an app idea. Here’s my elevator pitch:

People generally want to improve their skills in some area. Someone might want to become a better a cook, a better programmer, or a better gardener.

My app will:

Help you evaluate your current level of expertise in a certain area

Give you tips for improvement

Track your progress as you improve, and let you share your progress with others

Experts will create the evaluations that power the app, and gain exposure in the process.

Requirements

Here’s what the app might need to do:

Allow anyone to:

Take an evaluation on a certain topic

Get tips for improvement, based on where they stand now

Re-take the evaluation later, to see how much they’ve improved

Allow experts in a given area to:

Create an evaluation on a certain topic

Share the evaluation with others

See how many people are taking their evaluation

We’ll flesh out requirements more later, but this is the gist.

In the next post, we’ll start looking at the tools necessary to create this, beginning with the front-end or user interface.

I got my first computer at age 8, and fell in love with it. By 12, I had started my own web design company, stylishly named martin.web.design. I set up a web site for it, and began marketing my services to whoever was interested.

Somehow, I got clients. An anthropologist from Papua New Guinea. A small university in California. A realty company. The Internet was new and exciting, and big web firms hadn’t yet established themselves. It was the perfect time to bust out my Dreamweaver skills and start making sites.

Fast forward to now. I’m 27, and consult in DC, mostly on intranet sites. The primary tool I use is SharePoint, which I’ve found can do wonders for internal processes. But I miss web design, and in my very long hiatus from creating sites from scratch I have missed out on the advent of HTML5, CSS3, and JavaScript. Don’t get me wrong, I’ve used these things, but I haven’t really learned them.

In this series of blog posts, I want to understand modern web development inside and out. I hope you’ll come on this journey with me, as I learn:

How to start a modern web site front-end. Are frameworks such as Twitter Bootstrap and Zurb Foundation a good idea? When should one start from total scratch, and how? I’m going to create a front end, and share my experience.

How to start a modern web site back-end. What are the most popular tools right now? From platforms such as WordPress and Drupal, to languages such as PHP, Ruby, Node.JS, to frameworks such as Rails, to odd creatures that stand in between like Meteor… where is one supposed to start to code a web application? I’m going to create a web application, and share my experience.

Everything I make will be open source (I know, I’m already flattering myself assuming someone will want to use the code). This is a journey that I want to share in its entirety.

My next post will be about my idea for a web application. Then we’ll start creating it.

Follow me on Twitter (@coreyITguy) or by e-mail (click the lines icon on top of the page for the subscription form).

Did I mention this site will get a facelift as well?

Finally, I’d love to show you some of my early designs…

My web design homepage when I was 14Toward the beginning of Web 1.0, I loved to give advice…