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.
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.
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.
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.
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.
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".
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.