Web Design

Tutorials and reference articles on simple and practical layouts and elements for your designs. We keep it simple and use mostly plain CSS and HTML, along with existing frameworks like Bootstrap.

Testing WordPress Themes Online

Editing and testing changes to a WordPress theme is certainly frustrating when using the default online editor. This is specially true when editing the active theme. WordPress doesn't offer any option to test drive your changes before they go live. Being used to edit CSS files offline, the first thing that came into my mind was to replicate the WordPress site offline and then upload the files via FTP. However, I ended up doing my editing and testing online for several big reasons.

Continue reading

Ordered List CSS Styles

Styling ordered list numbers with CSS is not as simple as one might think because there is no CSS selector to target list numbers. Styling them is only possible with a simple CSS3 technique that uses a counter to replace the default numbers.

Styled numbers will only be visible in CSS3 browsers , but fallback is provided so that default unstyled numbers are displayed in old browsers.

Continue reading

Responsive CSS Shapes

Creating simple fixed-size CSS shapes like circles, triangles, and squares is very straightforward. New properties, like border-radius and transform allow creation of a whole array of CSS-only shapes that previously required images. Even though responsiveness adds a level of complexity, all basic shapes require only one div, making them more convenient than SVG vector shapes.

Responsive CSS shapes scale without losing their aspect ratio. They are traditionally achieved in the web using images or Javascript. However, there is a very simple way to create shapes compatible with all major browsers (yes, IE7 too) using CSS only. This article aims to serve as a reference for the creation of basic responsive CSS shapes. It's a review of my three articles on CSS circles/ovals, CSS triangles and CSS squares/rectangles.

Continue reading

CSS vendor prefixes reviewed

CSS vendor prefixes like -webkit, -ms, -moz and -o are constantly being dropped as people updates their browsers and as browsers adopt the standard unprefixed properties. A post about today's recommended prefixes would probably be outdated in a few months. I'll just add caniuse.com frames showing updated compatibility tables for the most important CSS properties that still may need prefixes to make it easier for you to decide by yourself.

Properties not listed here, like box-shadow and text-shadow do not need prefixing. This doesn't mean they are fully supported. Internet Explorer 9 and below, for example, don't support text-shadow, prefixed or not. Border-radius is not supported by IE8 and below.

Continue reading

Ad Placement Principles

There is no such thing as a universal solution for ad placement. You won't find it here and you'll never find it. I rather write this article to give you, ad Publisher, some general guidelines on what to try and how to try it. After reading several blog articles on Adsense Ad Placement and how they doubled or tripled their income overnight and trying every Ad placement they suggested, I still had a terribly low CTR and income for the number of visits I was having. I suppose you know exactly how I felt.

The solution for my extremely low CTR was not using a particular ad unit nor placing ads above the fold, one of the first recommendations you'll find on the web. The key for me was to start using my head.

Continue reading

CSS square and rectangle

CSS square and rectangular containers with a fixed aspect ratio are very easy to implement when they are also fixed-size. It's just a matter of specifying width and height in pixels. When adding responsiveness, keeping an aspect ratio is not straighforward. For responsive shapes, using paddings is the way to go.

In this article I share the code used to create fixed-size and responsive CSS squares and rectangles with vertically centered content, which is a common use for them. An SVG image with a width percentage width and height:auto is an alternative to CSS squares. However, SVG adds the overhead of loading an extra file and won't hold content.

Continue reading

CSS round buttons

CSS3, with its great border-radius property, allows creation of fixed-size and responsive CSS round buttons. This article explains how to create circular buttons using CSS3 only. Add animation, shadows and/or images to the buttons to get to get the perfect look and feel. The round buttons, both fixed-size and responsive work in all modern browsers and will render square in CSS2- browsers.

Why CSS round buttons?

First, why CSS? Because it's easy and clean. Using Javascript is not necessary and is more complicated than creating simple CSS buttons. Besides, CSS3 has everything you need to add effects and animations to these buttons. Unless you are doing something very creative, CSS is more than enough.

Now, why round buttons? Round buttons have a ton of applications. Round home and help buttons, as well as video or music player buttons are very common in web sites and applications. Using responsive buttons means that they will automatically resize without distortion nor need for extra CSS rules. A simple SVG image may be used as an icon for best results. SVG vector shapes resize without loss of detail, making them great for responsive design.

Round buttons may also hold text. "GO" buttons, which, for example, start a tutorial or product tour are the most common example. Round OK buttons are also quite popular. In general, they are used to hold a single short line of text.

Continue reading