Ungerboeck Digital - Blog

Blog

 

Stylin' Websites

Kevin Zink
Jan 08, 2016
CSS3 website style

Small Biz HQ – Long, Long Ago

It is the mid ’90s and your web page is beginning to look a bit stale.  You’ve tried spicing up your display with a blink tag, an animated gif, and a scrolling marquee. All of your hard work is to no avail. That is when you peruse through the newly released CSS1 specification and decide that background gradients and a few drop shadows are exactly what you need.

Small Biz HQ – Present Day

Your website is bloated, not responding well, and difficult to update due to all of the images being used to support your aged backgrounds and pixel-perfect table structures used to align and stretch your graphic based drop shadows. You have finally decided to jump onto the CSS3 (with CSS Selectors) bandwagon many years after its release. Where to start?

Divide and Conquer

First, switch to divs, spans, and HTML5 supported tags. Your structure should be light-weight, fluid, and responsive to different view ports.  There are a number of existing frameworks that give you a leg up on developing a site that both looks and works well regardless of the device used to access it.  The Foundation Mobile Framework by Zurb is my current favorite.  There is, however, a lot of competition in this space.

Curated Responsive Framework List

Get Styling

Once you have the underlying structure, it is time to get your basic styles in place. Rather than relying on images to support your design, try switching to CSS3. Web browsers have, for the most part, caught up with the capabilities of CSS3. This means that you can round corners, control placement, create drop shadows, add gradient fills, force fonts, and display transitions.

Not only can you manage the styling easily and separate from your structure, you can also create media queries imbuing your basic structures responsive capabilities. Throw in a bit of flair with light-weight, client-side libraries and now you’re cooking. If you're up for it, ideally you work within Sass (Syntactically Awesome Style Sheets) or SCSS (Sassy CSS). These are extensions of CSS that allow the addition of nested rules, variables, mixins, selector inheritance, and more. Be careful in your use of these, however, as to not introduce additional complexity simply for the sake of using one of these per-processors.

CSS3 Generators

Add Flair

Now that your page is streamlined and looking good, try adding a bit of flair.  There are many easy-to-use client side libraries that allow you to quickly add simple effects that enhance the user experience. Just make sure to check your results in different view-ports for functionality. Try not to add too much bulk to the page and keep it simple. Remember, page design should be functional first. If a user can’t navigate your site efficiently all the glamour won’t keep them surfing.

Let's Talk

Looking to know more? Drop us a note through the form below.

636.300.5606  |  100 Ungerboeck Park, O'Fallon, Missouri, 63368
Godzilla