Category Archives: CSS & HTML

Comma separated list of counties in Ireland

Here’s a comma separated list of the 32 counties in Ireland in case you need them for a spreadsheet, for code or whatever.  Cut and paste away…

Antrim, Armagh, Carlow, Cavan, Clare, Cork, Derry, Donegal, Down, Dublin, Fermanagh, Galway, Kerry, Kildare, Kilkenny, Laois, Leitrim, Limerick, Longford, Louth, Mayo, Meath, Monaghan, Offaly, Roscommon, Sligo, Tipperary, Tyrone, Waterford, Westmeath, Wexford, Wicklow

 

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.

WordPress 2012 Theme Issues with IE8

Unfortunately when developing a responsive theme with WordPress for the real world you have to consider compatibility issues with IE8.  Most of the standard stuff such as rounded corners, drop shadows and the like degrade gracefully.  OK the user won’t have the experience that browsers get when using a HTML5 compatible browser but at least the site will still function as before.

IE8 and previous versions are the odd browser out, the age old padding issues are still there and lots more funky things happen as compared to updated standards based browsers.

Anyway, enough of the woes.  Generally, when developing a responsive WordPress site it’s a good idea to start with an existing theme.  Personally, I think the 2012 theme is a great place to start as it covers most of the bases and will be part of the wordpress platform for the next few years at least and thus will be supported and patched as necessary.

When developing a theme generally the items that are styled are heading, footer, background, page, posts, widgets and so on.  Of course the other item that is commonly styled is the menu or nav bar.

If you are new to the wordpress 2012 theme and you do all your styling within style.css you’ll have no problems updating the nav style with background colours, textures, colouring links and their hover equivalents and it will all render perfectly until you or your client opens the site in IE8 or previous.

If you’re like me and have the latest version of IE you can see how your site will look on IE8 and previous versions by hitting F12. Once the developer tools window opens you can select the browser mode and set it to IE8.

After putting effort into styling a menu, you will notice in IE8 and below that the menu style looks like the default menu style.  This is becuase a separated style sheet is loaded up on versions previous to IE9. This stylesheet is located under css/ie.css.

Unfortunately you need to style up the menu again within this file using the changes you made to the menu styles under style.css in the root folder.

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.

Internet Explorer no Longer Top Browser

For as long as I have been checking statistics for websites, which is over 15 years now, Internet Explorer has always been the most used browser worldwide, without exception.  In fact maybe 7-8 years ago I would estimate it had well over 90% of the market share.

In recent years, several competitors have come along, Firefox & Chrome in particular.  Of course Safari has always featured because of the Apple following, however the champion of the ages has always been Internet Explorer (even with all the flak it received over the years because of its interpretations of internet standards, particularly CSS). That is until now.

The game is up.  Their rule is over. The monopoly has ended.

For the first time in my professional career there is a new king of the hill, a new champion of the ages and that is Google Chrome!!!

Following are the statistics from Google Analytics for one of my websites (www.slang.ie – Irish Slang Dictionary) from this morning, the 19th of April 2012.

Internet Explorer No Longer Top Browser

Internet Explorer No Longer Top Browser - Stats from Slang.ie

Slang.ie yields a good sample set because of it’s generic nature.  Most people find the site through search and come from various devices and locations (approximately 50% from Ireland).

As you can see from the Pie Chart above, Internet Explorer has fallen to second place behind Chrome which now has a significant 27% market share.

Internet Explorer is only marginally ahead of Safari (which is available on ipods, iphones, imacs, macbooks etc. etc.), by less than 1%

Firefox comes in next at almost 16%, which is 6% lower than Safari and this is followed by Android browsers significantly lower at 5.42%.

Compare this with the same period 3 years ago:

As you can see from the above Internet Explorer and Firefox are the biggest losers with IE down a whopping 50% from 48% of the total to 24% with Safari and Chrome gaining most significantly up almost 300% and 250% respectively. Based on this growth it may not be long before Safari is top dog???

I can’t really stress enough the significance of these changes, we finally have a competitive browser market with some really fantastic alternatives. From a consumer point of view this is very advantageous, because it means these companies will duke it out to provide the best features possible which will result in better security, more efficient downloading, faster browser experience, less bugs and so on.

Which browser do I use? To be honest, all of them. As a web developer I need to test clients websites on as many browsers as possible including mobile browsers.

My current favourite, probably due to habit at this point is firefox.  The reason I like this is down to a tool called firebug which allows me to analyse html and css quickly.  Similar tools are available on the other browsers and I do use them but I’m comfortable with firebug. My biggest gripe with Firefox is that it can eat up memory but again that’s probably down to me being lazy and having 50 tabs open at any given moment.

I do use Google Chrome quite a lot, it’s very clean, which is great for screenshots of websites and it also does not have separate input box for inputting search terms and urls, which makes a lot of sense.  My favourite feature is the incognito search because it allows me to perform searches without it knowing anything about my preferences so that I can get a true indication of a websites position on the search engine results page (SERP).

Obviously on apple devices I use Safari, I’d be lost without it on the iPhone.  I am not currently a macbook or imac owner so I can’t offer much comment on Safari’s features on desktop computers however.

Internet Explorer is by no means dead however, it is still used by a significant number of users and always will I guess.  Recently they have added developers options which are really great, you can view websites as they would look on previous versions of IE and the javascript and css/html analysis features are vastly improved on previous versions.

So which browser will win out in the end?

I guess Google have a nice way of promoting their browser across all devices so if they do produce chrome for all the devices out there they should continue with their trend of market dominance in this area, however don’t count out the others, it’s all to play for at this point.

About the author: Cian Foley is a web developer based in Waterford Ireland, having worked in Telecommunications research for 10 years, Cian brings highly technical knowledge to local businesses wishing to build an online presence. Cian currently runs the UTD Web Design Agency.

Div float problem in Firefox – Background content not automatically resizing

I’ve had this problem several times and each time it catches me out so this time I’m blogging about it so I don’t forget myself. Sometimes designers need to arrange divs into columns whilst allowing the page to grow vertically based on content in these columns.

A problem can happen in Firefox when divs are floated left and right, which is not an error in rendering it must be said but a problem that comes from an expected behaviour.

Sometimes when you float divs the containing element does not automatically resize with the expanding inner divs. This is because the divs are outside the normal flow of the document and the browser tries to float text around these divs.

To fix it is simple however,

Basically what I do is create an outer div called container. Within this container I place the two floating divs and finally I place a div at the bottom of these to clear the floats.

Here’s the code, hope it helps someone out there:

<div style="width: 800px" >
<div style="float: left; width: 480px; margin-right: 40px">Left Content</div>
<div style="float: right; width: 280px">Right Content</div>
<div style="clear:both">&nbsp;</div>
</div>

Make Submit Button an Image (HTML FORM)

Often you might want to replace the standard sumbit button on a html form with an image.

This is a very simple thing to do.

Instead of:

<input name="submit" type="submit" value="submit" />

insert:

<input alt="Search Button" src="image.jpg" type="image" />

Here is an example of such a form:

<form method="POST">
<input name="searchtext" type="text" />
<input alt="Search Button" src="search.jpg" type="image" />
</form>

Centering a Website – Cross Browser

Most sites these days are centred and have a fixed with be it 800, 1024 pixels wide or whatever.  If any of you have used divs and css and tried using standard centering you might have, at one stage or another, scratched your head while viewing it on different browsers.

Let’s say we want a webpage with a width of a nice round 1000 pixels. To do this we might create a new div within the body tag called page:

<body>
<div class="page">Content goes here<br/><br/><br/><br/><br/></div>
</body>

In order to centre this on IE7 and less we simply set the width in the div and in the body tag set text-align to center i.e.

body
{
 text-align: center;
}
.page
{
 width: 1000px;
 text-align: center; /*don't forget to reset alignment for child elements*/

}

On IE8+, Firefox and other browsers this is not correct behaviour however and they will left align the inner div, therefore we need to centre the inner div using the margin tag by setting it to margin: 0 auto e.g.

body
{
 text-align: center;

}
.page
{
 margin: 0 auto;
 text-align: left;
 width: 1000px;
 background-color:red;

}

By specifiying margin: 0 auto and by setting the div’s width, the browser can calculate how much distance to place between the left side of the div and the left margin of the browser window.

So there you have it, simple and effective and cross browser compatible.