Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

6 Things to Think About Before Building Your Website

Building a website can be a daunting task. Without preparation even more so. Thinking about the following 6 actionable and practical topics will however make the task much easier to digest. In this Floown Slideshare we will be handling goals, design, technical solutions, styleguides, coding and debugging. 6 topics that are truly worth thinking about before building.

  • Soyez le premier à commenter

6 Things to Think About Before Building Your Website

  1. 1. design, coding, debugging, etc. a floown.com production 6 things to think about before building a website
  2. 2. number one: goals
  3. 3. 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.
  4. 4. 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.
  5. 5. • what is the purpose of the website?
 in other words: why were we building this thing again?
  6. 6. • 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'…
  7. 7. • 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?)
  8. 8. in our case: we wanted to inform people about our product a floown.com production
  9. 9. in our case: we wanted to inform people about our product persuade them to sign up for the product a floown.com production
  10. 10. 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
  11. 11. 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
  12. 12. this slideshare is a part of the Startup Collection get it in your inbox
  13. 13. number two: design-first
  14. 14. design-first when the goal is clear, a design should be made that will help achieve that goal.
  15. 15. 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.
  16. 16. • important: never write a single line of code before the design is finished
  17. 17. • important: never write a single line of code before the design is finished • make sure the design accounts for mobile, tablet and retina screens
  18. 18. • 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 stage
 think: functionality, feasibility, aesthetics
  19. 19. • 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 stage
 think: functionality, feasibility, aesthetics • get EVERYONE on board. you don’t want to implement design changes when most of the code has already been written.
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. number three: getting technical
  24. 24. technical foundation "not every blog should be a wordpress, but sometimes you just need a wordpress"
  25. 25. 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
  26. 26. 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
  27. 27. 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.
  28. 28. • speed
 it affects your user experience and seo rankings. consider how much functionality you want to sacrifice to speed everything up.
  29. 29. • speed
 it affects your user experience and seo rankings. consider how much functionality you want to sacrifice to speed everything up. • functionality
 sometimes you just want a dashboard with a million options to customize posts and manage users.
  30. 30. • speed
 it affects your user experience and seo rankings. consider how much functionality you want to sacrifice to speed everything up. • functionality
 sometimes you just want a dashboard with a million options to customize posts and manage users. • customization
 maybe you’re into building very specific stuff. things that any regular cms just doesn’t offer out of the box.
  31. 31. • speed
 it affects your user experience and seo rankings. consider how much functionality you want to sacrifice to speed everything up. • functionality
 sometimes you just want a dashboard with a million options to customize posts and manage users. • customization
 maybe you’re into building very specific stuff. things that any regular cms just doesn’t offer out of the box. • user-friendliness
 not everyone is interested in getting all technical. consider who will manage your website. is that person going to use a terminal and markdown?
  32. 32. • speed
 it affects your user experience and seo rankings. consider how much functionality you want to sacrifice to speed everything up. • functionality
 sometimes you just want a dashboard with a million options to customize posts and manage users. • customization
 maybe you’re into building very specific stuff. things that any regular cms just doesn’t offer out of the box. • user-friendliness
 not 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?
  33. 33. 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
  34. 34. 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
  35. 35. number four: it’s all about style
  36. 36. styleguide no matter what technical option you choose, you’re going to want to implement your design.
  37. 37. styleguide no matter what technical option you choose, you’re going to want to implement your design. say hello to css
  38. 38. 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.
  39. 39. • 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.
  40. 40. • 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
  41. 41. • 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.
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. number five: code, code, code
  46. 46. code consistently & with intent based on what choices you made you might need to edit templates or even build the entire thing yourself.
  47. 47. 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.
  48. 48. 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.
  49. 49. • always start with the standard; meaning that whatever doesn’t need a variation on existing styles should be done first.
  50. 50. • 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)
  51. 51. • 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.
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. number six: endings make for new beginnings
  56. 56. 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.
  57. 57. 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
  58. 58. • define roles: who will break your website and report issues, who will solve those issues and who will test the solutions?
  59. 59. • 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?
  60. 60. • 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.
  61. 61. in our case: for our website we use Trello to report issues, prioritize them and keep track of their status a floown.com production
  62. 62. 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
  63. 63. 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
  64. 64. join us on our blog for much more boing!
  65. 65. • goals, goals, goals; know what you’re trying to achieve a floown.com production
  66. 66. • goals, goals, goals; know what you’re trying to achieve • design-first and get everybody on board a floown.com production
  67. 67. • 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
  68. 68. • 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
  69. 69. • 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
  70. 70. • 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

×