Category: Design Page 19 of 22

Spice up a light content website

On October 27, 2012

Does your website have light content and no photos? What is light content? A site that doesn’t have much to say. Your pages may have less than 300 words on them. According to Yoast’s SEO Plugin for WordPress, 300 words is a good number to have on a web page.

What can you do to improve the site?

You need to jazz up the site. One way is to add more photos. Be creative. Photos can help to convey what your company’s products or services are about. With products, you can show them out of the box and being used by a person. If you are selling services, you can demonstrate your services by using photos of your staff or stock photos. For example a client does property maintenance for local homeowners and rental properties, I took a few photos of painting supplies, measuring tape and a toolbox with tools. These photos were adding to help demonstrate a few services that the company provides.

You can also add social media, videos and a way to schedule appointments. In Creating more purpose for content-light websites, Kendra Gaines explains how to make your website more interesting so people will return or suggest your site to friends. This can be a challenge when your site isn’t a blog or magazine.

5 Tips on Responsive Design

By djbrensinger

On September 17, 2012

In Design, Web Development

Responsive web design allows you to make your websites easy to read at different device sizes. This short collection of 5 articles helps you to keep your responsive designs from being boring, let visitors opt-out of “mobile” sites and apply tricks and templates to achieve responsive design.

Is Responsive web design boring? Jonathan Longnecker of FortySeven Media believes that responsive design can lead to boring web sites.
He explains his argument and provides tips on how to make sure that these sites aren’t boring.
What if your visitors want to Opt-out of your Responsive Design? For some sites, responsive design lets them read the site quickly and easily. If they need to do something quickly, a responsive design may get in the way. CSS-Tricks.com shows you how to let your visitor choose to go to a “full site” version of your site.
Responsive Design Changes Your Workflow. It forces you to change how you approach building web sites. You have to think about designing for various sizes and how your design fits together like puzzle pieces inside of one whole piece. Luke W. shares his notes from An Event Apart on Responsive Design.
Web Designer Wall’s 5 Useful CSS Tricks for Responsive Design shows you 5 commonly used CSS tricks for coding responsive design. Tricks that include Responsive Video, Min and Max widths, relative values and more.
Looking for some inspiration on designing Responsive web sites? Speckboy has 20 Free Responsive Web Design HTML & CSS Templates. This templates can be use on static websites or with a CMS. They can also be used be designers to learn how to create responsive designs.

Creating a web button using vintage design

By djbrensinger

On July 7, 2012

In Design, Web Development

For Burlington Footwear’s website, the client wanted an old-fashioned or vintage look. I applied this design style to a button that opens the shoe club page. Vintage Design uses dark or muted colors, descriptive or cursive fonts, textures and graphics specific to your selected time period. BFW Shoe Club

To create this look, I made the following choices:

I created a background with a vintage paper look. It combines the colors yellow and green to make it look aged. Then, I added a paper texture to complete the look. I used this Fireworks tutorial to create a vintage (old) paper look.
Vintage Design uses descriptive or cursive fonts. Burlington Footwear already uses a script or cursive font in its header. For consistency, I chose to reuse the font.
Burlington Footwear’s website uses red and green. I choose a dark green and red because Vintage Design uses dark, muted colors. These darker colors were applied to the font and outline of the button.
Vintage Design also includes using images specific to a selected time. I used the old-fashioned shoe from the logo. Since the shoe image is specific to an older time, it made sense to add it to the button. I just blended it into the background and repeated the shoe for balance.

By combining these elements together, they help to achieve the vintage look that the client was looking for.

Do you reset your CSS or normalize it?

By djbrensinger

On May 22, 2012

In CSS, Design, Web Development

Resetting your CSS means removing all built-in browser styling, so that you can avoid cross-browser differences as much as possible. By resetting your CSS, you can create a consistent look across browsers. The downside is that you end up restyling elements that you reset earlier. Which means that you duplicate effort and increase the processing time of your website.

If you don’t want to duplicate your efforts, what can you do? You can normalize your CSS. Normalize preserves useful browser settings and provides cross-browser consistency. It gives you greater control because you can include sections that are specific to your website. You don’t have to clutter your style sheets with elements that you never use on your site. This helps to cut down on the amount of code in your style sheet.

Which CSS method should you choose?

Both reset and normalize are tools to help you style your website. For example, I first built a website using reset and then changed it to normalize. When I changed to normalize, I had to make a few minor adjustment to get the normalized CSS to match the reset CSS. These minor adjustments were needed to make the website look right. As with any tools, there are trade offs. You need to choose the tools that help you solve your problems.

jQuery and a Responsive Footer

By djbrensinger

On April 22, 2012

In CSS, Design, Programming, Web Development

Some footers have a simple design. They have navigation and copyright. Other footers are more informative. In Developing a Responsive Website: The Footer, Scott Stanton shows you a footer design that has three sections: navigation, tweets and contact info. The format of this footer is simple and informative. It doesn’t overwhelm you with too much information. It simply directs you to information that you may need to learn quickly about this site. He used HTML5 and CSS to build the footer.

In part 2, Scott takes it further by adding jQuery and responsive design. Creating a Responsive Website: The Footer Part 2 breaks the process down into two parts. First, you learn how to create and add the twitter feed. Then, he shows you how to change the CSS to make the footer more responsive.

This two part tutorial shows you how to incorporate jQuery and responsive design into one section of your website. By focusing on one section of your site, you can learn what works and then apply it to the rest of the site. Small changes can be easier to do than over-hauling an entire website. Sometimes you can learn a lot when you start with a small change.