How to make responsive web design template for CMS
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.
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 template is the top module of the template, In this template, you can include template parts. And you do not have to care the Style Sheet of inner parts.
Therefore, you have to do in this template are following things.
- Set header for smartphone and mobile
- Set Style Sheet to fit the top div layer to the devices screen
In the Html code's header, add device setting like below.
By adding the viewport setting on the head section, the mobile adjusts the viewport's width automatically. In this setting, scale is 1 and the width is same with device.
The Style Sheet of the top part is below.
The div tag whose name is "warp" is the top layer of the whole body part. The "@media" description defines the mobile setting. If the screen's width is 1000px or smaller than that, it applies Style Sheet in this section.
In mobile section, set the width of top layer as "100%". The padding and margin are 0, because the mobile setting inherits the normal setting.
The container layer's setting is most important in Responsive Web Design. It changes the location of inner parts from horizontally layout to vertical.
The Style Sheet is below.
In this setting "#standard-middle" is the top part of this layout div tag, and the "#standard-middle-left" and "#standard-middle-right" are located inside it.
In the mobile setting section, it set the all part's width into "100%" in order to locate inner parts vertically.
To adopt the responsive web design to Html5 Components is easy. Just writing the "@media" for mobile.
The example of this setting is below. This is article part component.
This setting is for Html code written with WYSIWYG editor. In this parts, we have to care is following things.
- The list tag's vertical margin
- The h1, h2, and h3 tag's font size
- The p tag's font size
- Maximum image size
After making a template, please check it is friendly with smartphone and moble. On testing it, Speed Insight is useful, and about that, please take a look at Checking User Experience by Speed Insight.