Category Archives: Web Design

Urgent information for those seeking Financial Assistance for Website Development in Waterford

If you are interested in getting financial grant assistance to help you do business online then then you need to book a place at the information morning being held in Dungarvan on Thursday the 26th of June. As part of the National Digital Strategy the Local Enterprise Office are hosting a Digital Voucher Information morning in Dungarvan Enterprise Centre, from 8am to 1pm (free of charge).

The Digital voucher process is competitive and there are €62,500 worth of vouchers available in Waterford for this Pilot phase. In order to be eligible to apply for a voucher, you need to book a place on the Digital Voucher Information Morning in Dungarvan, Waterford.  Places are limited to 50 so book now.

Why the Initiative?

According to the LEO, there is an “ever increasing towards online spending it is estimated that only 23% of small Irish businesses are engaged in any meaningful way in eCommerce sales… It is now believed that of online purchases made in Ireland that 70% of these are done in overseas markets.”

With this in mind, The National Digital Strategy aims to get a further 2,000 businesses trading online by the end of 2015. The Department of Communications, Energy & Natural Resources (DCENR) has launched an Online Trading Voucher Programme and has teamed up with the Local Enterprise Offices to deliver this to Irish business. Following a successful first pilot phase in Dublin City, a wider pilot will now take place and businesses from Waterford can now apply.

Who can Apply?

Businesses in Waterford that wish to trade online or uprgrade their existing online presence are encouraged to attend the information morning to learn more about the scheme and to become eligible to apply for the voucher.

According to the LEO: “There is now an urgency to ensure that businesses recognise that this is happening and that they are encouraged and supported to correctly respond to this digital reality.”

What can the vouchers be used for?

  • IT consultation;
  • Development or upgrade of an e-commerce website;
  • Implementing Online payments or booking systems;
  • Purchase of Internet related software;
  • Purchase of online advertising (this purchase cannot make up any more than 30% of approved Voucher costs and can only be drawn down in one payment phase);
  • Developing an app (or multiplatform webpages);
  • Implementing a digital marketing strategy i.e. Social media marketing;
  • Consultation with ICT experts for early stage adopters of online strategy;
  • Training/skills development specifically to establish and manage an on-line trading activity.

What Assistance is Available

  • Vouchers will be available to a maximum value of €2,500 or 50% of eligible expenditure (Net of VAT), whichever is the lesser;
  • Voucher approval must be gained prior to incurring any expense;
  • Own labour is not an eligible expense;
  • Third party costs only will be considered;
  • All third party/supplier invoices must contain proper business details (e.g. Tax and Business Registration details).

Conclusion

If you are a local business and have an eCommerce/Booking/Sales element to your web site, you need to attend this information morning.  Book your place at the Digital Voucher Information Morning in Dungarvan, Waterford, today.

Please share/pass on this post to anybody you know that is thinking of building a site urgently as places are limited.  If you’re not in you can’t win.

How do I know if my site is mobile/tablet friendly?

smartphoneIf you open your site on your smartphone’s browser and you have to scroll horizontally to view content or access menu items then the site is not optimised for mobile devices.  Most sites built two or more years ago for small businesses would not be mobile friendly by default.  Some are still being built today without considering mobile devices yet almost 50% of people access the web now via mobile.

tabletWhy should I make my site mobile friendly?

Your site should be mobile friendly because more and more people are accessing the web from devices such as smartphones and tablets today.  When people encounter a site that is not mobile friendly they become frustrated and tend to not use the site if at all possible.

Common problems users encounter include:

  • Menu items too small and are difficult to access
  • Popup boxes appear off screen and sometimes cannot be shut down
  • Images are not rendered at the correct size
  • Content is difficult to read without zooming

What is the recommended solution?

layoutWhen it comes to mobile website design there are 2 approaches:

  1. Adaptive design:  in this case a brand new mobile specific site is created and perhaps tablet version too
  2. Responsive design:  the front end of the site is created in such a way that the layout of the site changes depending on the resolution.  This is generally achieved using a technology called CSS3 media queries, whereby visual elements have different styles applied based on the screen width.

How can I make my site mobile friendly?

There are a number of solutions to make your site mobile friendly.

  1. Create a brand new mobile version of your site.  When users access your site from a mobile device this new site will be displayed.  This option has the least impact.
  2. Modify your existing site:  If your site is well implemented it might be possible to adapt the CSS and html to a responsive design.
  3. responsive desktop designProbably the best solution is to re-implement your site using a modern CMS (such as wordpress) with a responsive theme, which means that your site will work on desktop, mobile and tablet devices in the future your site’s theme can change as technologies become available because wordpress is designed in such a way to keep the theming of a site separated totally from the content.

If your site is not mobile friendly, do not worry, you are not alone.  I would encourage you to consider the options above though going forward as smartphones with browsers are here to stay and if you share your content on facebook

Why do I need a Mobile Website? Responsive design, what does it mean?

web-statsThese days more and more people are access the web from devices such as tablets and mobile devices. Statistics I gathered from one of my websites has shown that of 26,214 visits to the site, 9,938 (37%) requests came from mobile devices, and another 2,022 came from tablet devices.  Therefore, of all the visits to the site almost half (45%) of the traffic is now coming from mobile devices and browsers other than desktop.  This is a huge change from only a couple of years back when 90%+ of requests would have come from desktop browsers.  What is more, the trend seems to be still on an upward curve, so within a few more years desktop browsing will most certainly continue to drop.

“Almost half (45%) of website traffic is now coming from mobile devices…”

With a change of this nature it’s important that your website can be displayed on mobile web browsers.  The simplest way to do this, and provide a consistent experience across multiple devices, is through a responsive design.

All responsive design really means is that elements of your website will re-organise themselves as the browser window gets smaller. This is achieved through aligning elements to float, just like an image that is aligned to the left of text within a word processor, the words will wrap and flow around the text.  With a responsive design aspects of the user interface are organised into blocks that can resize and drop beneath one another as the website resizes.

Another approach is to create a totally separate website using adaptive design.  This is generally a completely new interface, specifically built for mobile around the same content.  When someone accesses your website from a mobile device they get redirected to the mobile website. Most websites do not require this as mobile browsers are now capable of practically everything that a desktop can do with the advent of html5 and css3.

So, what are you options?  If you have an existing site that was developed previously it may be possible to upgrade to a responsive design without losing your content.  If you use a platform such as wordpress, you could get a new theme developed for example.  If your site is very old and you don’t have a CMS it may be more difficult, and now may be the time to make a move and upgrade.

If you are going for a bespoke design you could consider utilising a framework known as twitter bootstrap for example, or if using wordpress you could use one of their latest themes (2012 or 2013) as a starting point for developing your page.

The best advice is to keep it simple and clean, and allow high contrast text so that users can view your site in daylight.  Allow menus expand and contract on mobile devices so that users can get to the main content quickly and easily.

UTD Web Design is currently building a platform to allow small businesses create simple responsive sites.  If you are interested in finding out more contact me at cian@utdwebdesign.com. If you wish to upgrade an old site, design a new site or if you require some independent advice with no obligations. please do contact me and I’ll do my best to point you in the right direction.

Web Skin: ‘the Best of Waterford’ by Waterford Illustrator Lee Grace

backgroundI became good friends with Waterford illustrator Lee Grace a number of years ago.  We were both colleagues at Marla.ie and we got on like a house of fire from the get go.  It could have been our mutual love for Waterford, or maybe it was Arnie movies, but I guess it could have been our bizzare shared appreciation of Stan Bush’s music from the 1980s Transformers the Movie sound track that really cemented our friendship.  I mean the fact that someone else knew songs like Dare, and The Touch off was a real shocker for me.

Lee is a fantastic and accomplished graphics illustrator having produced graphic novels, high profile logos and brands through Marla, and other amazing professional and personal work. He has undertaken some pet projects for me over the years such as the UpTheDeise.com car sticker logo, the cover for a slang book I published a number of years back entitled ‘For Focal Sake – A 32 County Guide to Irish Slang‘ and he’s done some excellent volunteer work for the 1848 Tricolour Celebrations.  Next years branding will be based around his latest portrait of Thomas Francis Meagher.

I approached him a few months ago about a background for Waterford Web Design.  I sketched out a view of the county on an opened envelope and took a photo with my phone and sent it via email to him.  He said he’d knock something together for me…

When he sent the background through to me a a few weeks later I could not believe my eyes.  A masterpiece had been produced.  He had actually captured the essence of Waterford in one illustration.

Just a few features of the design to look out for starting from the bottom left, all of them being huge parts of Waterford’s identity and offering:

  1. A viking long boat complete with Viking on the River Suir
  2. Reginald’s tower, Ireland’s Oldest Civic Building
  3. The Clock Tower on the Quay
  4. The beaches off the east coast and the Metal Man from Newtown Head
  5. Surfer dudes on Tramore Beach
  6. Coumshingaun Lake in the Comeragh Mountains
  7. Ardmore and the west coast beaches on the right
  8. Towers from Ballysaggartmore near Lismore
  9. A golf course
  10. Waterford Crystal
  11. Waterford’s city bridge
  12. A hurley and sliothar representing sport in the county

Can you spot anything else???

Just wanted to say a huge thanks to Lee for illustrating this exclusive web skin for me, fantastic illustration work as always!  Lee is a man on top of his game. Please visit www.leegrace.com to see more of Lee’s great work.

Web design case study: The Irish Times

Web design is constantly evolving, taking new trends into account in order to ensure it offers the best services to customers. Finding inspiration for your own web design is important and for those looking to build a site which retains brand integrity whilst catering to the specific needs of customers, the redesigned website of The Irish Times is the perfect example.

What’s changed?

According to a report posted on their own website, The Irish Times has undergone a digital facelift in order to make it more accessible for users logging on using mobile devices. Changes have made it easier for users to access relevant parts of the site and here are some of our favourite new and improved features:

• More modern visual style

Cleaner lines and a smoother appearance make it far easier to know what you’re looking at and keeps content well defined. Good content and high quality journalism is at the heart of The Irish Times and the new appearance certainly emphasises this in order to retain the brand’s integrity.

More dynamic online tools

From live blogs to live news streams, The Irish Times has made sure that its online tools are up to speed and extended their availability. The benefit of this is the ability to stay on top of current information – something which is integral to the fast paced world of news and online journalism. The live blog is also great for promoting social interaction and sharing, something which can help boost the number of readers and extend the penetration of articles.

•New debate section

Working on the back of the dynamic online tools, the site is also introducing a new debate section intended to promote discussion between columnists, writers and readers. Common topics of politics, crime and social issues will all be up for debate with the site’s best columnist and opinion writers brought together to give a rounded view of issues which mean something to Irish readers.

Why’s it changed?

For those interested in the reason behind the change, the answer is simple: changing trends. The internet has evolved massively over the past few years and a report on the digital appetite of Irish customers compiled by Sky Ireland highlighted how mobile access and social interaction were key areas of growth for the internet market.

Sky Ireland, who provide varied broadband packages to Irish customers and operate in rivalry to other brands such as Virgin Media, found that more than half of those surveyed read online news articles whilst on the daily commute. Using smartphones and tablets, 51% accessed news sites on-the-move with a similar amount (49.4%) also checking into social media sites at least three times.

Combining these two facts together creates a clear picture of the situation surrounding internet trends in Ireland and makes The Irish Times’ decision to adjust their website more than understandable. With online journalism at its heart, social interaction encouraged through new tools and better accessibility for mobile devices, the paper is the perfect case study for effective web design which caters to emerging trends without sacrificing their identity.

A plea to the world from a web developer, stop using IE8 or previous

I’m making this plea on behalf of all web developers across the globe.  Please, everybody, remove or upgrade versions of Internet Explorer 6, 7, 8 and 9 to version 10 or better yet, there’s loads of other lovely browsers out there now, Firefox, Chrome, Safari and a plethora of others that you can install in minutes and they all work really well and are secure because they will upgrade themselves as new standards emerge.

Unfortunately, 15% of users out there are still using IE according to stats I obtained from traffic to my website slang.ie.  From approx 30K visits, almost 5K or them came from versions of Internet Explorer.  It’s still the third most popular browser with Chrome and Safari in positions 1 and 2 respectively and Firefox and Android in 4th and 5th place.

A huge shift has occurred but there are still some stalwarts out there stuck in their old ways and US POOR WEB DEVLOPERS HAVE TO PULL OUT OUR HAIR TO DEAL WITH THE FEW WHO INSIST ON USING OLD VERSIONS OF IE.

ie-usersThe graph on the left shows a break down of the 15% of users still using IE from versions 6 to 10.

Can you believe that 1% of IE users still use IE6?  Do these users still use dial up modems to connect to the internet too I wonder?  6% use IE7!!! guys, if you’re viewing the web with IE6 or 7 you’re missing a huge part of the experience.  Nowadays pages can be animated, include media as part of the HTML 5 standard, have loads of lovely graphics and effects such as rounded corners and drop shadows, and you’re using this clunky old technology that renders boxes and things in a different way than every other browser that read the W3C Standards document.

WHY? Because Microsoft’s Internet Explorer team were not interested in standards other than their own and they obviously enjoyed torturing independent web developers and designers like yours truly over the years.

I can’t believe 33% still use IE8 and 42% use IE9. Guys… hello… firefox, chrome and other browsers don’t have different versions, they just upgrade themselves automatically… please just upgrade to the latest now or switch from it completely.  For the love of god and all that is holy please do it so that our clients don’t ask us to support it any more.  I’m sure some developers have contemplated self-harm after trying to get the padding of a div to work consistently across various browsers.  You, the general public, can stop this madness today and protect our kind today with the click of a button.

Even wordpress, the ultimate content management system has a new theme called 2012 and it works beautifully with all browsers, if you modify it though, your changes won’t be seen on versions of IE8 and previous, unless you code up a separate .css file that specifically deals with the non-standards based shenanigans that one has to endure for a small percentage of people who obviously don’t even like the internet.

Anyway, apologies,  rant over.

If this post gets 1 billion shares I’m sure many many people will update or change to a different browser, so share it using the buttons below and who knows, perhaps you’ll save some poor developer like me a lot of heart ache going forward.

Even if one person upgrades as a result it will be worth it, for them.

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!

Don’t lose web traffic when moving/migrating website

This article might help you avoid and SEO disaster when moving / upgrading your website.

A client came to me last week disgusted that he had moved from no. 1 on google for his search term to nowhere after his website had been “upgraded.” He also noticed his traffic and leads were significantly down and was amazed that this could happen.

This can happen quite easily if you move from one platform to another, perhaps your old side used .htm pages for the various pages of your site e.g. contact.htm, services.htm etc.  When you move to a CMS like wordpress the new url for the same page might be /contact, /services etc. as the pages are generated dynamically and do not need the .htm extension on the file name.  The result is that Google had indexed your old files and when you moved it has to re-index the new pages and all the links and weight these old pages had are lost.

If you have employed the services a responsible and experienced web developer they will not miss this trick and they will add code/a file to your web site to redirect all these old urls (web addresses) to the new urls so that Google also knows that these new pages are upgraded versions of your old pages. The strategy normally taken is to place a .htaccess file on your web server with rules to perform a 301 redirect from the old page web address to the new address.

In addition to setting up redirects, the pages should be SEO optimised also to ensure that they are at least as good as the old pages.  Ensure titles are unique, headings are in place and content contains keywords etc.  Also ensure meta information is as before or better.

If you migrate to wordpress, there’s a nice little tool called Redirects, which essentially does the same job as a .htaccess redirect file and often works fine for small sites that are being migrated to the wordpress platform.

In conclusion, if you decide to upgrade your site, make sure that you ask your developer to ensure that they do everything in their power to ensure all your efforts in terms of promoting your site are not lost when they perform a site migration by putting in place a redirect strategy.

 

How Much Does a Website Cost in Ireland?

“So, how much does a website cost in Ireland?” I’ve been asked this question a lot by potential clients and the honest answer is, ‘how long is a piece of string!’ and depending on who you go to the costs can vary wildly.  I’m posting this really to give people an idea of what to expect and to understand what questions to ask when getting their site designed and the costs involved.

The question to be answered really is ‘How long will it take to build what I want?’ and this is what will dictate the cost as an agency generally charges based on an hourly rate / daily rate.

Hourly / Daily Rate

Most web agencies have this worked out based on staff. E.g. if a project is broken down into 2 days design, 3 days coding, 5 days content, the bill might be broken down separately as the hourly rates might be different according to skill levels required by the staff. In my experience you will get a daily rate of anywhere between €100 and €1000, depending on the agency you go to.  More often than not these will not be like-for-like as no agency with professional staff and bricks and mortar establishment could afford to hire their staff out at €100 a day.  Realistically, it will come in somewhere in the middle, just be careful of this.

My own feeling on it is €100 a day will get you a graduate level web designer, €350 a day will get you an experienced sole trader, €500+ will get you access to a professional within a larger agency.  Remember VAT will generally be charged also, so if you are a sole trader starting up and not registered for VAT, remember to factor that in as you won’t be able to claim it on a VAT 3 unless you are registered yourself.

Factors that affect price:

1. Design Quality: Some clients want a cheap and cheerful design, others want a slick professional look, others want a completely custom illustrated quirky site with all the bells and whistles.  You need to think about these requirements carefully as the perception of the site to your customers is critically important.  First impressions count.

Your options here are:

  • A template based website. This will be non-unique and can be purchased cheaply but  still requires customisation.  Guide time for template + customisation: up to 1 day
  • A custom designed but still relatively simple site design: 1-2 days
  • Top grade site design: 3+ days

Once the site is designed it needs to be converted to HTML + CSS and this can be tricky depending on the design quality.  In our experience you need to double the time taken to design the site to implement the CSS and HTML for the site correctly.

You might also require a logo, corporate branding etc.  If getting it all done together prices could be negotiated to your advantage.

2. Mobile Friendly:  Do you want a mobile friendly website?  If so then there are 2 options. a) Allow your website resize itself responsively using modern CSS techniques, b) create a separate mobile website using a technology such as jquery mobile.  Depending on the quality you desire, this can take as much time as desktop design.

3. Content Management System: Do you want to be able to update the content yourself.  It is my opinion that pretty much all sites should be content managed (unless you just want a holding page or the content will never be changed).  Why should you need to go back to your web developer whenever you want a simple update to the site.  There are a few options here:

  • Use an open source project such as WordPress or Joomla
  • Get a bespoke CMS developed
  • Use a content management system provided by your web host company
  • An eCommerce system

Bespoke CMS systems should be avoided in my opinion.  They do potentially allow for more flexible design but if you chose a system such as wordpress, it is future proof, has more features, has literally thousands of plugins and should in theory keep your costs down. It also has a built in blog/news system.

To install and customise wordpress should take in the region of 1-3 days to set up correctly.  The vast majority of time taken with any CMS is integrating it with the site design through the development of a site theme.

For other systems such as eCommerce systems, there is a bit more configuration involved so it could take slightly longer to set up correctly.

4. Bespoke Software Development

If you require something specific then there are times when bespoke development must be undertaken.  The cost of such development can be very expensive as there should be planning, development iterations and testing as part of the service. The time involved in this can only be estimated upon receipt of a software specification document.  If you can find an open source solution or something that fits your requirements off the shelf you should market validate your business in this way before making a very large investment in something that may not work.

5. Site Structure/Content Upload

The no of pages on your site and their complexity dictate the costs here.  Do you require custom graphics on each page, do you require photos/images.  Are stock images good enough or do you have your own professional images.

You are talking an hour or two per page in general and so the cost would be no. of pages X by hours involved + image / graphic design costs.  Stock images can cost in the region of €3 and €10 euro per image if purchased on a credits basis from well known stock imagery sites.

5. Search Engine Optimisation (SEO)

When developing a site, SEO should be considered from the beginning.  The site’s structure and pages should be created with keywords your customers are using in mind.  If the web agency does this for you, they will add another hour or two on per page uploaded to the site, and other work such as sitemaps, back links etc. may cost extra also.  If you don’t ask for this service you generally won’t get it by default. It is worth noting that wordpress has some excellent plugins for SEO, which is another good reason to chose this platform.

6. Hosting + Domain

This should cost < 100 euro for a decent package and a .com domain.  If you’re paying more than this you might be getting overcharged.

7. Other Features

Other things you should consider are getting analytics installed, integration with social media through like and share buttons, online ad campaigns on the likes of google adwords and facebook ads for example.  There’s also social media management if you want someone to run your facebook or twitter pages, however in general it’s better to manage this in house and perhaps get the right training.

7. Ongoing Support

A site should never be truly finished. If you want it to do better on search engines, convert more customers you should always be tweaking things.  Support can be given at hourly rates, and discounts in the form of bonus hours are generally applied if purchased on a retainer basis.  Ideally, you should, over time, be able to manage this in house.

Grand Totals

As you can see there are a lot of factors to consider so below I’ll give you 2 potential examples of cost:

Example 1: Straightforward site with 8 pages of content and no SEO

Design: 1 day
CSS+HTML: 2 days
Wordpress CMS Config: 1 day
Content Upload: 1 day
Stock Images: €50
Hosting+Domain: €100

Cheapest quote to expect: 350-500
Most expensive: 2-3K+VAT

An average charge might be approx. €1450+VAT for this type of site

Example 2: Top level design, mobile friendly, 50 pages of SEO optimised content

Design: 3 days
CSS+HTML: 3 days
Mobile Friendly: 3 days
CMS Config with SEO plugins, security etc: 2 days
Content Upload: 70 hrs
SEO: 50 hrs
Stock Images: €250
Cloud Hosting+Domain: €160
Support Contract: 1 day per month

Cheapest quote to expect: 3K
Most expensive: 15K+VAT

An average cost might be in the region of €7,500 for this type of website based on our hourly rate.

Please contact us if you wish to discuss your project.

Double Home Page Problem WordPress

Many of us WordPress users will have come up with the double Home Page problem.

If you are using WordPress to create a website often you want a static home page on the site and not have it default to the latest blog entry.  To do this you must log in to the admin area, go to setttings->reading and set a static page as your homepage.

Often times you will want to create this page and title it ‘Home’ however on most themes if you do this you will end up with two home pages.

To get around this, without editing the theme, you need to create a dummy static page that is hidden from public view.  Once this static page is created you must go back and edit the newly created home page and set its parent to this new dummy page.

And that should be it!

If you want to have your blogs appear on another page, simply create another static page (with no content) and again go to settings->reading and set the posts page to this page. You must do this before you make the dummy page private, however.