Pages having Responsive Web Design tag
The default templates of Alinous Document CMS is made in simple Responsive Web Design. Therefore you can customize it freely.
Feature of the default template
The default template is very simple so that every one can customize it into favorite design. If you like the design, you can use it after customizing the header and footer.
Easy and simple code
When I make this template, I consider that the users will customize the template. I think everyone, who are web designers, programmers, and content writers, can customize the design.
The easy CMS template fulfil following conditions.
- Easily find code location and position to customize.
- The design code is based on Html5, and who knows it can customize without little learning new things.
- Check the design easily.
- If you understand programming, you can customize the server side code and debug it on the web browser.
Responsive Web Design
The share of traffic with the smaprtphone increases, and the Responsive Web Design is recommended by search engine providers.
This CMS has heatmap generation engine which generates 2 type of heatmap from captured mouse motion.
How the heatmap is generated
The heatmap engine uses log of the mouse action capture. Therefore it generates heatmap by specifying the logs.
Log the mouse action
After you logged them, you can generate both heatmaps by following operations.
- Select logs to generate from
- Select version of the background design of the page
Generate mouse move heatmap
The mouse move heatmap is to do eye-tracking of the visitors.
In order to make CMS template, we have to make templates itself and the components ready for responsive web design. In this page, I'll mention how to do that.
Template Parts in the CMS
Thr CMS templates consists of 3 types of parts.
When you create a template which is ready for responsive web design, you have to make the Style Sheets ready for that.
The Style Sheet setting is available on all of the templates, and they are included in generated Html's header automatically. Therefore you can check them partially by itself.
The Top and Container Templates are to layout Html5 parts. You can edit them with GUI editor on the web browser.
Edit Layout of the Template
In order to change the layout of template, we can do that with GUI editor.
Click the "" button on the top page of the administration console.
Then following page appears.
The component based template engine of Alinous Document CMS consists of 3 types of ones.
Architecture of Template Engine
The component based Template Engine has templates to layout components and Html5 based components.
The Top Template and Container Template are to make layout of Primitive Templates(Html5 Components).
And the Primitive Template is most basic part of CMS Template. You can make widget on the pages, which are like article part, header, footer part, bread list and so on, by using it.
Now I'm checking the Template's style sheet in order to make this site smartphone friendly.
When I check it, following errors appears.
There are stuffs to "Consider Fixing", but four rules seem to be passed.
- Avoid plugins
- Configure the viewport
- Size content to viewport
- Use legible font sizes
The rules seems not so difficult to pass.
Accesses from smartphone increases, and making web pages for mobile is necessary to create a website to collect access from the search engines.
Create a website cope with mobile access
There are mainly two ways to create mobile friendly website. Each of them has merit and demerit, but I recommend you to create normal pages by responsive web design.
Responsive Web Design
The responsive web design is a method to use same html file cope with both desktop pc and mobile browser. Therefore it is easy to maintain the code.
And the search engine crawler can index and analyse page by crawling single page. Because the speed of indexing is faster than making mobile pages. But it does not affect ranking.
In addition to that, by using CMS template engine, you can manage the design more easily. By adding following codes, web browser uses suitable Stylesheet for the browser's device width.
The graphical user interface is useful to manipulate the web template, but when you customize the detail of the design, you have to edit Html code, and it is comfortable way to do it.
The first parts to customize design is header and footer of the website. It creates a mood of entire website. Simple and beautiful design will help to .make opportunities to get inbound links
Edit Html code
If you are web designer or IT engineer, it is very easy to customize
Html code. When you customize the web design of the CMS, the most
difficult task is to find where to edit.
But component based CMS template engine makes it easy.
Find components from page template
At first, open the top part of template. It is easy to f, because each page on the CMS has field to select template.ind which template is used