Practical online helpers for CMS beginners

Adaptability

Because of the variety of display devices, you should design your web pages to work well with any screen size. In web developer jargon, this is called responsive or reactive web design. Many templates for various CMSs already integrate this concept. Changing a web page therefore requires testing it with as many different resolutions as possible. The browser-independent Viewport Resizer bookmarklet may help with this. You can activate the Viewport Resizer either by clicking a button on the website [6] or by adding the bookmarklet to the bookmarks of your browser and using it there. The resizer opens a small icon bar at the top of your webpage. You can then choose the display size for a variety of devices. Dragging the handles on the display area or changing the Customize setting changes the display size (Figure 5).

Figure 5: Use the Viewport Resizer bookmarklet to test display sizes for your web page on various devices.

Alignment

When designing your website, you will want to pay attention not only to the positioning of text blocks, widgets, and images, but also to typography. A well-designed website uses appropriate and legible fonts and varies font sizes and spacings for headings, subheadings, and scrolling text. With the Gridlover tool [7], you can create a text grid with an easy click of the mouse (Figure 6). Use the sliders at the top to test the font size, line height, and scale factor. Clicking Styles displays the CSS code based on your choices, and you can integrate the code into your project. The Content button displays the greeked text as HTML that you can then copy as needed. l