webpress.ie

CSS has been around for over 10 years now, long enough that we can stop talking about it like it’s the new kid on the block. There were are a number of frustrating thing about CSS that have been addressed by later version – now at CSS Version 3 – but many of these improvement have not been taken up as browsers simple weren’t ready. Well they are getting there so in this article were going to look at some of the features of CSS 3 that we all need to get used to using.

Selectors

The idea of selectors is to target HTML elements without needing Classes OR IDs

Syntax

* [att^="value"]

Matches elements to an attribute that starts with the specified value.

* [att$="value"]

Matches elements to an attribute that ends with the specified value.

* [att*="value"]

Matches elements to an attribute that contains the specified value.

Example

a[title$="cats"]

{

background-color: red;

}

Why bother?

They cut down on code

Combinators

A combinator targets all siblings of an element that has the same parent. For example, to add a red background border to all spans that are a sibling of a particular div

div~span {
Background-color: red;
}

Not supported in IE 6!

Pseudo Classes

These are a pretty cool set of classes. E.g.

:nth-child(n) Allows you target elements based on their positions in a list of child elements. Could be used for making striped rows. So if you want to match a group of two elements after the forth third, you can simply use:

1name="code">:nth-child(2n+3) { background-color: #ccc; }

Theres a bunch more too!

::selection lets you target elements that have been highlighted by the user.

RGB and Opacity

RGBA lets you set the colour and opacity of an element. There is already an opacity command but it targets the parent and all its children – not just the one element.

Multi Column Layout

This is an important one if you ask me. This allows you have multi-column layouts without having to use multiple divs.

.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}

Multi Backgrounds

Apply multiple layered backgrounds with CSS3. Here’s what it looks like in shorthand.

div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}

Word Wrap

word-wrap stops long words from overflowing.

Text Shadow

Exactly how it sounds, a drop shadow on text, and the CSS looks a bit like this.

.signup_area p {
text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

@Font Face Attribute

@font-face allows you use any font on your site by making it downloadable. It’s a major contentious issue with font foundries very concerned but a solution is being worked on. It looks like this:

@font-face{
font-family: ‘DroidSans’;
src: url(’../fonts/DroidSans.ttf’) format(’truetype’);
}

Border Radius

Added curved corners to HTML elements without using background images.

h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

Border Image

Use an image for the border of an element. Something like this:

Box Shadow

Add shadows to HTML elements without background images.

#content .post img {
border: 6px solid #f2e6d1;
-webkit-border-image: url(main-border.png) 6 repeat;
-moz-border-image: url(main-border.png) 6 repeat;
border-image: url(main-border.png) 6 repeat;
}

Box Sizing

Legacy browser can interpret boxes sizes (padding/height) in weird ways. The box-sizing property lets you specify how the browser calculates the width and height of an element

Media Queries

This these let you define styles depending on the screensize. So if the screensize is below 500px the navigation might appear in a different location. Or something.

Speech

specify the speech style of screen readers.

It has become more and more common for web design and marketing companies to settle in Dublin’s surrounding counties of Meath, Wicklow and Kildare. The exodus is due to high rent prices in Dublin and that fact that they (the companies) not are not required to be available face to face as much as some businesses. Jobs are usually bigger meaning just a few projects will keep a design company busy and stationary. You will find Tinman Web Design at Web Design Meath

The Nielsen Group of Jacob Nielsen fame have been hard at work testing users on the mobile web. They have found that its about as easy to use as the “normal” web was was about 15 years ago. The average completion rate for tasks on the mobile web was 59% compared to 80% on a regular PC. “Observing users suffer during our sessions reminded us of the very first usability studies we did with traditional websites in 1994,” said Nielsen.

Success in the test was measured by how long it took to complete and whether they were successful. There were a range of tasks from the very specific (cinema lookup) to general information gathering tasks. The big obstacles to completions were:

• Screen size too small
• Typing slow and difficult
• Delayed downloads
• Website not designed for the mobile web

Bigger phones performed better with the iphone scoring 75%.

On sites designed for the mobile web, tasks were completed 64% of the time, a decent improvement.

Neilsen’s conclusion is that businesses should build a mobile site if they can, but it should link to the main site. Nielsen also says, and showing that hes well plugged in, that task specific apps will provide many web services on the mobile web. He must have an iPhone!

Say the words “online store” and a small piece of me dies. Such is the spectre of taking on an ecommerce project. As well as other things, a lot of this upset come from the challenge of figuring out what web payments platform to choose. For developers and store owners alike it is very difficult to make a really informed decision due the depth of knowledge need about each platform in order the compare them. Theres a lot of factors involved! Picking the cheapest platform isnt aways wise – you often end up overspending on development if that platform is particularly tricky. If only someone would create a website that provides information on the different Web Payment providers in Ireland. They could call it  WEBPAYMENTS.ie. The site could:

• Provide information on web payments providers
• Compare web payments providers
• Allow for discussion through a developer forum
• Blog about movements in the web payments landscape

Well folks, WEBPAYMENTS.ie exists and it does all those thing. So no more moaning!

In April Ireland saw the launch of the Google Local Business Centre, AT LAST. If you search for a service and in the search results you see a wee map with an A-J of businesses alongside, your looking at the GLBC, also know as the 10 Pack.

The problem before was that when you searched for “Web Designer Dublin” you got up all sorts of rubbish including the Wikipedia page for web designer or maybe a link to the Web Designers Association (the what?). So when Google thinks your probably looking for a service it puts in the GLBC module directly after its sponsored links but above the organic links.

How do you get listed on the GBLC
The good news it its free. Signing up is quick and you can do it here:
www.google.com/local/add
After you sign up Google will post you out a code to verify your address. Then you should be up and running.

What the drawback?
Well, its the LOCAL business centre so you will only show up for your local area wheather that be Dublin, Meath etc. If you have various branches you can submit them all no problem.

In conclusion

Every business should be signed up for GLBC period. Google have really come through here as if you think about it this free feature is in direct competition with their Adwords/Sponsored links. So Kudos to Google. They walk their moral line pretty well and as long as they keep it up im not likely to jump on the next search engine bandwagon that actually works. (BING im told doesn’t work!).

I plan to write a follup article soon about how best take advantage of GBLC. Watch this space.

Google Wave Is: A browser based application that brings together Email, Instant Messaging and Documents allowing to to reply to email type messages in IM style – and IM type messages email style (twitter-esqe). You can also see each others changes as they happen, plus bring in photos, video, maps and more. A thread of conversation is called a WAVE.

Here what Googles  Lars Rasmussen had to say: “We think of email as a successful open protocol, But we think that with the advances in computers and all the experiences that have been made with different types of communication, can do better. Google Wave is our suggestion.” So heres Google comparing it to Email, other have compared it to Sharepoint. Personally… I like keep email at arms length so I dont see myself substiuting email for this more collaboarative version. Mostly I just dont need to collaboarate! I see Google Wave, for now, as a real time conferencing/ collaborative work platform. That not to put it down! I dont use Google maps every day but its still useful as hell. And I probaby wont use Google Wave every day but it probably will given the number of people with Google accounts these days.

If you ask me, whats really happening is that Google are lining up to take on Facebook. If you think about it GW has all the bits in place to turn on a stomping social network.

iPhone has become a web designers best friend with the release of FTP-On-The-Go, a program that allows you download, edit and reupload files from an FTP servers. I got to test it in the field when I received an email (on my iphone) from a client who has noticed an error e on a “just launched” website. FTP-On-The-Go to the rescue.

Its basic… and web designing on a hand held could be so much better with a client side browser and toggle….BUT FTP-On-The-Go is a great start.