What is your strategy?

When you begin to make new website what is your strategy?

I am learning Web Dev and I was thinking about this today. This was a broadish plan i came up with.

  1. Figure out all the content that you will need. “all the words” and pics…
  2. make a layout how everything will fit (in your head or on paper… something rough)
  3. make a skeleton HTML with all the tags. (no content, just tags, classes, and id’s)
  4. or 5. put in content
  5. or 4. add css to style the layout
  6. style the content

I haven’t built a page yet, so I don’t know if this holds water… Whats your approach?

My primary concern is coding everyday, so I tend not to do any design up front, in cas I spend all my alloyed time for the day just sketching.

Instead, I have a quick rough model in my head of what the layout might be (like, navbar at the top, some boxes, a footer) and then I go about incrementally making those from top to bottom. I don’t really separate HTML time from CSS time either - I like to sprinkle enough CSS on from the very beginning that I can see whether I’m headed in the right direction and my assumptions about what layout I imagined are working out.

With JS, I usually make sure all the data-getting and manipulation works first using console.log to test output, then when I know it works I wire it up :slight_smile:

“But Mousie, thou art no thy lane,
In proving foresight may be vain:
The best-laid schemes o’ mice an’ men
Gang aft agley”
-Robert Burns, To A Mouse

There are lots of things I do to get the wheels spinning, but rarely does that process hold any ascendancy over the final shape of my efforts. I have found that it’s useful to think about what problems I may face, and try to get answers for them written out straight away. Questions like, “How will I structure this in the database?”, and “How do I want to handle user authentication?” are better asked before I type my first line of code. This ends up saving me time overall as I don’t have to completely scrap an app because I was too ignorant to do it right the first time.

If you are making a large application, there are some industrial processes that can get quite involved. But typically smaller websites don’t need anything formal. I like to document a trail of what I did. I learned to do this from maintaining lots of others junk code that was undocumented.

So this is roughly my strategy when starting out new:

  1. Get a list of requirements or at least a list of what the site is supposed to do. Use this to generate ideas.
  2. Use Balsamiq Moqups or Gliffy (free) to make some wireframe models and go over this with the user.
  3. Make a semi-functioning prototype with HTML to show them what it should really look like. I like Bootstrap since it gives you a decent look right out of the box. You don’t have to worry about alignment or CSS. I am pretty bad at design, but unfortunately that is the first thing people notice. For that reason, I will always use a framework like Bootstrap.
    Optional - Occasionally I use F-12 to look at the design of tech blogs or news websites to get ideas. If it is a simple flat design, I may save the website for later. Sometimes I lift the fonts and color scheme and add it to Bootstrap to make my new sites look nice with a proven design theme.
  4. Use a tool to map what you need to do next like Redmine or Visual Studio Online or Trello boards or an Excel spreadsheet.

And you’re off.

Now if you are making a database or a complex application with lots of software objects, then there is more design to do. But this is good for creating a new website.

I don’t do all steps are in every project. These are just some guidelines and questions I use when I’m preparing to work on a site.

  • Get the requirements
    ** Expected site layout? (SPA, multi-page, blog, etc)
    ** Authentication type, if any
    ** Type of site? (informational, blog, e-commerce, etc)
    ** What pages are expected? (Home, Contact, About, Blog, Forum, etc)
    ** What type of navigation? (Top, side, both?)
    ** Responsive?
    ** External or internal site?
  • Create a plan in either a scrum or Kanban board
    ** Helps to determine if it meets the client’s constraints
    ** Gives me milestone goals and a timeframe to meet those goals to keep me on track
    ** Helps prevent scope creep
  • Determine inputs and outputs
    ** Helps with database design
    ** Helps fine tune site design
  • Make a rough draft of the site (whiteboards are your friend!! :slight_smile: )
  • Create a prototype from specs to get client’s approval
    ** Typically has lorem-ipsum and image placeholders
    ** May also use mock data or a combination
  • Add real content to site
  • Test site functionality
  • Cross-browser testing
  • Get final approval from client
  • Release site into production
1 Like