Skip to main content Skip to footer A famous quote once said that “Preparation is half the battle.” It’s not only true for brutal wars but for an amount of things including web development. While the eye of the designer looks for beauty, the eye of a developer sees with grids. This practice is very essential for a smooth quick development to be able to generate horizons and divisions before being able to put the perception into code.
This will be a 5-6 part series about web development and how to code your design and possibly convert it to a WordPress theme complete with Twitter Bootstrap integration, manual mobile responsive intiative, and jQuery experience.
Development starts without the keyboard
In a progressive world that everything is starting to shift to the internet, it is very necessary that you learn the basics of grid development. While it may be beneficial for the artist to see the screen as a canvas, we have to see it with either with precise measurements or percentages of a pixel chunk.
A few of the question I ask in before I proceed to a text editor are:
- Will it need a container to hold the content?
- How can I make it easier to be mobile responsive?
- Will I ever place a fixed px value on a div?
- Is there a way to make a div to have as less tags in it as possible?
- Will there be animation and what will it include?
Here is an example on how I block visualized my site based on how I perceived it from its study:
The division of horizontals are very distinct that I dare not highlight them or they will be all in red. Meanwhile here are the definition of the color pallete overlay:
- Orange = 2nd Level Enclosure
- Yellow = 3rd Level Enclosure
- Green = 4th Level Enclosure
As for the questions, here are my answers for this specific project:
- Will it need a container to hold the content?
- Yes, it will need a standard container that will hold content for about, blog and the footer section.
- How can I make it easier to be mobile responsive?
- By separating them into chunks that hold similar thought or values
- Will I ever place a fixed px value on the container div?
- Unfortunately, due to the dynamism of the blog and services section, it will make use of % values instead to make the container limits more aligned.
- Is there a way to make a div to have as less tags in it as possible?
- On the portfolio section, I opted not to use 3 divs that includes (row, detail and preview) but instead the row itself holds the preview and only the detail overlays the row)
- Will there be animation and what will it include?
- Yes and that is why the division of the services had more subdivs than necessary.
It’s important to determine what gets a div and what doesn’t and what needs more. Failing to do so would result in a very band-aid framework that will need restructure if an unforeseen feature will be applied.
Rather than pursuing it on code head on and then realize the error of your logic, return and remake, which makes you lose time, effort and esteem, it would be better for you to follow a blue print on your head to determine for a smooth sailing editor experience.
Executing block visualization in before writing your statements helps your project to be full proof and to withstand casualties of the progressive development methods we know and start to chase after with the advancing technologies and capabilities to create a better web. You not only make your work better for yourself, but possibly the other developers who might handle your work or follow your footsteps in being a better creators themselves.
So now, look at your design and assess which needs to be over and above and which needs less to contain, just because your fingers are not on the keyboard doesn’t mean you’re doing anything less. The next lesson will be smoother if you can assume your divisions before execution.
“Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” -Abraham Lincoln
