Web Design

Blog

Sailboat race in Bellingham Bay
Tide pool close up at Teddy Bear Cove in Larabee State Park in Bellingham, WA
June 14

How to get your local business online in Bellingham, WA (OR ANYWHERE) Part 1: Design

In this two part post I give insider information on how to get your local business online. I break down the three essential components: design, domain, and server and discuss how a business owner can obtain each. In the first post, I cover the design and its code as it takes the most work and I give an honest discussion of how to get that design including a the pros and cons of services like Squarespace and WIX. In my second post I will share some tips on how to get a domain and server.

Trees in Larabee State Park outside of Bellingham, WA
May 30

Web Content for Small Business Owners Part 2: Images

Along with copy, images and graphics are the most important content on a website. This post is the second in my two-part series on web content for small business owners. This post provides insider tips for obtaining professional imagery and a few litmus tests for the owner who is considering using their own photography.

Water strider insect at Lost Lake outside of Bellingham, WA
May 21

Web Content for Small Business Owners Part 1: Copy

This post is the first of a two part series to explain web content for small business owners. I cover what web content it is, why it’s important, and how to get good content. This first post focuses on copy, and the second on photographs. High quality content is the essential element for any website, including small business sites. A small business cannot have a great website without great content. A small business cannot have a great website without great content.

sharon meadow and surrounding area seen from table mountain, outside of Bellingham
April 29

How to Create a Drop Cap with CSS

Drop caps, altered first letters in a paragraph, always reminds me of illuminated manuscripts. Illuminated manuscripts are works of art, often religious manuscripts where text is supplemented with decorations. They must have taken a lifetime of work to create. Drop caps are still ubiquitous in design, both in print and for the web. Today's executions are certainly simpler than those of illuminated manuscripts and with pure CSS and HTML, web designers can easily create a drop cap in their web design. The key is the ::first-letter pseudo-selector. You can't get the same ornate embellishments those monks achieved in their timeless illuminated manuscripts, but you can achieve a modern design aesthetic with just code and no image file.

cactus garden in Joshua Tree National Park
Feb 19

How to Highlight Menu Text on Hover

Menus are an essential part of a web design, and eye tracking studies have shown that menus receive much of a user's attention. In this post I show the design element of adding hover effects to a menu. The technique makes an entire menu highlight on hover and individual links highlight as well. We also share best practices so web developers can insure their color contrasts are accessible to all users.

cloudy mount baker from artists point in august, close to Bellingham
Feb 1

How to Create a Body Border Around a Page's Content

Adding a frame, or "body border" to the edge of an entire page is a well explained process. But what if you want a frame just around the site content and not all the way to the edge of a browser? In this post, I introduce the design element of precisely framing just your content. I explain the simple process of creating said frame so that it displays only on larger viewports. This method also gives developers the option of styling not just the border, but the empty space outside of the frame. This solution is a much improved design on large viewports where a browser has extra space. When you are going for a minimalist/clean style it adds a cool effect that makes the overall design more complete and less empty, while still "clean".

Sun covered by clouds, western washington sky
Jan 12

A Responsive Hero Image in CSS

Hero image banners are a popular web design element. By definition, they are the first element a visitor views on a homepage. Web designers need a tight and predictable design to create the strong first impression clients want. Many executions lack complete predictability. Aspect ratios of the image can get goofy, content may crop, and the hero only looks good on certain viewports. This post teaches web developers how to design a responsive, predictable, and scalable hero image using a CSS overlay and the viewport unit vw.