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
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.
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!
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).
Seisures – specific guidelines have been taken into consideration.
4 key principals of WCAG 2.0
Content must be Perceivable
Content and controls must be Operable
Content and controls must be understandable
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?
User visits your site
Click on the listen link (brought in via JS like Google Analytics does) which sends the page content to the servers in Sweden
ReadSpeaker server speech-enables the content on the page
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.
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.
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
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
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
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.
“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”
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?
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:
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/).
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*/
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
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 Catalyst – Fully Functional – Michael Hawkes from Captovate mentioned these guys as one of the top shelf options when it comes to ecommerce requirements.
Mal’s Ecommerce – Fully Functional – Ian Symonds from Dialog mentioned Mal’s ecommerce as an other end of the scale alternative to business catalyst.
Etsy – Hosted Shop – Simlary to Big Cartel but is more Artsy
Eventbrite – Event Management – There is very little customisation to the pages on offer here, but handles everything else you might need around running an event.
Eventarc – Event 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!
IA – Responsive 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.
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)
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.
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.
