Browsing all articles tagged with CSS
Oct
10

Coding And HTML5 Layout From Scratch

3.5

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.

So today we’re going to experiment a little with these new technologies. At the end of this article you’ll learn how to:

  • Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.
  • Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.
  • Use HTML5 alongside a rising technology: Microformats.
  • Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.

read more

Aug
6

Clean and Minimal Website Example

5

Olivier Staub

A well-designed website is important for the growth of a business and often to create a fresh and clear image for a company or a product. Minimalism has been a popular website design style for years. With more and more designers adopting this type of style there are now lots of great clean and minimal designs around on the Web.

Minimal design is actually a lot more difficult to achieve than you might think; keeping your designs clean but bursting with important information is a fine balance. So for today, we have collected some fresh and stunning examples of clean and minimal web designs to inspire you for your next project.

read more

Apr
21

30 Bad Practices of Web Designers

5

Every once in a while you will come across a page that just doesn’t seem ‘right’. There are three elements of a website that can be harmed by bad practice:

  • The website lacks something in its design.
  • The content is written badly.
  • The search engines don’t like something about the site.

Considering the three points above, this article will explains the do’s and dont’s of certain design habits.

1. Using ancient markup

Websites link directly to technology, and technology is about keeping updated. In the era of XHTML, we need to keep updated with the standards to have solid websites. So instead of using that <br> tag, give the <br /> a spin. Know where to self close a tag or place the doctype. For a good resource for those beginning markup, HTMLDog has good tutorials to learn how it all works.

Bad:

  • Using deprecated markup
  • Choosing not to use a doctype
  • Using table based layouts
  • Self-closing tags that shouldn’t be self-closed

Good:

  • Using the latest and greatest markup that is fully-supported
  • Always using Doctypes
  • Using <div> tags for positioning
  • Using a CSS Stylesheet
  • Validating your markup with the W3C Validator

2. Choosing invasive or distracting backgrounds

backgrounds

When the internet started, people were so amazed that they were able to publish stuff publicly that they didn’t think about readability and presentation. Choose a background that is appealing but doesn’t distract the reader.

read more

Nov
9

Transparent CSS Sprites


The Benefits and Potential Problems

CSS Sprites have become a de-facto way of improving the speed of your website or web application. Merging multiple images in to a single file can quickly reduce the number of HTTP requests needed on a typical website. Most browsers only allow for two concurrent connections to a single domain so although individual files can be large, the overall request and response times are considerably lower. Combining images with similar hues also means the colour and compression information is only need once, instead of per file, which can mean an overall reduced file size when compared to the files individually.

The benefits of reduced file size and HTTP requests are often publicised, but potential problems are rarely ever discussed. One of the main techinical issues with CSS Sprites is memory usage which is explained in the article “To Sprite Or Not To Sprite”. Another issue is the maintenance of the sprites, the images and the CSS, both of which can become rather complicated.

A Technological Solution

A common practice in solving slow-down in computing seems to simply throw in more hardware. We all know hardware prices are dropping all the time, so this seems like a reasonable solution. However, I feel there is a fundamental flaw with this philosophy and ingrained mentality. Developers have access to more computing power and as such they code their applications to be handled in these environments. With each new feature the application becomes slower and slower, but this problem has already has a solution — upgrade your hardware. This is an endless cycle.

read more

Nov
9

Important CSS Declarations: How and When to Use Them


When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.

Overriding-styles-2 in !important CSS Declarations: How and When to Use Them

Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them. read more

May
11

CSS3 Solutions for Internet Explorer


CSS3 is probably the hottest trend in web design right now, allowing developers the opportunity to implement a number of solutions into their projects with some very straightforward CSS while avoiding having to resort to nonsemantic markup, extra images, and complex JavaScript. Unfortunately, it’s not a surprise that Internet Explorer, even in its most recent version, still does not support the majority of the properties and features introduced in CSS3.

Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user.

Ie in CSS3 Solutions for Internet Explorer

read more

Mar
9

The Future Of CSS Typography


A Glance At The Basics

One of the most common CSS-related mistakes made by budding Web designers is creating inflexible style sheets that have too many classes and IDs and that are difficult to maintain.

Let’s say you want to change the color of the headings in your posts, keeping the other headings on your website in the default color. Rather than add the class big-red to each heading, the sensible approach would be to take advantage of the DIV class that wraps your posts (probably post) and create a selector that targets the heading you wish to modify, like so:

1 .post h2 {
2 font-weight: bold;
3 color: red;
4 }

This is just a quick reminder that there is no need to add classes to everything you want to style with CSS, especially text. Think simple. read more

Feb
27

Round-Up Of German Design Resources


To stay competitive and successful on the creative scene, we have to know what’s happening in the fields of Web design, Web development, graphic design and typography and know what trends are set to become the next big things in the design world.

The round-up below of over 70 design-related resources should give you an overview of German blogs, Web design galleries (both CSS and Flash), communities, social networks and magazines (both online offline). You would be well advised to read or at least occasionally look through these to catch up on the latest design trends and get a daily dose of inspiration and encouragement. I invite you to discover some of these unique and enjoyable resources!

Blogs

Web Design Galleries (CSS and Flash)

Magazines

Jan
5

Modern Navigation Design Trends


3-D Navigation

Lately, we’ve seen a trend towards design elements that sit on a higher z-plane; that is, they appear closer than other elements on the page. This trend is commonly applied, no surprise, to navigation menus.

Delibar
The content area on the Delibar website looks like a pile of two pieces of paper, with the navigation items holding them together. It also features a subtle JavaScript effect that smoothly moves them up when you hover over them.

Delibar-navigation in Showcase Of Modern Navigation Design Trends

Blue Door Baby
The Blue Door Baby navigation bar is styled like a ribbon that is laid over top of the feature area. The menu items are text-image replacements that have a subtle inset-text effect. (Learn how to create the inset-text effect).

Blue-door-navigation in Showcase Of Modern Navigation Design Trends

read more