Making a Website: 1999 vs Now

I’m beginning to question whether a one-man (or one woman) team can stay in the game. Like most other skillsets in the information technology field, complexity grows, and specialisation becomes increasingly important.

It reaches the point where you are juggling so many balls in the air, that you live with this jittery tension – “Which ball am I about to drop?” or “Which ball have I not even picked up?”

1999: Making a Website

  •  <font> tag.
  •  <table> tag (for layout).
  • GIFs.
  • 800×600.

2013: Making a Website

hipster

Do the following (in no particular order):

1. HTML & CSS

  • Favicon – Need one (see favicon cheat sheet).
  • Apple touch icons – Maybe.
  • HTML5
  • Browser Compatibility – Still care about old versions of IE?
  • Rendering Speed – Check your paint speed is 60fps (re: animations, parallax scrolling, etc).
  • CSS – Use a preprocessor (SASS/LESS)? How to write your CSS? Is it maintainable? Do you understand CSS performance? How to possibly keep up with new features, and which browsers implement them?
  • CSS Transformations and Animations – When is it appropriate to use? Best practice. How to create intuitive interfaces with minimal cognitive strain.

2. Performance

  • Server performance – fast host? Low latency? Memory implications. GZIP configured properly. Apache or NGINX? Install any more modules to help performance?
  • Database – MySQL performance and overhead.
  • Caching – Is the CMS cached? What sort of caching solution? Is it implemented correctly?
  • Page Weight – Javascript and CSS minified and combined? Font load? Too many images? Images optimized? CSS Sprites – Combining multiple images into one to reduce HTTP requests.
  • Rendering – Issues with paint speed, scrolling?
  • Monitoring – Pagespeed, YSlow, Pingdom, Network waterfalls.

3. Code

  • jQuery
  • Basic AJAX skills
  • Vanilla Javascript
  • PHP
  • Other 3rd party libraries and frameworks: Bootstrap, Foundation, etc.
  • Source Control – Git?

4. Social

  • Create a Facebook Page, and somehow find the time to engage with it, update it with witty posts and updates, and get people to LIKE it.
  • Create a twitter account. Follow people. Engage with them. Don’t just post your latest content.
  • Google+ Publisher Page: Google wants us to create one, but it’s just another thing to look after.
  • Extra: An instagram account. A Pinterest profile. For the real masochists: Your own YouTube channel.
  • Social Media Buttons. I’m constantly struggling with this. I know I need the buttons, but the standard implementations are bloated and slow my page. Do I create some custom buttons? Do I mess around with some other widget or plugin? Do I keep the styling the same as the official buttons or go for something new?
  • Email newsletter – Signup form on site. It is placed well? Are people signing up? Do I use Aweber or Mailchimp or …? How often do I send out emails? Do I need do design a custom layout? Can I automate it? Are people engaging? What’s the reach and click rate? Is email responsive? (tricky as only inline CSS is available).

5. Design and Layout

  • Fonts – Forget Arial and verdana. Need to be using custom fonts – but careful now, don’t want to slow page load down too much. Use Google Fonts, or splash out for TypeKit?
  • Typography – Clean readable layouts are important – I find myself endlessly tweaking.
  • SVG – Can use for repeating backgrounds, or for icons.
  • Icon Fonts – Best method for using icons on your site (should I load them as separate font, or inline them as base64 in my CSS?).
  • Images – Know your lossless from lossy. PNG, JPG, or GIF. Use Progressive JPEGs for photos. Optimize before publishing.
  • Search Feature – Do I need to put a search bar on my site? What do I use?
  • Design trends – Who can keep up with this? This is an entire specialised skillset in itself. Those of us with developer backgrounds tend to be poor designers.
  • Graphics – Logo design and other custom graphics: which tools? Photoshop, Fireworks, etc.

6. Mobile Strategy

  • Responsive site or separate mobile version?
  • Performance – A real issue over 3G networks.
  • Design and navigation – is it working? How do I know if mobile users are enjoying the site? How to deal with images, retina displays.
  • Testing – How many devices do I test on?

7. Accessibility

  • Screen Reader styles?
  • ARIA codes – how thoroughly do I want to implement these?

8. SEO

I’ve come to hate the word, and wonder whether it is even relevant anymore in an age where Google alone seeks to become the answer to all knowledge.

  • Technical SEO – Canonical header, avoiding duplicate pages, do some pages need to be noindexed,
  • Publisher Markup – Should I include it? Should I use rel=”author” and link to content to a Google+ Page?
  • Links – I’ve created something I like, how do I get other people to notice it, and possibly link to it?
  • 404 and HTTP Headers – Have a custom 404 page. Make sure you’re serving the correct headers.
  • Link Analytics: MajesticSEO, ahrefs, Moz Analytics, Google Webmaster tools.
  • Use nice friendly URLs that aren’t too long.

9. Tools

  • Editor – What should I use? Coda 2, Espresso, Dreamweaver, Sublime Text?
  • Local Environment – Setting up a local webserver and database. A build environment? Something that automagically minifies and combines Javascript and CSS (like CodeKit)?
  • Deployment – FTP? Source control like GIT?
  • Backups – Am I keeping my local backed up properly. Do I have a failsafe production backup system in place?
  • Security – Strong passwords, server secured and patched, tight code (especially on forms). Strategies for dealing with spam.

10. Analytics

  • Web analytics – Powerful but increasingly complex and takes time to draw conclusions. Options: Google Analytics, Mint, Mixpanel, Clicky
  • 404s – Keep an eye on linkrot, and costly 404s.
  • Uptime and Response time monitoring: Alertra, Pingdom.

 

 

TL;DR

Making websites used to be fairly simple. Not so much anymore – especially if you are a team of one.

Updated for 2014

Advertisement
Hi, I'm James, and for the last decade I've made a living by making my own blogs and websites.
Updated: September 15, 2016

13 Comments

  1. I also think you are missing a lot of stuff under 1999. Many of the things under 2014 were still valid back then. 404s, 301s, javascript was used to do a lot of things: image swaps and some animation and more.
    Basically, you need a list just like 2014 under 1999 and then change some things.

  2. Why does it say 2014 in the title and 2013 in the article?

  3. Web Development still has a ridiculously low barrier to entry, but the delta between a novice and an expert has widened immensely.

    Everyone can write javascript just like everyone can play the guitar (we all strum a few chords).

    I think the biggest challenge in the industry today is recognizing the fact that he gap between novice and expert is wider in the front-end than in the back. Large companies still see Software Engineer (someone trained in writing big-O optimized algorithms in Java) as a higher ranking than a Web Developer. That used to be a valid argument. But today, I envy Java devs for the simplicity of their focus. Web Development today requires a mastery in many areas and wrapping your mind around complex timing, performance and code-maintainability issues that don’t appear in other forms of engineering.

    It’s time to recognize Web Developers as Engineers.

    • Too true. My background is originally as a software engineer. I left that many years ago to get into web as I had had enough of the complexity, and constant pressure to be on the edge technology.

      Web was a welcome break, and I discovered I was having a lot of fun. 10+ years on, there are many aspects of web that remind me of my old job…

      But I’m still having fun. I think you need to realise you cannot be an expert in everything, but maybe you’re stronger in some areas.

  4. Two important things to add:

    * Plot your IA/Journey. This should happen before the design.

    * What’s the global plan? Don’t start building before you realize if it’s going to be in just one country and language or in a lot (and which ones!)!

  5. Newsletter coming soon?

  6. you didn’t add the most important things: Accesibility and Usability.

    • Accessibility is a big one, and I’m all too guilty of overlooking it. Thanks for pointing out.

  7. Hi James,

    I feel your pain. I’m a one man band. And I’m constantly looking into ways to make my workflow faster and more efficient.
    The workflow : “design and build unstyled drop-in Lego type website and app components (which consist of one or more UI components)” goes only so far.

    Not too long ago, I bumped into this Github repo : https://github.com/Team-Sass/generator-style-prototype
    Their slogan is “Design In Browser, Build In Browser, Sign Off In Browser”.
    It was a bit of a (tiny) dog to set up on Windows, but OS X and Linux are apparently painless.

    While I’m learning to use it, I’m still checking if everything is doing what it is supposed to do (I’m on Windows and there were numerous dependency warning messages during installation).
    I haven’t bumped into any problems yet though.
    So far I’m totally impressed. Some of the main tools, libs, etc that were installed I already used. So I guess I was lucky with that.

    Cheers

    • Interesting ?framework. I guess it depends how many sites you are creating typically. I tend to work with a few, over the long term, so never really get around to setting up a decent workflow. Thanks for the comment.

  8. Making a website nowadays has become a lot easier. There are a lot of website builders online that allow you to create engaging and cool websites easily. Personally, ImCreator is my favorite; it’s both powerful and real easy to use.

    • You’re right – in some ways. Sites like wix.com, or even just a tumblr blog. Pretty much anyone can knock out a site in a matter of hours. But to craft something well… that’s a different story altogether. If you are using a templated site builder, the moment you want to do some heavy customisation things suddenly get difficult.

      Thanks for you comment.

Add a Comment