Design Tips & Tutorials (Archive)

Page 1 of 3 (30 total articles)
  • April 8, 2009 in Design Tips & Tutorials

    Creating CSS Flair Elements for Clarity and Style

    We spend a good chunk of time in each new project developing layout mockups and converting them to solid web templates (or at least I do), and rightly so. We want our templates to look sharp and function well. But there's a temptation, once the sharp-looking template is set up, to get sloppy and bland with the content. It's easy to fall into this trap because the template can usually provide enough flare to get us by. That won't cut it on sites that are content intensive or require high design. But by making a habit of "pre-styling" a short list of HTML elements, you can make sure that the content on all your sites is easy to read and looks professional. In this article we'll take a look at these elements along with some effective styles that will add flare and clarity to your content.

  • March 4, 2009 in Design Tips & Tutorials

    Intro to Web Design (Part 4): Getting Acquainted with the Peripherals

    In the first three parts of this series, I explained the core concepts of web design. Unfortunately (or fortunately, depending on the way you look at it), being a well rounded web designer requires more than just understanding the core concepts. There's server-side scripting, client-side scripting, animation, e-commerce, and a whole slew of additional technologies for the web designer to learn. In the title of this article I call these technologies peripherals, and I think that word is appropriate. They're not unlike the peripherals of a computer system: the printer, scanner, external hard drive, etc. Technically, you may be able to build a website without them, but you will be severely limited in the type of website you will be able to build. In this article, I will be giving a brief overview of each of the most important peripheral tools in the web designer's arsenal.

  • February 18, 2009 in Design Tips & Tutorials

    Intro to Web Design (Part 3): Styling the Web with CSS

    We talked about the content layer in the last article of this series. If don't know anything about HTML, and especially if you already know HTML, I recommend going back and reading it. This article is about style. The style layer of a web page is what makes it enjoyable for humans. Search engines and other robots are perfectly happy with just the content layer, but for the web to be human it has to have style.

  • February 4, 2009 in Design Tips & Tutorials

    Intro to Web Design (Part 2): Building a Content Layer with HTML

    In the first part of this series I gave an overview of the foundational concepts of web design. Most of the article was spent explaining the separation of content from style that is so unique to the web. In this second article I'll be giving a brief tour of the content layer: what it is, how it's created, how it should be structured, etc. This is not a detailed HTML reference guide but I would highly recommend reading it before you go off reading a tedious reference manual.

  • January 21, 2009 in Design Tips & Tutorials

    Intro to Web Design (Part 1): Grasping the Core Concepts

    If you're a regular reader of Mirificam Press you know that most of my articles dealing with the mechanics of web design tend to focus in on very specific issues. And most of the time the issues I write about are geared toward intermediate or advanced web designers. As I recently began grouping sets of past articles together into related series, this characteristic came to the forefront. I realized that on Mirificam Press there is a lack of articles relating the core concepts and techniques of web design. With the fly-by-the-seat-of-your-pants nature of our unique vocation I think its important that I present a cohesive primer on the technical concepts that form the foundation of web design.

  • January 7, 2009 in Design Tips & Tutorials

    Beautiful CSS: Organizing Your Stylesheets

    When I first took the plunge into CSS several years ago, one of my biggest frustrations was stylesheet organization. I scoured source code from popular sites trying to figure how they accomplished various layout effects. But tracking back and forth from stylesheets to HTML proved to be a difficult task. Unfortunately , that separation of style and content that makes CSS so awesome can also make it difficult to understand. Adding to that difficulty is the fact that each designer may have a different way of organizing stylesheets. If you inherit someone else's site, this can cause some problems. In a perfect world everyone's CSS would be well-organized, easy to scale, and easy to understand. We may not be able to attain such CSS Nirvana but we can at least make it easier on ourselves and those we work with by following this set of guidelines.

  • November 25, 2008 in Design Tips & Tutorials

    Mission Impossible: A Diagonal Nav Rollover Effect with CSS

    The HTML rendering model is based on boxes. Every element of a web page is a box set on a grid. Now, this doesn't necessarily mean that our graphics all have to be squares and rectangles. Over the years we've gotten pretty creative in our attempts to break the grid (or at least create the illusion that we've broken the grid). Still, there are limitations we've come to accept. One of them is the inability to build an overlapping diagonal navigation. Without using image maps and complicated Javascript, it's a task that seems almost impossible. In this article, I'm going to share a method I developed to overcome the problem. When you're finished with the tutorial, you'll have a simple, semantic, diagonal set of navigation buttons (rollover effect included).

  • September 17, 2008 in Design Tips & Tutorials

    The Hierarchy: Using Heading Tags the Right Way

    If you've been using CSS and web standards for awhile, then you probably already know that the HTML heading tags h1-h6 are meant to denote a hierarchy of importance—the most important, of course, being

    and the least important being

    . If you're new to CSS layouts and web standards then you might think heading tags just make text bigger or smaller. But there's a lot more to heading tags than most web designers realize. And in order to build beautifully semantic websites that degrade gracefully, a proper understanding of the tags is a must.

  • August 27, 2008 in Design Tips & Tutorials

    Rollover Lite: A CSS Rollover Everyone Can Enjoy

    I realize that there are about a million rollover tutorials out there. Some use JavaScript, some use CSS, but there are very few that are geared toward creating semantically correct rollovers that degrade gracefully. That's exactly what I'll be doing here.

  • August 13, 2008 in Design Tips & Tutorials

    Dynamically Resizing Text with CSS and Javascript

    As the number of screen size and screen resolution possibilities increase, gracefully resizing text becomes more and more important to the usability of websites. I recently worked on a project in which my client wanted to incorporated resizable text into a redesign of an outdated site. In fact, resizable text was the primary directive I received when I was commissioned to work on the project. Their previous website was built in Flash and they had been receiving complaints for several years about how small and unreadable the text was. Meeting their requirements was an exciting new challenge. With a little Javascript and an EM-based layout I was able to meet and exceed their expectations. This article explains how to set up a page for dynamic text resizing and implement a Javascript-powered dynamic text resizing program.

[BEGIN] [<1 2 3 [Next>>] [END]