Going Mobile!

I’ve spent this previous weekend teaching myself the art of mobile web development. There is a continuing trend within technology were our devices continue to get smaller and more portable. I know someday laptops and desktops will most likely be a thing of the past so I thought now would be the perfect time to dip my toe in the mobile development waters. I am pleased to say that my website, http://www.michaelsouellette.com, is now completely mobile optimized.

In the design of the mobile version of my site I utilized the jQTouch plugin for jQuery. This plugin helps to render the site into a touch screen friendly interface instead of the usual click event focused environment of a desktop or laptop. I tried to match the desktop version of my site as closely as possible when designing the layout and images for the mobile pages. You can see below a few screen shots I included that highlight a some of the pages on the mobile site. Let me know your thoughts and opinions in the comments.

Michael S. Ouellette mobile homepage

Michael S. Ouellette mobile homepage

Michael S. Ouellette portfolio page

Michael S. Ouellette portfolio page

Michael S. Ouellette portfolio details pages

Michael S. Ouellette portfolio details pages

Michael S. Ouellette social page

Michael S. Ouellette social page

Homepage redesign for Pittsburgh Water Limo

I have recently made some improvements to the Pittsburgh Water Limo homepage. The new design I rolled out is more appealing and is more consistent between different browser types. The new layout also will benefit the Pittsburgh Water Limo with increased search engine visibility and help improve the site’s bounce rate. The new homepage takes advantage of the jQuery library to provide animations and quick site load times. By utilizing jQuery it makes it easier and cleaner to highlight multiple products from the company as the main image slides to show more products.

Pittsburgh Water Limo

New layout for featured products and events along with better highlighting of "Alerts".

Pittsburgh Water Limo

New social media, mailing list and products layout.

 

I have also updated the site’s masthead to give it a more modern and refreshed look. Pittsburgh Water Limo had been using the same masthead on their website for at least 5 years now and I felt it was time to update the look. The new masthead has a look that is consistent with the old one but will provide the site with a fresher look. The new masthead also makes the the logo and company’s name stand out better along with making it easier to read

Pittsburgh Water Limo masthead

The new Pittsburgh Water Limo masthead.

New Site Design!

As you may have noticed my site has had a major overhaul, it was well over due. With the new design I hope to better showcase my talents at designing attractive websites along with gaining some traction with SEO. My new site functions like a Javascript web application with the user visiting one page and the content of each page is brought in through AJAX. I used the Google recommended article, Making AJAX Applications Crawlable, to design the structure of my site. By using #! search engines, like Google, are able to view each AJAX page as a new page. Using AJAX also has immensely improved the site loading time over the previous version of the site.

Apart from a restructure of the site’s back-end I tried to focus on making a more professional and attractive looking site. I also tried to cut down on image file sizes to help out site loading time. I developed the site with open-sourced fonts from Google Web Fonts which allows for an expanded font library for sites to use. This allowed me to take font that would normally be in an image and apply it to the site as normal text instead. Furthermore, I have plans in the not so distant future of making this site more mobile friendly.

I love my new and improved site and all the benefits it will bring me. I spend so much time working on other people’s/company’s websites I felt bad that my site had fallen into such disrepair, it really feels good to give it a big and much needed overhaul. I would be happy to provide many of these same techniques used in my new site to your next web project, just visit my contact page and let me know how I can help you.

Introducing William R. Brice.com!

William R. Brice is a Professor Emeritus of Geology and Planetary Sciences at the University of Pittsburgh at Johnstown with degrees from the University of Florida, University of Tasmania (Australia), and Cornell University (Ithaca, New York). For many years he was a member of the summer faculty at Cornell University and he has served as a visiting scholar at universities in Tasmania and Brazil. In the Fall of 2005, he was a faculty member on a Semester-at-Sea 100-day voyage around the world.

Mr. Brice approached me to develop a site which would allow him to promote himself and the books he writes. His main focus for the site was to have an attractive way to present himself and his projects online. I developed the site using mainly HTML, CSS, and jQuery. I used jQuery to handle all of the sites animations and the contact form, this helps to keep the site’s load time down. Click Here to take a look at the site now.

Introducing Bone Works Grill.com

Its my pleasure to introduce my new client and site Bone Works Grill. Bone Works Grill is a restaurant opening on August 17th, 2011 in Level Green, PA (a suburb outside of Pittsburgh, PA). They use a firewood grill and smokers for most of their cooking which includes many American and BBQ style dishes.

In the development of their site I used mainly jQuery and Javascript mixed with HTML. The owners of the restaurant wanted a website that would be interactive and would be graphically attractive so using jQuery would provide these results while still maintaining a SEO friendly interface. This site also utilizes the Making AJAX Applications Crawlable from Google to make the entire site crawable. The site also takes advantage of the Google Maps API to create a truly unique user experience when visiting the location tab. I really liked the idea of having a full screen map for customers to use to see where the restaurant is located.

Some parts of the site are not fully completed yet but I plan on having them up as soon as possible. More graphics and animations will also be appearing in the coming weeks as the restaurant prepares to open.

Google+ Follow Up

Well I have had access to Google+ for about 24 hours now (thanks to some members over at droid-life.com). So far I really like the service, it is a much better experience then Buzz and Wave provided. I think that it may have the potential to take on Facebook. My biggest worry however is that Google will not be able to attract “normal users”. Google has no problem working up those interested and working in Tech with any of their new products. However, they have a much harder time attracting people outside of the Tech circle. If they can not capture this crowd then I do not see the product going anywhere fast.

I have total faith that Google will address this problem and one of the biggest signals may be in the discovered code linking Google+ to a Google+ Games platform. This was reported today by Engadget and can be read here. With the addition of a games platform I can really see this product taking off especially if they can work out some way to effectively integrate social into them.

Other then that fear I think many aspects of the “project” were very well thought out. I am a huge fan of the Circles and how it really takes the best of both Twitter and Facebook and combines them together. It allows you to follow people while at the same time keeping your closer circle of friends and family separate. Circles is also one of the best ways to handle privacy settings as well, which I feel Google got 100% right in Plus. Being able to post something to just certain groups of people is really nice. You do not have to worry about who may be reading what you post because now you know.

I have some really high hopes for this new Google product and I really hope to be fully using it, instead of Facebook, soon! Feel free to share your thoughts.

Google+

I am really excited about the new Google+ social network. Google has been lacking in the social space for a long time and many of their attempts seemed promising. I really think this is their chance to take on Facebook, and from what is demonstrated in the following video, they will most likely one up them. The huge benefit Google will be able to provide it’s users comes in the form of integrated search along with integration with their very popular Android platform. Google will be able to use many of the features in their new social product to better offer search results to their users. They may even get to the point of being able to have an intelligent guess in what you are searching for.

I haven’t been interest in Facebook for some time now, to me they have sort of stopped being the innovator and social driver they once were. Don’t get me wrong Facebook is still a great way to connect with friends and family but a lot of their new features are more creepy then useful. Call me a Google fan boy but I have total faith that Google has finally achieved a viable player in social networking. Now only if I could get an invite…

Anyways check out this video describing Google+ a little more:

Internet Explorer and Ordered List Bug

Today, I happen to run into, what I thought, was a really strange  bug in Internet Explorer 7 and below. Since, it took me awhile to find an answer to this problem I thought I could shed some further light on it. The problem I ran into was Internet Explorer was not counting the items in an ordered list correctly. Instead of 1,2,3,4,5,6 IE was outputting 1,1,1,1,1,1. Further, the problem also made the numbered bullet appear towards the bottom of the list item when they contain multiple lines. I found the answer to my problem at kirupa.com.

The first problem of the miscounting can be solved by doing the following:

.container ol
{
   list-style-type: decimal;
}
.container ol li
{
   display: list-item; 
}

Then for the second problem where the numbers line up to the bottom of the list elements just add the code in red:

.container ol li
{
   display: list-item;
   vertical-align:top;
}

That should take care of that problem. I hope this helps you out and keeps some headaches away.

Introducing RebeccaJeniece.com

I would like to announce the debut of a new site I designed, RebeccaJeniece.com. Rebecca is a rising actress with experience in many independent films, musicals, plays, and hollywood movies. My goal with the development of her site was to capture the elegance and professionalism she brings to her roles. For this site I utilized many user interactive site features through javascript and css. This gives the site a more modern feel and allows for a simpler but yet classy feel. This site utilizes the scripting languages of JavaScript, CSS, html, SQL, PHP, ajax, and jQuery.