Friday, April 30, 2010

Nowadays everyone’s using a different browser. Between popular options like Firefox, Safari, Chrome and Internet Explorer, which make up close to 98% of the internet market share of browsers, and the other little known browsers like Konqueror, there are a multitude of browsers being used to view your site.

How does your website function across all these options? It’s important that your website is usable across all major media, whether it be popular browsers, mobile devices, or any other web browsing devices. In this article, we’ll cover some basics of making sure your site is cross-browser-compatible, including snippets and resources to help you along the way.

The Problem

Not everyone uses the same browser. Similar to how everyone is running on a different operating system, you can’t expect all people to be using the same web browsing tool.

So what are the options? The data about current browser share varies depending on the source and the region, but in general, Internet Explorer, Firefox, Chrome, Safari, and Opera make up most of the market share, with Internet Explorer dominating the market. Internet Explorer 8 has over 25% market share, Internet Explorer 6 has 215 and Internet Explorer 7 having 14%.

When there are so many different options out there, each running their own rendering engine, how do you ensure that your web design or application will hold up in each of them? That what we hope to cover and provide solutions for in this article.

How does your site perform?

So, how does your current site perform in the multitude of browsers that are out there? Why not check for yourself? If you don’t want to install all the major browsers out there on your own personal machine, here are some resources to help you out.

Adobe Browser LabAdobe Browserlab offers an awesome solution for viewing on demand screenshots of your site. This is usually my go-to program for testing in various browsers.

BrowsershotsMakes screenshots of your web design in a lot of different browsers. After you submit your URL, it gives you a url where your screenshots will be loaded up.

Browser SandboxRuns an application to view your site in a variety of browsers.

BrowsrcampAllows you to test the compatibility of your design with Mac OS X browsers.

IE TesterA free WebBrowser that allows you to check how your site looks like on IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP.

Browser Proofing Your Site

So turns out your site doesn’t function as expected across all the major browsers? Don’t worry. It happens to the best of us. Now it’s time to go about fixing it.

Validate

CSS Reset

Another great way to ensure your site is cross browser compatible is to always reset your CSS before working on a project. There are many different global CSS resets, but Eric Meyer’s one and Yahoo’s one are considered to be the most correct ones:

Conditional Statements

Another popular method of ensuring your site is cross-browser-compatible is targeting specific browsers using conditional statements. Basically, the idea is to detect the user’s browser, and if it is one of those specified, it should perform a certain action.

One of the most common uses of conditional statements is to include a stylesheet if the browser is Internet Explorer. By doing this, you can correct some bugs that exist in your code and override your current stylesheet.

To use conditional statements, simply include the statement in the head section of your XHTML, right below the stylesheet inclusion.

PHP Browser Detect

If you are looking for a more specific way of targeting browsers and even operating systems, then you should consider checking out Techpattern’s PHP Browser Detection Script. It’s a very powerful script that will detect everything from your visitor’s operating system, browser, JavaScript support, screen resolution, and more.

jQuery Browser Detection

For a jQuery-based solution of detecting browsers and adding a corresponding class to the body of your site, check out TVI Design’s Browser Detection using jQuery. The script adds a class to the body, which you can then style in CSS.

Mobile Devices

Things are changing. New devices are emerging as a medium for browsing the web these days. Whether it’d be smartphones, iPods or an iPad, there is a new enviornment for web design and as they become increasingly popular, it means that you must also take them into consideration when designing a site.

What does my site look like in a mobile device?

How about testing your site in some web based mobile emulators? If you are looking to test your design in a mobile device, here are some great resources:

About the author

Sean Geng is a freelance web designer based in Pittsburgh, PA. He is the site curator over at Designmess, a online community for designers and developers. You can follow him on Twitter, or contact him via his website.

You are subscribed to email updates from NoupeTo stop receiving these emails, you may unsubscribe now.

This post is part of our daily series of posts showing the most inspiring images selected by some of the Abduzeedo's writers and users. If you want to participate and share your graphic design inspiration, just send us, via email, the image with the link from where you found it, also use "Daily Inspiration" in the subject, and don't forget to send your Abduzeedo username; or via Twitter sending to http://twitter.com/abduzeedo

If possible use the HTML code: <p class="imgC"><a href="Link to the page you found the image"><img src="Link to the Image" /></a></p>

nevR

pritesh chauhan

Rod Steele

S. Bruett

Seema Shariat

Stéphane

Steven Medina

Superjo

ThirdDesign

Via Twitter

@daniel_nelson

@allrox

@djbennett999

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

I will be posting some fresh free fonts every Friday, yes I know it's awesome. I will look forward to bring a lot of great fonts that will sure help you improve your typography work. Check out what I selected for you on the FFFF#46 and make sure to comeback for more next week.

Sponsored Links:

Abduzeedo takes pride in being one of the worlds leading design blogs. Having interviewed a bulk of the most infamous creative geniuses, we want to use our potential to introduce a new star on the Abduzeedo stage …YOU.

<!--break--> Today we introduce The World Collabs. Our new cutting edge Abduzeedo collaboration project, which will give you the possibility to collaborate and compete with the worlds leading designers and artists.

What is "The World Collabs"?

"The World Collabs" will give you the possibility to work with PSD files of established artists. TWC gives you a secret in-view in the workflow of the stars and catapults you miles forward in your journey to design heaven. This way you learn to practice with different shapes, backgrounds, patterns brushes and new styles.

Every month we will offer you an unfinished piece of an experienced and accredited graphic designer to the world.

The piece will be unfinished, so you can complete the PSD-file with your very own style. This way every month you can collaborate with the best designers of the world. The final pieces will be judged by the Abduzeedo Team and the artist himself. The three best works will be rewarded with prizes.

Prize

1. $ 100 (send via PayPal) & an approval for an original collaboration with Rik Oostenbroek

Artist of April: Rik Oostenbroek

I am very proud to present the artists for our first Collaboration post: Rik Oostenbroek. Yet only 20 years old, he is one of the most talented upcoming artists. His ability to create awesome shapes and colors is enormous but still a secret to us. He just updated his portfolio with some incredible pieces.

Sponsored Links:

As a special edition, our post #100, for this Sites of the Week we have selected a lot more sites for you guys! Also, to celebrate we're anouncing the winners of Flash Filter giveaway. There are amazing sites today, and stay tuned because much more is coming! As usual we would love to hear from you, keep sending your suggestions to us and we will be more than happy to feature your site.

DESIGN / CSS

O'Reilly's Irish Newfoundland Pub was established in December 5/1995 in St. John's. Proprietors Brenda O'Reilly and Craig Flynn were intent on capturing, presenting and celebrating the ultimate Newfoundland cultural experience.

In mid-July 2010 two hundred kilometers from Moscow on the picturesque shore of the lake festival of visual arts "SEE:". This area is a four-day turn into a separate world, where everything will be subject to the laws of creativity, freedom and art. (by Google Translate)

APP / WEB APP

You need to transfer files. Maybe to an FTP or SFTP server, or the cloud via Amazon S3, or using WebDAV. You maintain a website, do backups, or upload photos. You need Transmit, the #1 Mac OS X FTP client.¹ Now, in Transmit 4, we took everything good about Transmit, and added a dollop of unbelievably great.

Task This is an advanced task management application for iPhone and iPod Touch. Manage your tasks in a simple way, Task This propose to organize with projects and categories, but also to create shopping lists to manage your items

Formee is nothing but a framework to help you develop and customize web based forms. Did you use to spend a lot of time aligning fields and calculating margins and paddings in a quest for a perfect form? No more!

Project Fedena is the open source school management system based on Ruby on Rails. It was initially developed by a team of developers at Foradian Technologies. The project was made open source by Foradian, and is now maintained by the open source community.

This portfolio is intended to communicate the breadth of my capabilities, and to help you understand the environment I live in, one that supports play and experimentation – qualities I find crucial to developing strong ideas and forming new ones.

CONTEST

Show off your creativity by designing a SlideDeck skin for the Skin It To Win It Design Contest. The Grand Prize winner will receive a free 16GB Wi-Fi iPad!

About the author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links:

Following our the success of Fabiano's article 'One of the Most Beautiful Houses I've Ever Seen' and also some requests from our readers, we are proud to announce a new post series here at Abduzeedo, a series about Beautiful Houses. The idea in this series is to show beautiful and inspiring houses. Houses that are remarkable for its design, elegance, elements, concept or simply because they are beautiful. So if you like architecture, interior design and beautifully designed houses, you are at the right spot. Check out this week beautiful house and stay tuned for more...

This week, we present you the amazing Sotogrande House.

Sotogrande house is the latest project by A-cero architecture studio, the project is a single-family house situated in a tourist town of the Mediterranean coast. It has been built as a house for holidays. A-cero has chosen the white colour as the main element in the house's decoration in order to provide clarity and luminosity to the interior areas. The house's structure is a cubic volume. It has an area of almost 400 m2 and it is distributed in two floors. The furniture, also designed by A-cero, includes lacquered modern pieces. White and beige woods have a main role in the furniture. In some places there are some details of dark wood which break the predominant white colour.

Well, in my opinion, all the white, the elements, lines, shapes, material... everything matched perfectly and the result was a very beautiful house! To see more about the project go to A-cero's website. See you next time. :)

About the author

Someone with a bachelor degree in Foreign Trade that really likes technology, design, photography and creativity. A person 'digging' a new way as a 'geek apprentice', blogger 'wanna be' and a communication lover! Current location: Porto Alegre, RS – Brazil Twitter user: gismullr

Sponsored Links:

A few fridays ago we had an awesome post with some sweet illustrations of the Lost characters which everybody loved! Yesterday, I ran into more great illustrations of it, and it totally rock.

<!--break-->

These are episode posters that designer Gideon Slife has come up with. I chose to show you the best in my opinion, but at his flickrstream you will find many more until the 4th season. I hope you all enjoy these. Cheers! ;)

4x09

4x08

4x07

4x02

3x22

3x21

3x20

3x19

3x18

3x14

3x13

3x09

3x10

3x01

2x22

2x17

2x15

2x12

2x09

2x10

2x07

2x03

2x01

1x19

1x06

About the author

Hello, everyone! I'm Paulo Gabriel, a 25 year old designer from Porto Alegre, Brazil. I have worked as a webdesigner since 2006, but websites and blogs have been a hobbie for me since 1999. Here in Abduzeedo, I try to bring only the hot stuff for you... and hope that all of you enjoy my posts! For more cool stuff, you may also follow me on Twitter.

Sponsored Links:

After two weeks running the Abduzeedo Poster Giveaway we are proud to announce the lucky winners of the 6 posters, courtesy of our friends over at UPrinting. We also would like to thank you all for the comments and great poster suggestions, we will post about them very soon.

The poster is 24x36 inches in semi-gloss paper with the new Abduzeedo symbol.

Winners

Brian O'Meara

Curtis Gaudet

Amy

timmittim

Alexandre D'Agostin

Oliver Edwards

About UPrinting

UPrinting offers a wide variety of products that range from business cards to envelope printing. This means that whether you are a small business owner looking to expand your market with flyer printing or a proud parent looking to create holiday greeting cards or postcards from a photo of your kids, we can help you by offering quality discount printing and online design help. For photographers and photo enthusiasts, we offer a full line of large format printing products including canvas printing, poster printing and window clings. For marketers, we offer mailing services, letterhead printing. brochures and door hangers.

For more information on our products, please link to the following pages:

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.