Webdesigner Depot » Validation

Is Google Chrome The New IE 6 For Web Designers?

Derek Underwood — Thu, 05 Feb 2009 18:44:04 +0000

Just when you thought you were done with IE 6 and its hacks and exceptions, now you’ve got a new browser to consider: Google’s Chrome.

The good news is that Chrome is a lot more compatible with web standards than IE 5 and 6. However, Chrome has its own idiosyncrasies and bugs.

No one knows if Chrome is here to stay, but it has already captured a surprisingly decent share of the web browser market in a short period of time.

Here are some tips to get your web pages working in Chrome and hopefully looking the way they were designed to look.

Mac Users

As of February 2009, Chrome is still a browser for Microsoft Windows PCs. If you use a Mac, you will need to run Microsoft Windows through Bootcamp, or one of the virtualization products for the Mac (Sun’s VirtualBox, Parallels, VMWare Fusion). If you are really daring, you can try and get Chrome to run using Darwine. Google promises to have a native Mac version of Chrome available in the coming months.

Vanishing Pop-Ups

Pop-Up blocking is great unless your website really needs pop-up functionality. If you have a web page that must use pop-ups, you won’t see them in Chrome. By design, Chrome only displays the title of a pop-up and minimizes it to the bottom right corner of the browser window. Users will need to click and drag the pop-up’s title in order to view its content.

SSL is Broken?

By design, Chrome will only certify a valid SSL (secure sockets layer) page with the padlock icon if all the elements on the page are served via SSL. In other words, if your page is served via SSL but it calls elements via non-secured HTTP, Chrome will give your page an exclamation point icon indicating that it considers your page to be an inconsistent SSL transmission. To get around this, make sure that all the resources loaded by your web page, including all images, are prefaced with HTTPS.

Declare Encoding First

If your web page text is garbled or otherwise just plain wrong in Chrome, you may need to insert encoding information into the section of each web page. If you already have encoding information, it must come first, before any CSS or Javascript. Otherwise, Chrome will just ignore it. A working example:

… your CSS code …

Also, Chrome will ignore encoding specified by Javascript. Period. For example, the following would be ignored:

document.write(“”);
Instead of using JavaScript, you must insert your encoding into the beginning of the section of each web page as shown above.

Bookmark Favorites

When users choose to bookmark your web site, you can control the default bookmark name, description, link, and bookmark icon. Just make sure to place your code in the section of your web pages. Here is a working example:

Fixing JavaScript

If your JavaScript is not working properly in Chrome, check Chrome’s JavaScript console, accessible from the Page menu icon -> Developer -> JavaScript console. That should give you some direction as to what you can change.

For the more advanced JavaScript developers, you can also use the JavaScript Debugger, accessible from the Page menu icon -> Developer -> Debug JavaScript. That will allow you to watch variables and set breakpoints.

CSS Image Problems

If you are using images or backgrounds implemented through CSS and they are not rendering properly in Chrome, you might want to convert images between GIF, JPG, and PNG to see if a different image format solves your problems. Although this makes no sense, it sometimes works, especially with random spacing and image formatting problems.

CSS “First” Selector Hack

Chrome can be finicky and unforgiving about CSS and may ignore styles applied to certain page elements. You might try using the “first-of-type” keyword which will be ignored by all other browsers (except for Apple’s Safari). For example, if you cannot get a particular style applied to the section of your web page to work in Chrome, add in something like the following:

body:first-of-type p {color:#ff0000;}

“First-of-type” will simply be ignored by the browsers that are already displaying your page the way you intended.

GiantIsland CSS Hack

Chrome interprets cascading style sheets (CSS) differently than other browsers. Then again, IE 5, 6, and 7 do not even interpret CSS the same! The GiantIsland CSS Hack is a relatively simple CSS markup hack that makes use of square brackets [ ] to target CSS on specific browsers like Chrome. As a bonus, it can also help you conform your CSS to IE 5, 6, 7, Safari, and Firefox, all at the same time. For more details, check it out at http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx.

Stay Away from HTML5

Chrome does not try to conform to HTML5 API standards yet, even though Webkit, its rendering engine, does support HTML5. If you use HTML5 features or syntax, you will likely run into problems. Stick with HTML4 standards and you should have an easier time. Chrome will likely support HTML5 in the near future.

Validate Your Pages

Before swearing at Chrome and throwing in the towel, validate your pages to make sure you have not inadvertently used a non-standard HTML call. You can validate any web page at http://validator.w3.org/. Some web browsers allow you to take some shortcuts with web standards, but Chrome is not very lenient.

Try it with Safari

If you can’t get your web pages to look right under Chrome no matter what you try, try your web pages in Safari before giving up. Safari is Apple’s web browser and is available for both Mac and Windows PCs. If you use Windows, you can freely download Safari from Apple at http://www.apple.com/safari/download/. Both Chrome and Safari are built using the open source “Webkit” browser rendering engine. If you can see a rendering error in both Chrome and Safari, there is a good chance that Webkit is the culprit. You can post a bug for the Webkit developers at http://webkit.org/quality/reporting.html.

Aw Snap!

The Chrome developers have provided some funny error messages (if an error can be considered funny). If Chrome gives you the dark grey “Aw Snap!” page which also says “Something went wrong while displaying this webpage,” it might not be your web page at all. Chrome has a tendency to crash on some PCs depending on system settings and other installed applications. Try a few other well-known web pages, and see if they crash. Also try closing Chrome, re-launching it, and then test your web pages again. Some people have found Chrome to be unstable on some PCs. Google intends for Chrome to become more sturdy with each new version.

Bug Reporting

If you find a bug with Chrome’s rendering, report it! You will be making the world a better place. Google maintains a public bug list for Chrome at http://code.google.com/p/chromium/issues/list.

Written exclusively for WDD by Derek Underwood, a professional web designer and software developer. You can read more about Derek and contact him at his website:
http://www.derekunderwood.com

Have you been testing your web pages in Chrome? Do you think Chrome is here to stay? Share your opinions and experiences.

Never Ending WordPress Business Bundle – only $14!

Source

Are You Following the Principles of Top Notch CSS Design?

Walter — Mon, 17 Nov 2008 05:55:32 +0000

CSS can be an extremely powerful markup language for designers.

However, the CSS that is produced is only as good as the principles that are being followed by the designer creating the code.

While you may think that anyone can crank out CSS, there is a big difference between writing CSS and producing top notch CSS.

To ensure that you are on the right track, here are eight CSS principles that every web designer should be following.

1. Take the Time to Validate

If you are going to invest the time in coding CSS, it only makes sense to take the time to validate the code that you create. However, it never ceases to amaze me how many designers skip over this vital step. Validating your code allows you to clean up any problems and ensure that it’s going to work well for your visitors.

In addition to validating your CSS file, you should also validate your HTML or XHTML files. Before you validate these files, make sure that you have taken time to declare the proper HTML or XHTML DOCTYPE. Declaring your DOCTYPE may seem like a mundane detail, but I can’t count how many discussions I have had with frustrated designers who continued to have problems with a design, only to find out that it was because they had declared an outdated DOCTYPE (or hadn’t declared a DOCTYPE at all).

2. Document (but not in your code)

Whether you are working on a project alone or with a team of designers, it is important to document the work that you create. You can probably see why this would be important within the context of a design team, but you may be wondering why it would matter if you are working on a solo project. Well, there’s always a chance that your solo project will eventually evolve into a group project, and if this happens, it’s much easier to have documentation on hand than trying to backtrack and create it. However, even in the event that your project does remain a one man show, you may be surprised at how useful documentation is when you decide to revisit a project after not looking at it for a year.

When it comes to creating documentation for CSS code, the natural impulse of most designers is to add it directly to their code by placing it between /* and */ . Like many of the principles in this list, there is nothing technically incorrect about taking this approach. However, adding comments directly to your CSS code will increase the size of the file, which in turn can increase loading times and slow down a website’s overall performance. If you are serious about writing top notch CSS code, you should be documenting your code, but in a separate file.

Although I honestly believe that it is more effective to document in a separate file, I know that there are plenty of files who simply don’t agree with this practice. If you refuse to document in a separate file, the next best thing you can do is use a CSS compressor (in fact, even if you choose to use a separate file for documentation, you can still benefit by using a CSS compressor). You can use this CSS Compressor from CSS Drive Gallery, or simply search Google to find an alternative CSS compressor.

3. Say No to Hacks

Although hacks have become an acceptable practice to many within the CSS community, this does not mean that “CSS hacking” is a principle that you should be following. The problem with this approach to designing is that it means you are intentionally looking for a complicated solution to problems. While you may think that one or two hacks every now and then won’t hurt anyone, getting into the mindset of “hacking through” any problems you encounter can have a negative impact on your overall design mentality.

Avoiding hacks is a piece of advice that experts have been dispensing for some time. You can go back all the way to 2003 and see that Peter-Paul Koch (who is an accomplished developer and author) has been warning designers of the implications of CSS hacks for some time: “The complexity monster has reappeared, right in the center of modern Web development. Nowadays it doesn’t manifest itself as an endlessly nested table, but as an endlessly complicated CSS hack.”

4. Don’t Abuse Divs

Because divs provide a high level of flexibility, it can be easy to overuse them. In fact, this issue has become so common among designers that the CSS community has created its own term to label this issue: divitus. To avoid falling victim to this condition, before automatically using a div tag, you should always ask yourself if there is an actual HTML tag that will get the job done for you. For example, instead of creating multiple header divs, why don’t you use the HTML heading tags that are already available, such as H1 and H2?

Once you begin taking the issue of divs into consideration, you will quickly see the benefits of using the appropriate HTML tag instead of automatically creating a new div. Not only can it reduce the amount of code that you have to create (which will save you time, along with reducing the load time of your website), but it will also give your code a more logical structure.

5. Put Thought Into Your Class Names

If you ask a new or inexperienced designer about how they decide to name their classes, they might say that it doesn’t really matter. While this is technically true, this is a very short sighted view of naming CSS classes. Although there are designers who fall into the category of not caring about CSS class names, there are also designers who do think about their class names, but they actually take the wrong approach.

Since I don’t want to simply beat you over the head with theoretical examples, let me explain this in concrete terms. Let’s say that you are creating a class to control one of the boxes on your page. The box will be located at the bottom of the page, it will contain comments from readers and you will use CSS to give it a tan background and control the padding. Instead of naming this .tan-box (which is what many well-intentioned designers would do), name it .comment-box. The reason that .comment-box is a better class name than .tan-box is because if you decide to change the background color to blue down the road (or decide to move the box from the bottom of the page to a different area), it won’t confuse you or any other designer who is looking over the CSS for that website.

6. Embrace Shorthand

While shorthand can be confusing to designers who are just getting started writing their own CSS code, once you get used to the style of shorthand, it becomes one of the most effective practices you can follow as a designer.

There are multiple benefits to using shorthand. For one, it reduces the size of your files, which will reduce the load time of your website. Additionally, it not only makes it easier to organize your code, but also makes it simpler if you need to make changes to your code in the future. As you begin adapting to shorthand, you should also get in the practice of writing your code on one line (instead of spreading out declarations over multiple lines).

7. Don’t Forget About Printers

As a designer, you are much more technically inclined than anyone else in the mainstream population. Because you are a part of a minority that lives and breathes technology, there are a lot of habits you have that most other people have never thought about. For example, you have probably gone out of your way to eliminate as much of the “paper trail” as possible in your life. However, it’s important to remember that the majority of the population still prints things out on a regular basis. While you probably tag an item with del.icio.us when you want to save it for future reference, the average Internet user will print that same page out.

Since people are still printing out information from the Internet, it’s important to use CSS to make your content printer friendly. Visitors will appreciate all of the work you have put into creating a beautiful layout for the website they are visiting, but when they decide to print out a page from that website, they will appreciate you even more when they realize that their printout only contains the text that they want (and none of the amazing graphics that look great on their computer but would waste a ton of ink from their printer). Because CSS makes it quite simple to ensure that content is properly formatted when printed out, there is no excuse for a true designer to neglect this step of the design process.

8. Never Stop Learning

You may think that this final principle sounds cliche, but it is arguably the most important of the entire list. If you are dedicated to being the best designer possible, you need to ensure that you are always working to expand your knowledge of CSS. Fortunately, this is easy to do if you have the desire and will to commit to continuing your CSS education. While continuing education can be a difficult task for individuals in many industries that are non-technical in nature, because the Internet is literally the basis for CSS, the amount of free resources that you can learn from are literally endless. If you think I’m exaggerating, just type “CSS” into Google and you will see that there are 483,000,000 results for you to browse.

In addition to learning from online resources (and print resources if you prefer), you can learn a lot from other CSS designers. Whether you analyze their work, listen to the advice they are giving out online or talk to them in face-to-face situations, you can gain a lot of value by interacting and potentially collaborating with other designers who are committed to following the principles of top notch CSS design and producing amazing pieces of work.

Never Ending WordPress Business Bundle – only $14!

Source