Category: CSS Page 8 of 10

Do you reset your CSS or normalize it?

On May 22, 2012

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.

Simple and Quick Lightbox with CSS and jQuery

By djbrensinger

On May 6, 2012

In CSS, JavaScript, Programming, Web Development

Computer with code I found a simple and quick tutorial on building a lightbox. In Super Simple Lightbox with CSS and jQuery, you learn how to build a really simple lightbox. This lightbox tutorial is quick and easy to implement. They walk you through the HTML markup, CSS and jQuery. By following the steps, you can get the lightbox working in no time. Faster, if you decide to download the source files.

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.

3 CSS Techniques To Help Build Better Sites

By djbrensinger

On April 14, 2012

In CSS, Web Development

While looking for tips on CSS, I found 3 articles that can help you build better websites with CSS.

As mobile sites and applications become more important and readily used, web developers need to focus on learning how to develop for mobile. Flexible Mobile – First Layout With CSS3 walks you through the design process and gives you tips and hints on designing for mobile.
Every web developer needs a collection of coding techniques. CSS is no exception. At noupe.com, you can grab the Useful CSS Snippets for Your Coding Arsnel. You’ll need a place to save your snippets here are 25 Handy Tools to Paste and Share Your Code Snippets.
@FontFace allows you to specify what font or fonts you want your site to use. The new bulletproof @FontFace syntax shows you how to use it so that it works in most browsers (mobile and desktop) without issues.

How to Build and Redesign Websites

By djbrensinger

On February 29, 2012

In CSS, Design, Web Development

Building a website is both an art and a science. There are new techniques and tricks to building web sites being created. You have to choose which techniques to learn and use. Not all techniques will work for every website. Here is a list of 5 articles to help you improve the way you build and redesign websites:

Tom Milway explains How to Build a Modern Website. He suggests using a mobile first design strategy, making your client have content written first and applying responsive design.
In Zen and the Art of Good Web Design, Pamela Wilson writes that minimalist web design doesn’t have to be boring. She provides tips on how to achieve minimalist design with personality.
Web developers and designers are often asked to redesign a web site. The New Redesign Rules of the Web helps you to decide what you should keep and what you can afford to lose.
Developers can make design mistakes in their web designs. Have you made one or more of these 7 design mistakes?