Isn’t it tedious and stressful to build from scratch a whole HTML5/CSS3 responsive template or showcase site?
Doesn’t designing a professional website template require long hours, days, weeks or even months of work?
Of course the answers to these questions are YES.
Unless one has never embarked on these adventures and known all the twists and turns that it entails.
But some will say why try to reinvent the wheel, why start all over again from scratch.
Today, there are basic models to build on and tools to automate one’s work.
They are right, but there is a small BUT.
When a client asks you to do a unique and custom job.
Or when you want to design a specific theme with specific functionality.
You have to do everything yourself, to have total control over your work.
And to help you simplify the work process and make it easy to do, I propose in the rest of this article an easy to use system.
It is a system that can be used in 4 steps.
Step 1: Always start with a PEN and a PAPER
Do you know this maxim: “Without a landmark, you get lost”?
It’s a very good principle to remember, and always make sure that you start any activity from a point of reference.
When you are designing an HTML5/CSS3 responsive theme, you should not deviate from this principle.
That’s why you will need a pen and paper.
It can also be a note-taking application such as Notepad, Evernote, etc.
But as far as I’m concerned, I find pen and paper much more practical (that’s what I use).
These will be used to write down and answer these crucial questions, the answers to which will serve as a basis for your design :
- What niche is the theme I’m going to design for?
- What pages should the theme I want to create contain?
- What are the elements and functionalities to be integrated on the theme pages?
Is it an e-commerce theme that you want to design and if so, for which sector, fashion, sports accessories, or teddy bears?
Or a sports betting theme, or a cryptography or fitness theme, in short the first question will allow you to know clearly from the start the type of theme you will create.
Then with the second question, you start by taking an interest in the pages that you are going to propose in your theme.
Go into details, and try to be as precise as possible.
With the sector that your theme targets, which pages will meet the needs of this sector.
For example, if you choose to create a restaurant theme, you might want to think about proposing pages like :
A page presenting the dishes offered by the restaurant, a page presenting the chefs, why not also a page where users will be able to make a reservation.
You see the idea!
And when you have found clear and precise answers to the second question, you can now focus on the elements and features to be implemented on each page.
Put them on your paper too.
Once that’s done, then you’re sure that your design will run smoothly like a train on a rail.
Step 2: Setting up your guide
What does this step in the system consist of?
As you know, for the construction of the beautiful buildings we see, an architectural plan is drawn up beforehand.
It is this plan that serves as a guide for the masons, scrap metal workers, carpenters who work on these large projects.
In short, all those who contribute to the realization of these beautiful buildings are all based on the plan drawn by the architect.
It is the same principle that this step recommends.
Just as an architect draws the plans of a building, you also draw the interface of the pages of the theme you are going to design.
You will evolve much more quickly when writing the code for the pages if you make their mock-up beforehand.
Use the data drawn in the first step for your design (pages, elements, page sections, etc.).
As for the tool to use to make the mock-ups of your pages, there are a multitude of them.
The most popular are Adobe’s Sketch and Photoshop applications.
These are very good applications that you will use to make the mock-ups of the pages of your themes.
And if you don’t know how to use them, you will find online very good tutorials that teach you how to use them.
In summary, it is during the second step of the system that you have to create the theme pages mock-ups, that are used as a guide for writing the HTML code of these pages and their stilization.
And it speeds up the writing of the code.
Also note this, a user who downloads a theme and finds in the zip file, in addition to the HTML pages of the theme, the mock-ups of the pages, sees all the professionalism behind the work he has acquired.
Step 3: Prepare your toolbox
Do you want to avoid an exhausting back-and-forth on your code editor when writing code for the pages of your theme?
Then you should not neglect this step at all.
Haven’t you noticed how easy it is to concentrate and work quickly on a project when you have all the elements you need at hand?
You can imagine how nervous and frustrated a engineer working under a car would be if he had to go out under the car every five or ten minutes.
Because he has forgotten a work tool and has to go and get it.
That would be annoying, wouldn’t it?
You too must avoid such hassles when designing your HTML5/CSS3 responsive theme, by doing what?
Long before you open your code editor and start coding, do this.
Get all the libraries, extensions, and images that your theme requires and collect them in the theme folder.
This will allow you to be 100% focused when writing code.
Step 4: Put your hands wisely in the grease
This step is the last one in the system, the one that allows you to write the code of your HTML5/CSS3 templates faster.
It gives you three tips that, when put into practice, will save you a lot of time.
The first trick is to code common elements on the different pages first.
Elements such as the navigation bar, the footer can be found on almost every page.
Therefore, the ideal is to deal with these elements first.
Then, attack the simple elements.
Simple elements do not require a lot of time, they are easy and quick to realize.
I am referring to elements such as the form, the intro block that usually follows the navigation bar on the home page, etc.
Doing these things first, allows you to evolve on the project without too much hassle, before finishing with the complex elements.
Usually, it is the design of complex elements that requires a lot of work and also takes a lot of time.
So, starting a project with the coding of the complex elements gives the impression of being on the backburner, and sometimes gives discouragement, especially when you’re struggling to get those elements right.
That’s why you have to implement them at the end.
At that moment, you know that part of the work is already done and that you have evolved on a major part of the work.
At this point, you know that they are the only elements missing from the puzzle; we are much more focused on them.
Conclusion
You now have all the elements together, all the system steps to follow to save time when creating your HTML5 templates.
Anyway, if you prefer not to bother with the code, you can try one of these tools that allows you to generate responsive Bootstrap themes.
