Making Websites is Easy

Or at least… it should be.

First a disclaimer: As the author of Pinegrow Web Editor I’m biased when it comes to the topic of “Everything easy is hard again”.

Websites are not rocket science. Making websites should be simple. And making websites is simple — if we’re using the right approach and the right tools for the job.

Please note that we’re talking about websites here, not web apps that have a lot of additional complexity.

Why can making website be hard?

There are three main reasons for that:

1. Forgetting the big picture

What makes a website successful?

It’s not the framework, the tools or the CSS layout approach. It’s not the design and certainly not the transitions and 3D effects.

It’s the content.

Clear, understandable content, organized in a sensible structure, tailored to the target audience. Surprisingly, event today, many websites fail at this.

For us, designers and developers, it’s hard to accept that what makes a website successful is not so much our craft, but rather something as boring as words, sentences and outlines.

Too many website projects start by speeding over the question of the content and jumping straight into passionate discussions about design and implementation details. Content comes as an after-thought, merely as something to replace the placeholders in the design.

We need to step back and see what our role — and the role of the website we’re making — actually is:

Website is to content, what plates are to the food in a restaurant. They’re just a container that serves the food to our guests.

Of course, plates, glasses, forks and spoons have to be carefully selected to match the type of food we’re serving and the restaurant setting. But nobody goes to a restaurant to admire the plates and silverware. It’s all about the food. Likewise, with websites, it’s all about the content.

The recipe for making a yummy website is thus simple: create a delicious content and wrap it up into an easily digestible and non-distracting website.

There’s no way around it — we have to keep this in mind. Otherwise we’ll tend to create bloated, self-serving websites that also take considerable effort to create. In many cases, that’s also the reason why we feel that making websites is hard and complicated.

Another reason why creating websites is not easy is connected with the first one.

2. Obsessing over implementation details

Because of forgetting the bigger picture, the plate — food perspective, we can get too involved in polishing and over-thinking minute technical details: selecting (and re-selecting) the right framework, worrying about a brief font flash when loading web fonts, making everything look exactly the same on all devices and in all browsers, using the latest CSS goodies but then spending much more time on dealing with issues in older browsers, having too many responsive image sizes, fine-tuning animated interactions down to the last millisecond and so on.

We might also be too attracted to playing with shiny new web development toys, at the expense of addressing the real business issues that our website is supposed to solve.

Not only will most of these efforts be only noticed by fellow web professionals, we might also end up with an over-engineered and over-designed website that suffer from serious usability issues and bloat.

And of course, building websites like this is hard.

In the last five years or so the browser compatibility, network speeds and CSS features improved dramatically. We don’t need to deal with IE6 quirks anymore, export rounded corners as images and so on. But if we feel that all these new possibilities are making our job harder, it means that we fell into this trap.

So, relax, it’s just a website.

3. Using scary tools

The third reason why making websites feels difficult are complex tools that we are supposed to use in order to create state-of-the-art modern websites.

Today, lots of people get intimidated by the complexity of build tools presumably required to build a modern responsive website: npm, grunt, gulp, webpack and what not.

And sure, these tools are perfect — if you’re a web developer who knows ins and outs of all these commands by heart.

But you know what? I consider myself to be an experienced web developer and I feel intimidated by these tools. So much so, that we don’t even use them for developing the core of Pinegrow, a fairly complex one-page web app (we do have to use them when working with some external libraries).

Why do we need 100s and 100s of node modules to do a couple of simple tasks? That’s sloppy work in my book.

So when we’re talking about bringing these tools and all their complexity to creating simple websites, I’m firmly in the “No, thanks. Keep it simple” camp.

But how can we keep it simple if there are no simple alternatives, especially if we want to use things like SASS and Bootstrap?

Also, websites are visual by nature. What if we have the crazy idea to use visual tools to work with these visual documents?

Although some people enjoy building their slide show presentations directly in code, most of us prefer to use PowerPoint or a similar visual tool for that.

What about websites? Do we even have a general purpose visual option, now that Front Page is long dead and Dreamweaver gets more and more out of touch with the modern web world?

The Pinegrow way

When setting out to create Pinegrow, my vision for the perfect website creation workflow was:

• Take care of the boring boilerplate tasks with one or two clicks.
• Use visual tools for tasks best suited for visual tools.
• Use code when it’s easier to code things directly.
• Freely mix and match visual and coding tools.

The vision still holds and we kept improving Pinegrow according to it throughout the last four years.

Let’s take a look at how this approach works in practice.

Note, all the videos below are just 20–30 seconds short clips with no sound.

Need to start a website project? Just select the framework (Bootstrap, Foundation) or stick with the plain HTML, and choose a starter page:

Starting a new project with two clicks.

Have an existing project? Just open it. Pinegrow reads and writes standard HTML and CSS files directly, without locking you into any closed file format:

Open any HTML-based project.

Want to visually edit the visual layout of the page? Need to change the layout of multiple similar elements? Just select them all and make the change:

Edit multiple elements at the same time.

Using Bootstrap or Foundation? Here are responsive visual controls for element properties, no need to memorize 100s and 100s of framework classes:

Bootstrap visual controls.

And no more copy-pasting code examples from documentation sites. Just drag elements from the library:

Insert components from the Bootstrap library.

Want to style your document with CSS? Here, see what rules affect the selected element and use the visual editor, the list editor or the code editor to edit them:

See and edit active CSS rules.

Prefer SASS or LESS? No need to install anything. Just say “Convert to SASS”. All changes to SASS stylesheets are reflected on the page as soon as you make them, without having to save and compile anything:

Start using SASS with a stylesheet.

Want to customize Bootstrap using SASS variables? Sure, we can do that as well:

Customize Bootstrap theme.

Making sure the page works on different devices? Just open multiple page views and edit them at the same time:

Edit multiple page views at the same time.

Need to convert the page into a WordPress theme? Add WordPress actions to elements on the page and let Pinegrow export the standard PHP WordPress theme:

Create a WordPress theme.

And with Pinegrow, there’s never a choice between code and visual tools. Just use both:

Use Visual tools and code together.

Have a favorite IDE or code editor? Keep using it. Pinegrow syncs all the changes when you save the documents. Or, if you use Atom, everything is synced live between the two apps:

Pinegrow and Atom working in concert.

Things like that.

Another unique point about Pinegrow is that it lets developers and designers collaborate throughout the project life-cycle, even for WordPress themes.

Of course, Pinegrow is far from being perfect and is not the right tool for everyone, or for every project.

Still, it is a good example of how creating modern websites can be simplified, without giving up any of the flexibility & power of the code. And without getting locked into a closed tool.

So, if you feel intimidated by what is supposedly required to make proper websites nowadays — don’t be.

Websites are still 80% about the content and 20% about the implementation. And if you feel lost about the implementation, just start with DIVs, Headings, Ps, IMGs and a handful of CSS rules. Then in the next step, look into Bootstrap to see if it fits your needs for layout and responsive behavior. Go through a couple of Flexbox and CSS Grid tutorials. Take an hour or two to learn how to use SASS variables. And you’re good to go.