Introducing Jack Brice on Wine

Jack Brice has been a wine buff since he was 21 years old when his great uncle Mick (from Adelaide Australia) sat him down and explained the history of South Australian wines. In the years since Jack has visited countless wineries in Australia, France, Portugal and USA. Jack has been an invited guest panelist and regular speaker at wine events – and as co-director of a wine tasting group, that group’s member list has grown to over 1,200 enthusiasts.

Jack is the second half of the Off-the-Grid dinner series that I built a web site for in 2013. After completing that site we decided to take a look on improving Jack’s personal blog. With this site I wanted to focus on a design that would work well with the theme of his blog, wine, and focus on being compatible with all screen sizes. His site is based off of the WordPress platform with a custom theme and some custom made plugins. I tried to keep the design clean by sticking with 4 to 5 colors for the sites elements. Beyond the normal WordPress layout I added a parallax scrolling effect to the header that scales down into the mobile views. I also took the menu and made it slide out from the left side of the page when the user visits the site on a phone or tablet.

Jack Brice on Wine Header

Jack Brice on Wine full header before page scroll.

Jack Brice on Wine Small Header

Jack Brice on Wine compressed header when scrolling down the page.

Jack Brice on Wine mobile view

Jack Brice on Wine mobile view.

Jack Brice on Wine mobile view with menu

Jack Brice on Wine mobile view with slide out menu

Jack Brice on Wine mobile view small header

Jack Brice on Wine mobile view with small header after page scroll.

 

 

 

New Site: Off-the-Grid

This site has actually been out for a few months now but I am now just getting time to write about it. Off-the-Grid is a dinner series by Jack and Kate that they host a restaurants around the Pittsburgh area. They work with the great chefs in the Pittsburgh region to plan private dinners with fixed menus and Jack matches the dinner choices to various wines.

Since starting in November 2009 they have hosted more than 25 Sunday Suppers at various local restaurants, galleries and private spaces and shared more than 120 different wines. The dinners have ranged in themes from France to South Africa to Australia and the U.S. Some of the special dinners have focused on women winemakers and 90+ rated wines.

Jack and Kate approached me, after building Jack’s father’s website William R. Brice, to update the the look and functionality of there site. They were looking for a modern look that would be easy to navigate between new and old events. They also wanted this site to include online payments for their events and it could all be easily maintained by themselves. So with these guidelines I setup a word press site with a few plugins to modify blog post to act as events with posting dates actually being the date of the event. I also set up the site to automatically generate PayPal payment buttons that could be turned off when an event sells out, which they do rather quickly.

My idea for the site was to make it clean and easily navigable. I also made sure it could be easily be made mobile through some media queries on the stylesheet. With the style I tried to stick with colors they were already familiar with such as dark red, green, and white. Below you can see some screenshots of the site or you can click here to just go check it out for yourself.

Off-the-Grid

Mobile design of the Off-the-Grid site.

Off-the-Grid

Design of the Off-the-Grid site.

jQuery YouTube Carousel

One of the sites I work on required a way to display YouTube videos on their site in a carousel like fashion. The biggest challenge that I had to look at was the coding language I could use. The site’s back-end end of does not allow for me to use PHP code, which is what I would have originally used to make this solution. Instead I took to the internet find a suitable Javascript/jQuery option and to my surprise there were none to be found.

I have done some work with embedding YouTube videos in the past so I figured I could make a slick jQuery plugin to insert code into a div on a page and provide the controls to switch between the videos. My goal was to make it so that all I would need to supply to file was the video ID list, video height, and video width. I combined what I created with jCarousel – Riding carousels with jQuery to form the plugin. This plugin is developed under the dual open source licenses from MIT and GPL.

View live example
Download the file for your own use
*Update: this project can now be found on my GitHub project page.

Once you download the file add the contents to your site. Make sure you include <link rel=”stylesheet” href=”path-to-css/youtubecarousel.css” type=”text/css”> to the head of the page and <script type=”text/javascript” src=”path-to-javascript/jquery.youtubecarousel.js”></script> to the footer of the page. You of course will need to include jQuery to the page in order for this to work. My suggestion is to grab the path file over at Google Libraries API and include that near the bottom of the page. Then all you have to do is place <div id=”yt_container”></div> somewhere in the body part of your document and everything should work for you.

Let me know of any problems or suggestions in the comments.

Site redesign for Raechul Ouellette’s site!

I am pleased to announce the redesign of my wife’s site, Raechul Ouellette.com. I have developed this site to be used for personal promotion and blogging of her passion for public relations and communication. The site runs WordPress on the back end and utilizes a variety of WordPress plugins to provide the different functional parts of the website. WordPress also allows Raechul the ability to update all the content on her site with little to no knowledge of scripting languages. A custom theme was developed using CSS and images created via Photoshop. The new site layout is a vast improvement from the previous design and utilizes a very clean and easy to navigate layout while also using a much larger color palette.

I also focused on improving the SEO and search engine visibility with this site design by utilizing many of the advanced features WordPress offers. Also, by switching to strictly WordPress, to run the whole site, increases in the number spidered pages have been witnessed.

I have included some pictures of the new site below and when you get a chance you should check it out at RaechulOuellette.com.

Raechul Ouellette Homepage

Raechul Ouellette Resume

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.michaelouellette.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 Ouellette mobile homepage

Michael Ouellette mobile homepage

Michael Ouellette portfolio page

Michael Ouellette portfolio page

Michael Ouellette portfolio details pages

Michael Ouellette portfolio details pages

Michael Ouellette social page

Michael 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.