Coding a modern website (for dummies)

I have not seriously coded in about 8 years; getting back into it has been an awesome adventure. When I was a front-end dev at an enterprise software company years ago, we were still using table-based layouts and just beginning to replace font and color tags with CSS. So much has changed, and it’s all for the better!

In this post, I’m going to get all Rip Van Winkle and tell you what my experience was like while building a modern website with the latest tools and technology.

Warning - This is a long post, so you may want to get a snack first.

CSS3 (is freaking awesome)

“We want rounded corners”.

That was the phrase you just never wanted to hear years ago as a web designer. They were a complete pain in the ass. They were tricky, notoriously finicky, and each technique for creating them had major drawbacks.

CSS3 makes rounded corners so easy now. And gradients. And shadows. And… Ok, you know this stuff, so I won’t go on. If you want to learn CSS3, I highly recommend the CSS3 tutorial at Codeschool.

screenshot of css3 month-picker
CSS3 Month Picker - CSSflow.com

When I first starting writing CSS3 code, I was like, “What’s all this -moz and -webkit business?”. And the interwebz told me, “Oh, they’re vendor prefixes, and they tell the different browsers how to render the CSS effects”.

Ok, vendor prefixes make sense, but writing them over and over just sucks. Clearly there must a better way…

Sass and Compass

Sass stands for Syntactically Awesome Stylesheets. At it’s most basic, Sass allows you to:

  • Use variables in CSS
  • Use “includes” so that you can better organize your CSS
  • Use functions in CSS

Sass makes CSS more like a programming language. When you start using it, you’ll wonder why CSS did not have these features years ago.

Originally you had to compile your Sass into CSS via the command line. This was intimidating to many people, but Mac apps like Codekit and Hammer make this super easy. There is no simply no excuse to avoid using Sass anymore.

Compass is a useful set of addons for Sass. For example, if you don’t want to write all the vendor prefixes for a CSS3 box shadow:

-webkit-box-shadow: red 2px 2px 10px;
-moz-box-shadow: red 2px 2px 10px;
box-shadow: red 2px 2px 10px

you can just write this with Compass:

@include box-shadow(red 2px 2px 10px); 

Learn Sass and Compass today. I totally recommend the Sass class at Codeschool. You don’t have to install Sass or Compass to take the Codeschool course. If you use the Codekit or Hammer apps, they come with Sass and Compass installed so you’re totally ready to go.

Ditchin Wordpress and goin’ static

In the past when I’ve needed to build a site, Wordpress was my go-to platform. Wordpress is powerful, but for developers it’s definitely gotten more complicated over the years.

I really wanted to try something different for this project because:

  • This site is a simple blog; Wordpress was just overkill.
  • I don’t need a robust admin UI; I’m comfortable writing posts in an editor.
  • In order to support mobile, I wanted fast-loading pages. You can’t beat static pages for speed.
  • I wanted to focus on writing, and Markdown is a great tool for writing.

Luckily, a new generation of “static website” tools have arrived; these provided exactly what I needed.

Jekyll

Jekyll is a bare-bones static website generator. It takes a set of Markdown files and generates static web pages; you simply upload these static pages to your server and bam, you’re done! No database, no PHP, nothing. Jekyll also includes a basic template language that lets you break your pages up into sections (header, body and footer for example) and loop though blog posts. That’s about all Jekyll does; totally simple.

Because Jeyll is written in Ruby and is accessed via the command line, it can seem a bit intimidating at first. If you want to learn it, I highly recommend Mijingo’s Jekyll Screencast. You’ll be up and running Jekyll with about 30 minutes.

Mijingo also has a screencast on Markdown; Markdown allows you to write HTML with a much simpler syntax so you can focus on your content rather than HTML code.

Octopress

While Jekyll is awesome, it is very bare-bones. For a modern website and blog, you’ll want things like:

  • Pagination of posts
  • Google Sitemaps for SEO
  • Sass for CSS (more on this later)
  • RSS feeds
  • Video Embeds
  • etc

While you could totally build these features yourself using Jekyll, Brandon Mathis has created a Jekyll-based blogging platform called Octopress. It adds most of the features you need to run a modern blog. Octopress is powerful and easy to install; you can have a blog running in minutes.

Customizing the Octopress Look and Feel

Octopress uses Sass to create its CSS. Making color and font changes to it’s theme are as simple as changing a Sass variable. If you want to make big, dramatic changes, it gets more complicated. The templates and Sass files in Octopress are tightly coupled and are broken down into many “chunks” for modularity; I found it very hard to make big changes without everything breaking.

After much hair-pulling, I ended up completely deleting the Sass folder used by Octopress and starting over. I still had all the functionality Octopress offers, but I finally felt like I was in complete control of the appearance.

320 and Up - A Sass framework

After deleting the Sass files from Octopress, I created a Sass structure that was heavily inspired by Andy Clarke’s 320 and Up.

The ideas I took from 320 and Up:

Mobile first

@Lukew first promoted the philosophy of designing for mobile first; in CSS, this means your default styles will be for mobile and “build up” to larger sizes via media queries. This was odd to me at first; my natural inclination was to start coding for the desktop.

Pro tip - Your media queries should use “min-width” when designing mobile first.

Modular Sass

You should break your Sass out into multiple files - one for global variables, color, typography, etc. A lot of 320 and Up’s Sass organization did not reflect the way I think; I fought this for a while, reorganized things and then everything clicked. The important thing is that the Sass organization make sense to you.

Simple (or no) Grid

This is a subject that I whole-heartedly agree with Andy on. There are a lot of really complicated grid systems out there. I’m kind of dumb, but I still want to understand what’s going on with my CSS code. Most grids systems simply make my head asplode; this means means I prefer simple layouts and grid code. I really like Chris Coyier’s “Don’t Overthink It Grids”.

Web fonts

It’s now easy to embed amazing fonts into your website. Typekit is an awesome webfont service; it’s included in my Adobe Creative Clould subscription, so that’s what I use. If you want to use web fonts on the cheap, I recommend Google Fonts and Adobe Edge Web Fonts; both are free.

Web fonts and Photoshop

It’s well-known that Photoshop renders type differently than the browsers, but if you don’t own the web typefaces you are using, you cannot really use Photoshop for designing your type. This was a major pain point for me in this project. Apparently I’m not the only one who noticed this shortcoming. A company in Ireland created a web application names Typecast to help deal with this problem.

Screenshot of Typecast App

Typecast is awesome; it allows you to work visually with webfonts from Typekit and Google; it even outputs the corresponding CSS. The downside is that it only does typography, so it’s not possible to see your type in the context of your page design. Also, Typecast costs $30/month. That’s what I pay for the entire Adobe Creative Cloud subscription!

Icon fonts

Closely related to web fonts, icon fonts allow you embed high-quality icons into your design. The great thing about icon fonts is that they are vector so they scale well on high resolution devices (i.e. they don’t look like crap on Retina displays). The procedure for using them is very similar to web fonts, but each set has it’s own quirks.

Screenshot of Entypo icons
Screenshot of Entypo icons

I definitely found icon fonts a bit more confusing to set up and use than web fonts. There are hundreds of icon font sets now; I would recommend starting with Entypo or Symbolset and sticking with it until you really learn how to use that partcular set.

Pro tip - When you really have the hang of your icon font set, use the icomoon web app to pick only the icons you use for a site design. Conserve that bandwidth!

Testing on mobile devices

While designing and coding, you need to check your designs on different devices. I highly recommend Adobe Edge Inspect; it allows you to preview your HTML on iOS and Android devices easily. If you don’t have Adobe Creative Cloud, you’ll need to set up a solution that allows you to test on devices over wi-fi; uploading your HTML to a server for device testing is painful and inefficient.

Pro tip - if you are using Adobe Edge Inspect (previously named Shadow) and want to see your Typekit fonts on your devices and your computer, you should read this solution. I got this working and it was totally sweet!

Git

Git is a distributed source code control tool; its main strength is that you don’t need a central “fileserver” to keep all the files. In practice, this means you can work offline, but it also means it’s super easy to share code with other people. Some smart people figured this out a while back and created the amazing Github, which is basically Facebook for coding. Code sharing is why Git is important.

If you are coding or designing for the web, at some point you’re going to deal with Git. It is awesome, but unfortunately it’s hard as crap to learn, especially if you’re not a hard-core coder.

I didn’t really expect anyone to use Git because it’s so hard to use, but that turns out to be its big appeal.

My recommendation is to buy Tower (if you’re on a Mac). Tower allows you to easily commit changes and push them to a repository without dealing with Git’s confusing, crappy syntax. Unfortunately, Tower won’t help you understand advanced topics like branching and rebase; for those you’ll need to buy some books or work in an environment where advanced Git users can shed some light.

Photoshop - the elephant in the room

Photoshop has been my workhorse for years. In this new world, though, I’m using it differently and in a more limited manner for the following reasons:

CSS3

CSS3 allows us to do so much more in the browser. Photoshop CS6 and CSSHat now allow you to export CSS, but there are many limitations and it still won’t look exactly the same in the browser. That being said, I really like CSSHat; it lets you know if your layer styles are supported in CSS and it will write out Sass if you want.

Web Fonts

Like I mentioned earlier, if you don’t have the web fonts for your site on your computer, you can’t use Photoshop to (even somewhat) accurately style and layout your type.

Responsive Web Design

Photoshop is by it’s nature static; device sizes and resolutions are not. It’s simply not practical to create Photoshop comps for all the potential screen sizes. This is clearly where designing in the browser shines.

All that being said, Photoshop still has it’s place. It’s will always be great for creating texture, color and art—but the day of creating static 960px-wide static PSD comps is over for me.

Wrapping Up

While web design and development is definitely more complex than it used to be, the design tools and technology are far better than they were 8 years ago. CSS3 and web fonts allow creative options without resorting to the awful hacks used to achieve similar effects back in the day, and Sass makes CSS a lot more fun to code.

The one gap I found in the modern toolset was between designing with web fonts; Typecast is awesome, but it’s functionality is too limited in scope. Photoshop cannot access Typekit fonts and is static in nature. I wish there was some Photoshop/Typecast hybrid that allowed you to visually work with web typography in the context of your page. I’ll let you know if I find it.