design, coding, debugging, etc.

a floown.com production

6 things to think about before building a website

number one: goals

goal & intent

every project should start with asking yourself (or your team) a couple of questions. questions that will help you get a good understanding of what you are trying to achieve with the website.

goal & intent

every project should start with asking yourself (or your team) a couple of questions. questions that will help you get a good understanding of what you are trying to achieve with the website.

answer those questions the best you can.

• what is the purpose of the website? in other words: why were we building this thing again?

• what is the purpose of the website? in other words: why were we building this thing again?

• what goals do you want to reach with the website? make them specific: 'inform parents', 'persuade potential customers', 'offer support to existing ones'…

• what is the purpose of the website? in other words: why were we building this thing again?

• what goals do you want to reach with the website? make them specific: 'inform parents', 'persuade potential customers', 'offer support to existing ones'…

• who is the target audience? who is going to visit our website? what are they into? what can we expect in terms of established knowledge (tech-savvy? knowledgable about our business, or not?)

in our case:

we wanted to inform people about our product

a floown.com production

in our case:

we wanted to inform people about our product

persuade them to sign up for the product

a floown.com production

in our case:

we wanted to inform people about our product

persuade them to sign up for the product

offer them support if needed

a floown.com production

in our case:

we wanted to inform people about our product

persuade them to sign up for the product

offer them support if needed

and help them understand and learn about our vision

a floown.com production

this slideshare is a part of the

Startup Collection

get it in your inbox

number two: design-first

design-first

when the goal is clear, a design should be made that will help achieve that goal.

design-first

when the goal is clear, a design should be made that will help achieve that goal.

understand what content you are putting on the website that will help you reach your goals. the design should always be supportive to your content. not the other way around.

• important: never write a single line of code before the design is finished

• important: never write a single line of code before the design is finished

• make sure the design accounts for mobile, tablet and retina screens

• important: never write a single line of code before the design is finished

• make sure the design accounts for mobile, tablet and retina screens

• be at your most critical at the design in THIS stagethink: functionality, feasibility, aesthetics

• important: never write a single line of code before the design is finished

• make sure the design accounts for mobile, tablet and retina screens

• be at your most critical at the design in THIS stagethink: functionality, feasibility, aesthetics

• get EVERYONE on board. you don’t want to implement design changes when most of the code has already been written.

in our case:

some time ago we were in such a hurry to launch a new website… we started coding without a design.

a floown.com production

in our case:

some time ago we were in such a hurry to launch a new website… we started coding without a design.

coding and designing at the same time is never a good option. not only will you constantly have to scrap good code, but your design will always be limited by what constrains your coding abilities at the time.

a floown.com production

in our case:

some time ago we were in such a hurry to launch a new website… we started coding without a design.

coding and designing at the same time is never a good option. not only will you constantly have to scrap good code, but your design will always be limited by what constrains your coding abilities at the time.

don’t do it.

a floown.com production

number three: getting technical

technical foundation

"not every blog should be a wordpress, but sometimes you just need a wordpress"

technical foundation

"not every blog should be a wordpress, but sometimes you just need a wordpress"

there’s a million options to build a website: concrete5, ghost, joomla, drupal… from scratch

technical foundation

"not every blog should be a wordpress, but sometimes you just need a wordpress"

there’s a million options to build a website: concrete5, ghost, joomla, drupal… from scratch

just want a blog? you could just move your entire site to medium and put coding to the side entirely

technical foundation

"not every blog should be a wordpress, but sometimes you just need a wordpress"

there’s a million options to build a website: concrete5, ghost, joomla, drupal… from scratch

just want a blog? you could just move your entire site to medium and put coding to the side entirely

it pays to think long and hard about what you need now, and tomorrow.

• speedit affects your user experience and seo rankings. consider how much functionality you want to sacrifice to speed everything up.

• speedit affects your user experience and seo rankings. consider how much functionality you want to sacrifice to speed everything up.

• functionalitysometimes you just want a dashboard with a million options to customize posts and manage users.

• speedit affects your user experience and seo rankings. consider how much functionality you want to sacrifice to speed everything up.

• functionalitysometimes you just want a dashboard with a million options to customize posts and manage users.

• customizationmaybe you’re into building very specific stuff. things that any regular cms just doesn’t offer out of the box.

• speedit affects your user experience and seo rankings. consider how much functionality you want to sacrifice to speed everything up.

• functionalitysometimes you just want a dashboard with a million options to customize posts and manage users.

• customizationmaybe you’re into building very specific stuff. things that any regular cms just doesn’t offer out of the box.

• user-friendlinessnot everyone is interested in getting all technical. consider who will manage your website. is that person going to use a terminal and markdown?

• speedit affects your user experience and seo rankings. consider how much functionality you want to sacrifice to speed everything up.

• functionalitysometimes you just want a dashboard with a million options to customize posts and manage users.

• customizationmaybe you’re into building very specific stuff. things that any regular cms just doesn’t offer out of the box.

• user-friendlinessnot everyone is interested in getting all technical. consider who will manage your website. is that person going to use a terminal and markdown?

• support what if the whole thing breaks down? who you’re gonna call?

in our case:

we went from a rather sluggish hacked Concrete5 to a lightweight Jekyll website. did we suffer a bit in user-friendliness? yes; it’s now harder for non-technical people to make updates.

a floown.com production

in our case:

we went from a rather sluggish hacked Concrete5 to a lightweight Jekyll website. did we suffer a bit in user-friendliness? yes; it’s now harder for non-technical people to make updates.

but we gained so much in speed and customization options. and the hosting bill decreased too.

a floown.com production

number four: it’s all about style

styleguide

no matter what technical option you choose, you’re going to want to implement your design.

styleguide

no matter what technical option you choose, you’re going to want to implement your design.

say hello to css

styleguide

no matter what technical option you choose, you’re going to want to implement your design.

say hello to css your stylesheet is your bible. treat it as such. declare the foundation on which your site will be stylized, before styling any individual div.

• use SASS or any other css compiler this is very important. being able to partialize css files, define variables and nest will save you time and trouble.

• use SASS or any other css compiler this is very important. being able to partialize css files, define variables and nest will save you time and trouble.

• first: define each and every color used in the design

• use SASS or any other css compiler this is very important. being able to partialize css files, define variables and nest will save you time and trouble.

• first: define each and every color used in the design

• second: define standard spacing, fonts, line-heights, etc.

in our case:

for our current website we have managed to built a much more consistent and easier to manage website.

a floown.com production

in our case:

for our current website we have managed to built a much more consistent and easier to manage website.

the to good design is consistency

a floown.com production

in our case:

for our current website we have managed to built a much more consistent and easier to manage website.

the to good design is consistency

especially when websites tend to get bigger (and they usually do) there’s more chance of making small mistakes if there’s no rock solid basis. And those small mistakes add up.

a floown.com production

number five: code, code, code

code consistently & with intent

based on what choices you made you might need to edit templates or even build the entire thing yourself.

code consistently & with intent

based on what choices you made you might need to edit templates or even build the entire thing yourself.

no matter what, by now you should be armed with a clear goal, great design, technical solution and full-fledged stylesheet.

code consistently & with intent

based on what choices you made you might need to edit templates or even build the entire thing yourself.

no matter what, by now you should be armed with a clear goal, great design, technical solution and full-fledged stylesheet.

that should give you confidence.

• always start with the standard; meaning that whatever doesn’t need a variation on existing styles should be done first.

• always start with the standard; meaning that whatever doesn’t need a variation on existing styles should be done first.

• don’t make shortcuts (if a new variation pops up and could potentially be used more than once, add it to the styleguide)

• always start with the standard; meaning that whatever doesn’t need a variation on existing styles should be done first.

• don’t make shortcuts (if a new variation pops up and could potentially be used more than once, add it to the styleguide)

• code clearly: someone other than you should be able to read it and work with it.

in our case:

our current website is based on Jekyll, a very lightweight blog generator. it’s highly customizable, but also forces you to do a lot of coding yourself.

a floown.com production

in our case:

our current website is based on Jekyll, a very lightweight blog generator. it’s highly customizable, but also forces you to do a lot of coding yourself.

we now work with a set layout for all the pages with includes based on what we want to show.

a floown.com production

in our case:

our current website is based on Jekyll, a very lightweight blog generator. it’s highly customizable, but also forces you to do a lot of coding yourself.

we now work with a set layout for all the pages with includes based on what we want to show.

what that really means is there is a consistent system where every include is coded with a specific goal.

a floown.com production

number six: endings make for new beginnings

debugging process

there’s no such thing as a perfect execution. if only because tech evolves: browsers are upgraded, code solutions are depreciated and screen resolutions seem to change on a daily basis.

debugging process

there’s no such thing as a perfect execution. if only because tech evolves: browsers are upgraded, code solutions are depreciated and screen resolutions seem to change on a daily basis.

fear not: a solid debugging process will keep headaches to a minimum

• define roles: who will break your website and report issues, who will solve those issues and who will test the solutions?

• define roles: who will break your website and report issues, who will solve those issues and who will test the solutions?

• define the process: where, when and in what occurrence will issues be reported? how will priorities be decided and how often will issues be solved? how much time is in between implementing a solution and testing it?

• define roles: who will break your website and report issues, who will solve those issues and who will test the solutions?

• define the process: where, when and in what occurrence will issues be reported? how will priorities be decided and how often will issues be solved? how much time is in between implementing a solution and testing it?

• seek a platform: better not leave this process to work on itself. emails, post-its and meetings do not suffice, find a platform.

in our case:

for our website we use Trello to report issues, prioritize them and keep track of their status

a floown.com production

in our case:

for our website we use Trello to report issues, prioritize them and keep track of their status

it’s very intuitive and open, which makes it great for non-technical staff to report and monitor issues easily.

a floown.com production

in our case:

for our website we use Trello to report issues, prioritize them and keep track of their status

it’s very intuitive and open, which makes it great for non-technical staff to report and monitor issues easily.

for more complex and technical projects you might also need the extra functionality that a service like github offers.

a floown.com production

join us on our blog for much more

boing!

• goals, goals, goals; know what you’re trying to achieve

a floown.com production

• goals, goals, goals; know what you’re trying to achieve

• design-first and get everybody on board

a floown.com production

• goals, goals, goals; know what you’re trying to achieve

• design-first and get everybody on board

• technical solutions should be carefully considered

a floown.com production

• goals, goals, goals; know what you’re trying to achieve

• design-first and get everybody on board

• technical solutions should be carefully considered

• the styleguide is always leading

a floown.com production

• goals, goals, goals; know what you’re trying to achieve

• design-first and get everybody on board

• technical solutions should be carefully considered

• the styleguide is always leading

• code with intent & a system

a floown.com production

• goals, goals, goals; know what you’re trying to achieve

• design-first and get everybody on board

• technical solutions should be carefully considered

• the styleguide is always leading

• code with intent & a system

• debug according to a process with set roles

a floown.com production