A lot of people have been using CSS3 media queries recently to deliver different styles of their web site to users based on the size of their browser screen. Usually this comes in the form of a ‘normal’ 960px width site, and will also deliver a more condensed version for mobile platforms such as the iPad and smartphones. I decided to go a different route and create a demo that delivers content for a 960px width site, and also delivers an enhanced version for users with monitors that have a Full HD resolution (1920px width).

The site works best in webkit based browsers of course, but most of the quirks of older browers are brought up to speed using some different methods. I used CSS3PIE to enable most of the CSS3 properties used on the page to work in Internet Explorer 7 and 8. Media Queries are also a problem in IE 7-8, so I also employed a javascript project called css3-mediaqueries.js to enable them. While both of these methods have their quirks, they go a long way in helping to bring users with outdated browsers more advanced features.

Here is a list of some of the CSS3 features employed on this demo:

Please take a look at the demo I’ve created and feel free to browse the source to see how things were done. Users with a 1920px width monitor will get to see the CSS3 Media Query in action as it converts the site to a two column layout that takes advantage of the entire width of the site.  Also, if anyone is wondering what the image slider is on the demo page, it is a jQuery slider called Nivo Slider.

Click here to view the demo!

For those of you out of the loop, Forrst is an invite-only community for web designers and developers to share and critique each other’s work. I have invites from time to time, but don’t know who to give them to!

If you are a talented web designer or developer that is interested in a Forrst invite, post a comment with a link to your website or portfolio (and be sure to put the e-mail address you want the invite sent to in the proper field) for me to look over! I will keep this page updated with the number of invites that I currently have available.

If you do receive an invite, please remember to read the Forrst post guidelines before contributing. Thanks!

For this project I decided to make a web-based resume. I actually began this project several months ago, but I was recently inspired to start over from scratch after viewing an HTML5/CSS3 layout by onextrapixel.com.

This demo works best in Google Chrome or Apple Safari. Firefox will work well enough if you don’t have either of those browsers available. I hope you enjoy it!

View The Demo: HTML5 and CSS3 Resume Demo

Just as before, I will still be offering freelance website design and development services. Since my time is limited, I will only be focusing on one project at a time to ensure a quality website and a happy customer. I currently have one project on hold that I will begin upon my return to Michigan for a former co-worker at Landscape Forms.

Kalamazoo customers are still more than capable of receiving my services. Distance is not a problem in the age of technology that we live in. My services are available to anyone no matter where they may be located. Thank you for your time and patience!

Unfortunately I cannot link you to the website since it is internal, however I have uploaded some screen shots for your viewing pleasure.  Enjoy!

I think these icons are a great free resource for developers. If you would like to download them, please visit the following link and download the file from Komodo Media. Enjoy!

Download Link: http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/

I would first like to apologize for not updating my site in a while. I’ve been extremely busy with the holidays and work and I just haven’t had the time! I finally finished my undergraduate program at Western Michigan University and I am now the proud owner of a BBA in Electronic Business Design! It feels incredible to be graduated from college and to be a part of the professional work force.

Speaking of which, I have been busy developing a website for the company where I am interning, Landscape Forms. This website is going to be the home for our new electronic auction system. Currently these auctions are all done via paper and pencil, and my job is to give them a more eBay like feel. I have been developing this website using ASP.NET and SQL Server, and it has been exciting learning new interactions between things such as ASP.NET and jQuery along the way. I would love to show you this website, but it is internal only. Sorry!

I hope that everyone reading this had a wonderful holiday season, and I’d like to remind you that Fro Designs is always happy to answer your web design and development needs. Enjoy the new year!

Technorati Claim Token: [MU3SZKEZ7HXS]

Here is a link to the tutorial: Illustrator: Abstract Vector Art

And here are some of the results that I had from this tutorial:

I have had a lot of fun with this tutorial, and I hope you will as well!