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.
- Figure out all the content that you will need. “all the words” and pics…
- make a layout how everything will fit (in your head or on paper… something rough)
- make a skeleton HTML with all the tags. (no content, just tags, classes, and id’s)
- or 5. put in content
- or 4. add css to style the layout
- 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
“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:
- Get a list of requirements or at least a list of what the site is supposed to do. Use this to generate ideas.
- Use Balsamiq Moqups or Gliffy (free) to make some wireframe models and go over this with the user.
- 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.
- 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!! )
- 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