Category Archives: Clients

Flow Promotions Website Launched

We are proud to launch our latest client’s website: www.flowpromotions.ie. Flow Promotions specialise in marketing brands at major public events such as sports finals etc.

When Flow Promotions came to us about the site, they informed us that they wanted a site with a blog that they could manage in house with facilties for slideshows, galleries, enquiry forms and a few initial pages of content with images and brochure uploaded.  They wanted the site mobile friendly and professional.

We advised Declan to utilise the WordPress platform for his site and came up with a simple theme using the 2012 responsive theme as a base.  We then employed the use of several plugins for slideshows, contact forms and image widgets and came up with a very clean design which accentuates flow’s branding.

Following is a screenshot of the Flow Promotions Homepage.  We would like to take this opportunity to wish Declan Wall and the team at Flow Promotions every success with their new business.

Flow Promotions Event Promotions Company

Flow Promotions – Click Image to go to website

 

 

Manage Your Customer goes Live

When Liz Murphy of Manage Your Customer contacted me about a website I was excited to get involved in the project.  She had a concept for a logo in mind using cog wheels as Cutomer Relationship Management is a process of actions like cog wheels in a gear system.

Manage Your Customer - Customer Relationship ManagementI took the idea and noticed the letters CRM appeared in the company name. Manage Your Customer.  In order to work this into the logo I wrapped the three letters with cogs and used arrows to show the motion of the cogs so that people would read CRM in the logo itself. The font used is called Rockwell, which is modern and impactful.

When building the site I suggested wordpress to Liz because it is future proof, it has an easy to manage back office, it has a blog facility built in, it is mobile friendly and facilitates plugins for lots of different purposes.  It is also search engine friendly (friendly urls, headings, content etc.), which was important to Liz.

I had an idea to bring the cog motif through to the site.  I wanted to keep the site clean and straight forward so I went for an overall white, clean look to make the logo stand out, and I took the cog motif and introduced to the background and wrote some cool javascript code to have moving cogs on the right hand side of the site on larger screens.  Getting the cogs to move synchronously with the page, which I put notches and grooves on, was a little tricky as I had to modify the speed of rotation based on scroll position.  A bit of trial and error (succeed) and I feel the end result ads a nice subtle touch to the website.

Manage Your Customer Screen Shot

Best of luck Liz with your new website.  I hope it gives a great first impression to your new clients.

Take a look at the site here: View Manage Your Customer Website

 

 

Gears/Cogs effect using HTML5, CSS & jQuery

logoI wanted to implement a gears effect as part of an upcoming web theme for a client and so I got my thinking hat on.

Essentially what I wanted to achieve was to create a set of cogs that rotate in a gears system to match the brand that we created for a company called Manage Your Customer (website to be launched soon).

What I wanted was for the gears in the system to rotate exactly once based on a user scrolling down the page to make it look realistic and natural.

See the gears effect in action here: http://www.waterfordwebdesign.ie/myc/gears.html

With HTML, CSS and jQuery it is possible to fix the position of elements and rotate them based on user interaction such as scrolling.

The first thing so was to figure out how many degrees to rotate based on the users current scroll position.  Within jQuery the total height of a web page or document can be found and also the current scroll position can be found so using both of these we can get a percentage value of how far we have scrolled down the page.

height = $(document).height();
curScrollPos = $(document).scrollTop();
percentage = curScrollPos/height;

To get this percentage then in angle of rotation simply multiply it by 360 to get the degrees by which the cog should be rotated.

The first and third cogs bot rotate in the same direction but the third rotates in the opposite direction so to get the angle of rotation in reverse we simply take the rotation angle obtained above from 360 (an entire rotation). Simples!

In order to invoke the code on user scroll we use jQuery to listen for the event.  Full code follows:

<script>
// Control the spinning gears
$(document).ready(function() 
{    
    var height = $(document).height();
            
    $(document).scroll(function() 
    {
        // Are we moving up or down?
        curScrollPos = $(document).scrollTop();
        degrees = curScrollPos/height * 360; //multiply by 360, hopefully we get full 360 rotation        
        neg = 360 - degrees;
        
        $('#cog1').css('transform', 'rotate(' + degrees + 'deg)');
        $('#cog2').css('transform', 'rotate(' + neg + 'deg)');
        $('#cog3').css('transform', 'rotate(' + degrees + 'deg)');
        
    });
});

</script>

View source from the link above to see the full html/css and jquery.

The html set up is simply a div called page as outer container, then div called gears in a fixed position so that it floats as we scroll, and then each individual cog styled through an id in an absolute position within the gears div.  Each cog is a .png file, in our case we have letters on them to match the clients logo.

Enjoy!

Mise Eile Website Development

Our latest website is custom illustrated design capturing the individuality of teenagers. Mise Eile is about the wellbeing of young adults as they go through their teenage years. UTD Web Design also created Mise Eile logo based on the celtic 3 spiral theme (inspired by carvings at newgrange).

The Techie Stuff

In order to allow the site to flow vertically we had to use a CSS3 property to allow the vertical frame to stretch.  We would not normally scale an image beyond its natural aspect ratio, however because of the purpose of the design and the fact that the frame stretches within an allowable range it does not affect the quality of the overall effect. It works in IE9, Firefox, Chrome and Safari and most mobile browsers.  In IE8 and previous versions the background does not stretch but it repeats, it’s not seamless but it degrades reasonably gracefully.

The inner boxes use a repeating vertical pattern and we use CSS to style h1 & h2 for the scrolls across the top of each section so that we are not compromising SEO by using images instead of text. The beauty of this approach is that attractive content can be put together consistently and quickly using the CMS.

The image on/offs in the top menu also utilise dynamic position of background image based on CSS hover event, however anchor text is also present but offset to an invisible area so that again we do not lose important SEO kudos.

Best of luck to our client, Catherine McConigley, with her new project Mise Eile (visit http://www.miseeile.ie). We’re delighted with the end result of this project and hope you like it too.

Here’s what Catherine McConigley had to say about us:

“I experienced the service at Utd Web design to be very professional. Cian was at all times open and willing to explore and develop the site, I gave him my brief and he delivered which made the development of the web site so much easier for me. I would highly recommend Utd Web Design. Catherine.”

Waterford Health Park Pharmacy Website Design

When designing the Waterford Health Park Pharmacy website we wanted to ensure the new website was sympathetic to the fabulous building that the pharmacy is located in.

The Waterford Health Park is brainchild of Dr. Mark Rowe, an proactive member of the community in Waterford city, a man who had a vision for the fabulous Pugin building located just outside the heart of Waterford city. The end result is a stunning clinic on a fabulous site.

Rory Moore, MPSI approached UTD Web Design to create their new website www.waterfordpharmacy.com and we were thrilled to get the opportunity.

Waterford Health Park PharmacyThe first thing we did was surveyed the site and took photographs of the stone work and cladding there because we felt that this could be translated to the website and would look well.  We also went inside the store to get a feel for the branding etc. in order to bring this through to the site also. The end result is a combination of both, the structure of the site is made up of the stone background and cladding and the header takes into account the blue skies and branding within the store.

Rory Moore, MPSI, was very happy with the end result.

“I contacted UTD Web Design based on a recommendation from Dr. Mark Rowe.  Once I spoke with UTD, they came up with a clear vision for our new site which matched our branding and location.  The process was straightforward, painless and quick. Once the site was live, UTD had no problem making extra tweaks to the live site. I’m very pleased with the service and  feel I  got good value for money. I would have no hesitation recommending UTD Web Design.”

Designing a Mobile Version of a Website: Meades Cafe Dungarvan

Meades of Dungarvan, Co. Waterford contacted me recently to create their new website. One of the stipulations was to create a site that had a mobile version that was easy to use on the likes of iphones etc. The general term for websites that resize gracefully is called ‘responsive design’ however sometimes it’s more desirable to create a separate version of a site for mobile devices.

Meades Cafe MobileOur approach in this case was to create a smaller version of the site, drawing from the same content, so essentially we separated the main menu from the content allowing the user to swap back and forth between menu and content on the mobile version, whilst on the desktop version the menu appeared on the left hand side.  To keep the site consistent, we keep the look and feel similar on both sites.

If we wanted to create a site that looked more like an app we would have used something like jquerymobile or iui, however in this case the customer wanted to keep their branding consistent across platforms.

You can visit the site at www.meadescafe.com

Here’s what Mark Lubek, proprietor, said about our service:

“I got in touch with UTD Web Design a week before I wanted my site live and they pulled out all the stops to get the site live on time for us.  In the end they actually completed it a day early!  They managed everything from hosting to social media setup to content management.  One of our most important requirements was the creation of a mobile friendly version of the site and UTD created an exceptionally user friendly version of the site for mobile users, which works seamlessly with the desktop version.”

Scurri.com – The Delivery Service with a Difference

I spent the morning today with Scurri.com.  After a scenic drive from Waterford to Duncannon via the Passage East Car Ferry I arrived at the Scurri.com premesis and was greeted by Rory O’Connor CEO and Founder.

Scurri.com is a great new idea that links consumers of products from websites such as ebay and donedeal.ie with couriers, movers, hauliers, freelance delivery men etc. A customer uploads their product and then where and when they want their product delivered from and to. The delivery crews are notified about this and are given the opportunity to bid for the business. Simple. Great value for consumers, extra business for delivery people.

Kudos to Rory for setting up this interesting business. If you need something delivered at a keen price then check out scurri.com.

Great Value Delivery with Scurri.com

Glanbia Estates

UTD Web Design has just launched Glanbia Estates new corporate website. Glanbia Estates is a branch of Glanbia focussing on the sale and development of some of their properties.

The site was kept clean and corporate looking with heavy use of pictures as we felt that the pictures would do the talking.

Click Glanbia Estates to visit the site.

Glanbia Estates Website

Glanbia Estates Website