Web Directions South 2012

A big thank you to everyone that came along to the meetup last night, it was great to see everyone again!

This week was all about the Web Directions Conference and boy oh boy was there a lot to go through.

For those of you that are interested you can view the presentation online. It was put together using Reveal.js, using only HTML, CSS and Javascript. You can build it straight in a text editor, or if you want something a little more visual there is an online tool which will help you build it, RVL.io, as if you were using keynote of powerpoint.

Use the keyboard to move through the presentation, look at the directional arrows on the bottom right to see which way you can go.
Press esc for a full view of the slides, and press the s key to see the speakers notes.

Two of the key messages from the conference were….

  • The Future is now, stop waiting for hoverboards
  • Smart phones are taking over, your website needs to be ready

The future is now

We have been waiting for awesome hover boards ever since Back to the Future 2 came out and we’re still not there. We look at the Jetsons and want to know… “Where is my spaceship?” (although we ignore that the jetsons world was powered entirely by sprockets).

The fact is that we have the tools today to make some pretty amazing stuff. Combining two sets of existing tools will allow you to develop something that no one has thought about yet and send you (slowly and after thousands of hours of work) into internet stardom.

Stop waiting for the next big thing, start building things and be the next big thing.

Smart Phones are taking over

There was a huge focus on the tablets and smart phones being the space in which we will continue to access services from. The laptop and desktop will always have their place, but it’s the smartphone that is people are spending most of their time accessing the web.

If you visit any of the current NT Government Websites on a smart phone the chances are that you will find what you’re looking for, but it won’t be easy or pretty. There are two departments that have taken the plunge into responsive design, something which was a VERY hot topic during the conference.

The team at Captovate are keen to build more responsive sites and the guys at Dash Media are including responsive design as the default way to build their sites. Squiz has built a responsive design for Power and Water and the Department formally known as NRETAS have taken matters into their own hands and are using Twitter Bootstrap as a foundation for some of their sits including Parks and Wildlife.

So what else happened?

Glad you asked.

The Startup Kids, a night at the movies

Michael Hawkes shared “The Startup Kids“, an event that is being organised by who also runs the Tedx events in Darwin. You can find out more information about this event, plus anything and everything to do with Darwin Entrepreneurs at Entrepreneurs NT.

Stop! Hammer time!

Jon asked the question about detecting if a device was touch enabled and then offering gestures over buttons, or a reverse where you load in buttons when touch is not available. Corey suggested checking out Hammer.js

Tedx Darwin

Laura and Michael went along to the TedX event in Darwin and had nothing but awesome things to say. They highly recommend going through and watching the videos. One of our Web Standards members, Kishan, delivered this talk last year.

Speeding up Websites

This month we are lucky enough to get the guys from Dash Media to present.

Jon Hasslet is presenting today about the things that you should be doing on your website.

Why should you care about speed?

  • People hate waiting for things
  • not everyone is on the same connection
  • Google LOVES fast websites

What makes my site slow?

  • amount of data sent
  • number of requests that are sent
  • the order the files are requested
  • caching of static files
  • server side work for dynamic assets

How can I speed things up?

  • Combine all JS and CSS files – this reduces the number of HTTP requests and lowers the overal amount of data that is sent.
  • Minify – this reduces the white space extra content that is in the file
  • Compress – compress the files through gzip

Jon fires up two examples that we can see the difference of performances.

dev.jon.haslett.id.au/speed1

dev.jon.haslett.id.au/speed2

Mac Tool called Compressify that reduces the files.

Move your JS to before the </body> tag

Browsers wait until all of the javascript is loaded until it loads anything else, get it in your HTML document last.

Use a CDN

Everyone is using JQuery these days, so take advantage of the version running on Google Code so you don’t even have to download it again.  Duh!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

User Browser Caching

Grab a .htaccess file and make sure that the files are cached where possible.

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>
<ifModule mod_headers.c>
  <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch "\\.(css)$">
    Header set Cache-Control "max-age=604800, public"
  </filesMatch>
  <filesMatch "\\.(js)$">
    Header set Cache-Control "max-age=216000, private"
  </filesMatch>
  <filesMatch "\\.(xml|txt)$">
    Header set Cache-Control "max-age=216000, public, must-revalidate"
  </filesMatch>
  <filesMatch "\\.(html|htm|php)$">
    Header set Cache-Control "max-age=1, private, must-revalidate"
  </filesMatch>
</ifModule>

If you want a good .htaccess file grab it from HTML5 Boilerplate

Image size

Image Optim – I use smush.it personally but this is pretty freaking sweet!

Website Typography

It’s been all to hectic after the meetup so here’s a bunch on links to get going…..

http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography

http://www.typetester.org/

http://thehappybit.com/2012/03/flexible-css-typographic-scale/

http://letteringjs.com/

http://blog.typekit.com/2012/03/21/inscriptional-faces-from-adobe-type/

Tips

http://csswizardry.com/type-tips/#tip-04

http://coding.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/

 http://csswizardry.com/typogridphy/preview/
http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/

Random Conversations…..

http://bartaz.github.com/impress.js/#/overview

http://foundation.zurb.com/

http://tympanus.net/codrops/2011/11/09/interactive-html5-typography/

http://tympanus.net/codrops/2011/12/07/splash-and-coming-soon-page-effects-with-css3/

http://stuffandnonsense.co.uk/projects/320andup/

http://www.responsinator.com/?url=www.bostonglobe.com

2012 New Frontiers

The first meet up of 2012 was in my opinion one of the better meetups we have had.

There was not the usual presentation about Web Standards but instead a conversation around the important things we in the industry need to consider over the next 12 months, and how each of us were looking to tackle the challenges ahead.

It was great to see the regular faces of Bianca, Prue, and Kishan, and just as good to see a few fresh faces of Neil, Hedley, Jon, Steve, Jami and Alex.

Great group, different people with a wide range of backgrounds and careers but with a passion for the web in common.

^ Thanks Hedley!

The Topics

Without a presentation on the cards we talked about a LOT of different things. Let’s see if I can organise them into a few headings.

Smart phone / Tablet Apps

There was a lot of talk about the different kinds of apps that are available and how locally there isn’t much of a demand to get these apps developed for the local community. There’s a strong feeling that it’s better to spend the money on developing a better website to cater for all customers than spend the additional money to develop an app. The words Responsive Design were mentioned often.

Some of the helpful areas we identified included

HTML to app – Things like

QR Codes

Kishan talked us through a conference that he recently presented. At the beginning of his talk he handed out a tonne of QR codes that he creatd via http://www.paperlinks.com. If people were curious and scanned it they then had his entire presentation in the palm of their hand that they could then follow, and he was able to track exactly when and where each of the codes were scanned.

Awesome stuff Kishan!

While talking on this subject Steve Pegg also had a great idea for a print style sheet. If you include a QR code on the print style sheet then someone would be able to scan it and go straight back the the originating webiste. VERY clever stuff Peggy!

Tafe University Courses

Neil is a lecturer and the Charles Darwin University. I bumped into him during the 2011 Web Directions conference in Sydney and told him about our monthly meetups which has turned out to be a perfect way to find out what the industry is looking for in students coming out of Tafe courses.

We talked a lot about how you can fit a full understanding of the basics of web sites into a 40-50 hour course with 40-50 hours home work…… and came up with the conclusion that it’s simple not enough time.

There’s more to talk about before anything will change, but everyone agreed that it was more important for students to arrive to the workplace with basic skills but a more fundamental knowledge and understanding of how a website works.

What’s on in 2012

That’s the million dollar question. What are we doing in 2012….

There was some similarity about what people were interested in. These are probably going to be the topics over the next few meetups….

  • Responsive Design
  • CSS3 and practical application of the features in todays world
  • Social Media – breaking down the hype into business benefits
  • Usability of websites and testing techniques
  • Learn to build a site from scratch – getting away from the off the shelf templates
  • Location location location – using geo tagging and near field communication to improve websites and online experiences
  • HTML5 and the practical application of the features in todays world
  • Case studies for business benefits, not technology focus

Thanks again for everyone that came along and made the first meetup awesome.  Hope to see you back again next month!

Web Accessibilty WCAG 2.0

Live Blogging

WCAG 2.0 What, Why & When

Karl Davidson from Squiz starts off the meeting talking about the general reasons we should become compliant. Karl gives examples of Mary who suffers from partial quadrapelia and has issues navigating sites. Mary navigates through the use of two pens with rubber nibs attached to the end.

What is WCAG

  • Web
  • Content
  • Accessibility
  • Guidelines
  • Version 2.0

WCAG, a history

Started off as version 1.0 and focussed on visual disability.

  • 14 Guidelines
  • 60 Check points
  • 10 quick tips were developed to reach Level A…. but no one really though too much more into this.

We’re trying to overcome certain accessibility elements. Something like “vision impairment” is one element, but WCAG 2.0 is trying to expand on just the basic ideas.

Now WCAG 2.0 is more general, more disabilities and accessibility has been considered. It has been ratified by the UA Government (Sec. 508 legislation).

Disabilities considered

  • Visual Disabilities – blindness, low vision, colour blindness
  • Auditory Disabilities – consider the growing use of video and audio content
  • Motor Disabilities – the clickable areas of the site.
  • Intellectual Disabilities – developmental disabilities, attention spans, problem solving ability .
  • Seisures – specific guidelines have been taken into consideration.

4 key principals of WCAG 2.0

  1. Content must be Perceivable
  2. Content and controls must be Operable
  3. Content and controls must be understandable
  4. The site must be robust enough to be used with future user agents.

This is then made up from 12 guidelines within each principal. These guidelines then have a series of success criteria associated (around 8) which determine if you reach A, AA, or AAA.

The stick & carrot

Why become conformant with the standards? Well AGIMO is wielding a giant stick and they will smack you over the head with it if you don’t become compliant. Regardless of that, get the carrot and just become more compliant because your site will be better because of it.

WCAG 2.0 Compliance tool from Funnelback

Stuart Beil introduces Funnelback and gives us an overview of where they started and who their clients are. Amazing that Skype uses them as a search tool even though they’ve got Microsoft Bing available.

Stuart is talking about the compliance being not a one off fix. You need to keep a check on the site as the content is continually developed. Content editors come and go, they’re not always updating the content in the correct fashion.

The tool is currently running across 19,000,000 records in around 9 hours. 9 HOURS!

Caveats: Just because the tool says you are compliant, doesn’t mean you are compliant. You still need to make sure that links have correct titles, alt tags are related to the context of the image and not just that they exist.

The tool

Shows your history of compliance over time in a graphical format (line graph). You can have multiple site urls and the tool will seperate them into individual result pools.

Clicking through each of the site headings gives you an overview of that site, and allows you to drill down either to the overall failure (the language declaration) and shows every URL that is affected. Clicking on the lower level URLs gives you a link back to the W3C description for the issue and allows you to see exactly where in the html source the error is contained.

<insert typical live demo fail>

And we’re back again. The graph shows really clearly how everything is becoming more and more conformant. Stuart wraps up by explaining that this tool is something that will provide the NTG the ability to show where they are at and provides an ability for individuals to clearly see and understand the changes that are required.

ReadSpeak

Over 7000 Installs around the world. It was created and developed by a blind person to make surfing the net cheaply and easier.

A lot of talk has been around accessibility for disability, but accessibility is much more than that. It’s about making your website content available to everyone at any stage they need it.

Different needs to text to voice

General Accessibility

Elderly
Visually impaired
Dyslectics
English 2nd Lanuage
Poor literacy

Situational Accessibility

Accessing content through a small screen
Multi tasking

Learning

Elearning
Foreign Languages
Revising on the go

why not just use screen readers

Only 0.1% of people have screen readers, but more than 20% would benefit from the text to speech option.

ReadSpeaker ticks all these boxes. It works across PC, Mac, Linux, iPhone, Android, Symbian, FF, IE, Chrome, Safari, Opera, click and listen, easy upgrade path. Nothing to download. Nothing to install. Listen to it on the fly (streaming) or download the file to listen later.

How does it work?

  1. User visits your site
  2. Click on the listen link (brought in via JS like Google Analytics does) which sends the page content to the servers in Sweden
  3. ReadSpeaker server speech-enables the content on the page
  4. Audio file is sent/streamed back to the user

This all happens as a Software as a Service option (Saas). Reduces your bandwidth costs and doesn’t use your web server processing power.

The tool will speech enable mobile apps (iphone and android), websites, and PDF documents.

Case study: Department of Health and Ageing

Pricing

  • $1485 setup fee
  • $2985 licence fee

Caveats for ReadSpeaker

While I appreciate this is a pretty good tool, I disagree with its pitch to improve the access to content via mobile devices. Seriously. Go responsive.

Justin (@jelieud)

Justin is talking about the things he finds annoying when surfing the net as a visually impaired user. He can still see partially, so uses a high contrast view and expands the text.

Most annoying part of this is that it breaks most designs and makes the content unreadable. Although things like JAWS (and readspeak) is available he hasn’t bothered to learn it yet because he still has use of some vision.

Make sure that everything can be seen even at zoomed level.

Easy Reading: Compare CSS Rendering, Can I use it, LWS CSS3

Comparrison Layout of Engines (CSS) – This Wikipedia article compares the different functions from CSS versions and which rendering engines support (rather than looking at the browser).

Wikipedia Compatibility Table CSS

Wikipedia Compatibility Table CSS

Can I use – This is a great tool for you to check the support for the HTML5 and CSS3 elements you are looking to use. Start here and build up a list of what you would like to use, and see where you’re going to need you graceful degradation.

Can I Use Compatability Search

Can I Use Compatability Search

CSS Live Blog from London – This comes from our fellow Web Standards Organisation from London where they had three excellent speakers discussing CSS3.

They usually film each of the sessions so once that is put up online we’ll post that for you to see.

  • Dissection of New Twitter — Makayla Lewis @maccymacx
  • Transitions, Transforms, Animations — Inayaili de León (@yaili)
  • The CSS3 of Tomorrow — Peter Gasston

Usability & Responsive Web Design – Meetup #3

This week we were fortunate enough to have two presentations on Usability and Responsive Web Design.

You can flick through the slide share content below, and if you have any questions post them below in the comments and Ian or Justin will be sure you answer them for you.

Usability

Responsive Web Design

“The Way is shaped by use,
But then the shape is lost.
Do not hold fast to shapes
But let sensation flow into the world
As a river courses down to the sea.
—DAO DE JING, section 32, “Shapes”

Where did responsive design originate?

2. Blank canvas (http://www.flickr.com/photos/carabanderson/3033798968)

  • we’re conditioned to think the way of the graphic designer, or artist. When an artist starts a new piece of work he or she chooses very carefully. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
  • we always start our web design with a blank canvas, and no sooner have we got this page do we start looking at the header, footer, and the number volume that need to appear on the site. We set the minimum width of the smallest monitor that we want to design for, probably 960 pixels because that also fits nicely into a grid. This gives us boundaries to begin building the site, because after all boundaries are great because the give us limitations and provide focus. Can you imagine the highway with no lines painted on the road? Or a game of football without markings on the pitch? Or houses without your allotted land parchment?
  • I know that wer’re all good designers here, but often we will already be thinking about colors, images, but we skip the bit where we review the content that needs to appear on the site and how that fits into the design. We bypass the typography and natural hierarchy of the site and loose the natural flow that our h1 h2 h3 can provide us.
  • What is worse for us is that we have no idea about the canvas that our work will be shown on. We are at the mercy of the user and the medium they decide to use to view what we create
  • .

NEXT SLIDE

But what happens when that occurs and we get the dimensions wrong? We run the risk of the website being clipped and not showing the full extent of what ins supposed to be seen. (include a picture of a scene that has horizontal and vertical scroll bars).

The ingredients

So what does it take to create a responsive design? Speaking purely in terms of front-end layout, it takes three core ingredients:

  • A flexible, grid-based layout,
  • Flexible images and media, and
  • Media queries, a module from the CSS3 specification

NEW SLIDE

  • target ÷ context = result
  • This this the key (it is the secret)
  • Setting a flexible typography will require a little bit of maths / queue falling asleep for half the room /
  • It’s simple though.
  • Set the body to 100% so that you’re using the browser settings (this is usually 16px anyway) and then look at the size you want your element to be.
  • If the ideal size is 24px then we do 24 /16 = 1.5em

BAM!!!

We then do the next element within the section, but this time it’s based on the parent context size, not the body.

If you’re next element is 11px then you do 11 / 24 = 0.458333333333333

now before you round, don’t. Browsers will round that themselves to a suitable size, so we want to give them as much information to make that computed change as possible.

WHEN SETTING MARGINS AND PADDINGS

When setting flexible margins on an element, your context is the width of the element’s container.
When setting flexible padding on an element, your context is the width of the element itself. Which makes sense, if you think about the box model: we’re describing the padding in relation to the width of the box itself.

IMAGES

It’s one thing to work with a flexible layout based on coulombs and headings, but what about the images that we use to add some visual queues to our content.

Enter
max-width: 100%;

this rule allows our image to size to it’s maximum size, or the width of the containing element… Which ever comes first.
img,
embed,
object,
video {
max-width: 100%;
}

There are some issues with this though, and as usual they come about from the windows/ie6 variety, but I’m not going to go into the detail of those at this point.

You do need to watch out for ie7 rendering image sizes however, as they do it with more artefacts than Indiana Jone’s closet.

Simply download the script (available at http://bkaprt.com/rwd/16/) and include it on any page with flexible images; it will scour your document to create a series of flexible, high-quality AlphaImageLoader objects.

BACKGROUND IMAGES

Has anyone ever had to get two columns to appear as if they’re supposed to be the same height? I know I had to on a recent project with Julie. If you did you probably used Dan Cederholm fix by repeating the background graphic to create a “faux column” effect.

But that’s fine for a fixed layout, but what about our responsive design?

.blog {
background: #F8F5F2 url("blog-bg.png") repeat-y 50% 0;
}

There is a CSS3 property called background-size (http://bkaprt.com/rwd/20/), which would allow us to create truly flexible background images, but—you guessed it—browser support is still pretty immature

Scott Robbin’s jQuery Backstretch plugin (http://bkaprt.com/rwd/21/) simulates resizable background images on the body element.

NEW SLIDE – W3C had an idea

On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the “font-size” property is useful both for screen and print media. The two media types are different enough to require different values ues for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.

MEDIA TYPES

all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv.

MEDIA TYPES EXAMPLE USAGE

ALONG CAME THE SMALLER MOBILE DEVICE

WHAT IS HAND HELD

(show picture of lots of mobile phones)

BE GONE MEDIA TYPES HELlo MEDIA QUERY

ANATOMY OF A MEDIA QUERY

(anatomy high school picture) then the next slide should have

@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}}

Now, every media query—including the one above—has two components:

  1. Each query still begins with a media type (screen), drawn from the CSS 2.1 specification’s list of approved media types (http://bkaprt.com/rwd/26/).
  2. Immediately after comes the query itself, wrapped in parentheses: (min-width: 1024px). And our query can, in turn, be split into two components: the name of a feature (min-width) and a corresponding value (1024px).

WHAT DOES THIS MEAN?

(this should appear under the previous slide as a leading chance to explain the below information)

Think of a media query like a test for your browser. When a browser reads your stylesheet, the screen and (min-width: 1024px) query asks two questions: first, if it belongs to the screen media type; and if it does, if the browser’s viewport is at least 1024 pixels wide. If the browser meets both of those criteria, then the styles enclosed within the query are rendered; if not, the browser happily disregards the styles, and continues on its merry way.

WHERE DID I PUT THAT THING?

Or you can attach them to @import statements:

@import url("wide.css") screen and (min-width: 1024px);

I prefer @media because it keeps the CSS sheet numbers down, there for requests and there for load times.

DOES SIZE MATTER?

The age old question, and in this case (as I’m sure a few others) Yes it does.

The question is how does it matter
Here are two quick guidelines that helped me sort it out:

In the spec’s language, every device has a “display area” and “rendering surface.”
the browser’s viewport is the display area; the entire display is the rendering surface. So on your laptop, the display area would be your browser window; the rendering surface would be your screen.

So if your laptop is 1200px in width and your browser is open 50% of the screen, then;

RENDERING SURFACE = 1200px
DISPLAY AREA (viewport) = 600px

you can serve CSS conditionally to viewports above 1024 pixels by writing (min-width: 1024px), or below 1024 pixels with (max-width: 1024px).

Include this table
(http://bkaprt.com/rwd/28/)

WAIT – THERE’S MOAR

Chain conditions together so that you can even better target specifics such as width and orientation.

@media screen and (min-device-width: 480px) and (orientation: landscape) { … }

Be warned though, iPhone iPad example… Moral is test for specific devices, do not assume just because thou might be able.

BROWSER SUPPORT

what would anything in the web world be without the typical “it works in everything, well everything that was made in the past 5 years”

There are two types of fixes for these issues.

css3-mediaqueries.js (http://bkaprt.com/rwd/37/)

Now this does come with some performance issues as the script will look at every {} to determine where the media queries start and end.

Another script, respond.js, is a faster work around however it does mean that you need to put a little extra work into your CSS…. and by work I mean /* styles */

At the end of each of your media queries you simply add the following comments
@media screen and (max-width: 768px) {

}/*/mediaquery*/

@media screen and (max-width: 520px) {

}/*/mediaquery*/

Javascript : respond.js (http://bkaprt.com/rwd/38/)

CONTEXT OF THE MOBILE PHONE

getting away from the code for a whole I wanted to reflect on the application of responsive design. While responsive design is an amazing option for web developers to offer up different layouts and designs for different devices and sizes, it certainly is not the answer in every situation.

You could easily code up an entirely two different sites in the HTML markup and set display:none; for the mobile version when viewed on desktop size screens, and switch them in the media queries.
Possible, but not a great idea. You’re making both users download a whole bunch of extra markup that simply doesn’t matter, and that’s just not cool. Uncool. UNCOOL!!!

In these cases it’s better to offer two completely separate solutions and rely on some server side of JavaScript based redirection.

MOBILE FIRST

http://bkaprt.com/rwd/47/ (include an excerpt of this article)

There is a school of thought that rather than break a design down from the full size, we build it up from the base level. This is a great way of looking at things because it forces you to take stock of the content and decide what is most important on the site. In a linear environment there is no “this is as important as the that on” because there IS no equal. (insert a picture for the slide of a row of kids shortest to tallest).

SOME SIZES FOR YOU

320 pixels

For small screen devices, like phones, held in portrait mode.

480 pixels

For small screen devices, like phones, held in landscape mode.

600 pixels

Smaller tablets, like the Amazon Kindle (600×800) and Barnes & Noble Nook (600×1024), held in portrait mode.

768 pixels

Ten-inch tablets like the iPad (768×1024) held in portrait mode.

1024 pixels

Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays.

1200 pixels

For widescreen displays, primarily laptop and desktop browsers.

TESTING

there is no substitute for testing on the actual devices, but if you don’t have them then you can check out web developer tools. In fact, set them up as presets for you to push them through.

If youre taking it seriously, i.e. All your business comes online, then check out this article

A List Apart: http://bkaprt.com/rwd/50/

Microformats, Online Payments and Typography

These were the topics that we talked about during the second Darwin Web Standards meetup.

Microformats

At the last meetup we talked about Microdata and how that the implementation of this feature will go a long way to making a more semantic web. The basic concept is that you can take a chunk of information, like a series of event listings, and apply Vocabulary declarations (for Microdata) or specific class attributes (for Microformats) and turn the information into something that a machine can understand.

This week we took a look at a few real world examples including:

In the past week I noticed that Microformats are much more common than Microdata, and during that quest for knowledge came across the FireFox Addon – Operator. The add on is activated when you visit a page that contains Microformats (doesn’t work for Microdata) and it allows you to add events directly to your Google Calendar. Try it out. It’s Cool!

We have convinced, hopefully, Ciaran to head off and add these tags to his own site and tell us how he got along at the next meet up.

Online Payments

As you might have seen from our last post we had a question come through from Bianca about Online Payment facilities. Peter came back with a fairly detailed answer which we discussed during the meet up as well as looking at a range of providers.

  • Business CatalystFully Functional – Michael Hawkes from Captovate mentioned these guys as one of the top shelf options when it comes to ecommerce requirements.
  • Mal’s EcommerceFully Functional – Ian Symonds from Dialog mentioned Mal’s ecommerce as an other end of the scale alternative to business catalyst.
  • ShopifyHosted Shop – Justin Avery shared the next few. Shopify offers an AMAZING competition each year.
  • BigcartelHosted Shop – Very simlar to Shopify
  • EtsyHosted Shop – Simlary to Big Cartel but is more Artsy
  • EventbriteEvent Management – There is very little customisation to the pages on offer here, but handles everything else you might need around running an event.
  • EventarcEvent Management – Richard from Captovate mentioned this as one he has used before. Sounds similar to Eventbrite but allows for much more customisation of the pages.

Typography & Responsive Design

  • EM Calculator – EM’s are tough to keep track of, especially as they’re worked off their immediate parent rather than the root EM (unless you want to try ‘rem‘.
  • Typekit – Add a line of code to your pages and choose from hundreds of web fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.
  • Font Squirrel – If you’ve already got the fonts you want to use then this tool is for you. Simply upload your fonts and you get the .ttf, .eot, .woff, .svg conterpart and some example CSS to get you going.
  • Google Fonts – Google come up with yet another great free tool with their own font service. Don’t worry about hosting your own, get it from them
  • Cufon is something that Richard has used before during one of his client implementations. It’s a bit older than the others, but it’s all horses for courses
  • Nice Web Type has a great list of tools for getting started with web typography. It’s not just about the fonts!
  • IAResponsive Design – Information Architects do an amazing job of responsive design.
  • If you’re after a little bit more information about Typography then I highly recommend you picking up the 5 Simple Steps book Designing for the Web.

Vacancy: Web Officer A05 $63k – $67k

Department of Housing, Local Government and Regional Services has requested that applications be forwarded directly to the agency contact office.
Click here for a full description (PDF)

  • Vacancy Closes on: 27 May 2011
  • Vacancy Number: 11003
  • Vacancy Name: Web Officer
  • Level: Administrative Officer 5 ($63 957 – $67 288)
  • Location: Darwin
  • Agency: Department of Housing, Local Government and Regional Services
  • Section: Corporate Communications
  • Vacancy Type: Temporary less than 6 months
  • Description: Temporary vacancy to 01/08/2011. Coordinate the development and maintenance of the department’s website and supporting standards, policy and procedures in accordance with stakeholder requirements. See attached flyer.
  • Vacancy End Date: 1 August 2011

Online Payments

1. Avoid paypal. People hate using it. It will deter sales. It takes ages to get paid. The fees are high.

2. You need to get a online merchant facility attached to your bank. Fees are usually around $600 a year + 1% of sales. You need this regardless of whether you use a third party gateway or not.

3. The bank will generally supply an SDK so you can write a payment script, with code examples for php, asp, .net etc.

4. Once your site is built, the bank will check your site to see that it adheres to security standards. You usually require a dedicated ssl – around $100 – $200 a year to be installed and hosted on your server. Some banks will also check you’ve covered other practices like privacy, TOS etc.

5. If you don’t want to write a custom script, most shopping carts will have payment third party gateway integration eway, camtech. There are overheads associated including annual fees and % charges. However you don’t generally require an SSL, but you should have it anyway if you’re capturing private data (peoples contact details etc).

6. Never store credit card information. If you install an online cart system make sure you hide it by using SEF urls wherever possible, or robots.txt to block non-sef cart descriptors from google. This might save you getting trolled or haxed.