Posted: June 7th, 2010 | Author: Jason Grant | Filed under: Live Blog | No Comments »
Joe Lanman takes the stage for a general introduction of the topic.
Thanks to our sponsor EMC Consulting.
Our next event will be Andy Budd talking about User Experience on 12th July. August will see a summer social (some time in the 3rd week). In September we will have Michael Mahemoff talking about HTML5.
If you know of a good venue for London Web Standards – bigger one than Square Pig, please recommend it to us.
This talk is going to be about Flash vs. HTML5 alternatives for doing common things in HTML5 as opposed to using Flash.
[19:15] Jeff Van Campen takes the stage
Multiple file uploads was missing when Jeff tried to live a few weeks without using Flash and was badly missing multiple file uploads feature on some sites. WordPress is a good example where multiple file uploads is used.
Drag and drop is one of the interesting features which is also commonly used and cool feature along with file uploads.
GMail now (if you are using Chrome) allows you to drag and drop files into GMail to send them as attachments.
This stuff works in Chrome and Firefox – should work in Safari (which is a bit weird), but should work in WebKit night build.
You can attach multiple files to GMail by using shift and selecting multiple files and then clicking on ‘Open’ to attach more than one file to GMail at once.
The way FireFox handles the multiple file uploads is not terribly user friendly as it bungs everything into the file upload field.
GMail allows a drag and drop of multiple files onto the interface to do the same thing of attaching multiple files.
Jeff demonstrated a UI which enables desktop dragging of files onto the browser and the respective web page showing those files as dropped onto the target area.
Jeff mentions PPK article about why drag and drop is terrible mess at the moment.
It’s not really possible to drag a picture from desktop to ‘upload your files here’ area under current implementations.
There is no keyboard accessibility solution for this problem currently – Gez Lemon is doing some work on speccing something out for this.
If you are going to need multiple uploads you are probably going to need a Flash fall-back in order for this to work.
Flash is still the only way for this to work in Opera and IE.
FaceBook handles multiple file uploads through a Java applet of some sort.
The fall back solution is to offer multiple file upload boxes in straight HTML.
[19:30] Nick Smith takes the stage to talk about fonts
Ol’ skool font replacement solutions are Cufon, sIFR, image replacement under the current state of the web.
With CSS3 and @font-face we are downloading fonts from the server.
Cufon wraps words in < span > tags and the words end up being broken up by this tag.
Now Cufon uses < canvas > which is good and is moving towards future.
Cufon can embed links and can protect your fonts (sort of).
Cufon is kind of accessible.
sIFR (Scalable Inman Flash Replacement) is:
- Well developed
- Handles any font format
- Good to protect your font
- Can be resized
- Can embed links
- Accessible
but it is also:
- Slow to load
- Don’t handle Flash blockers
This is what Jeff pointed out – there is a group of people who are saying ‘no’ to Flash, and they are left in no-man’s land.
Nick Smith’s site still uses Flash and he demoed an example what happens on it if Flash is disabled or blocked – not very good.
@font-face & CSS3 solution has the following pros and cons:
- Supports Internet Explorer 6
- Live text
- No JavaScript required
- Accessible
There are also following cons:
Nick demos a font changing example from Apple Developer web site to show the power of CSS3 on the fly.
Kornel shouts from the back rows saying that this is ‘not HTML5′ – discussion starts on whether this is or is not HTML5.
This is CSS3 rather HTML5 – some people thought that Google Pacman logo was HTML5 because it worked on iPhone and it was HTML4 and JavaScript.
Nick says he constantly has the problem with designers that certain fonts cannot be used within web pages, so he has to regularly instruct them that those fonts cannot be used within the context of web pages.
Someone (a visual designer) makes a remark from the audience that majority of CSS3 fonts don’t look as good for Windows users while sIFR and Cufon look much better and as intended by the visual designer.
Audience member says: It seems as though currently you are required to download entire font definition from the web with @font-face which seems to be massive for some languages like Chinese.
Much discussion takes place around fonts on the web and HTML5, downloading it, using it, performance issues and display issues. Many people seem to have an opinion about this particular topic and are commenting extensively about their experience and thoughts about this.
How long until we see ‘HTML5 loading screens’ like we have been seeing on Flash sites?
Does anyone know why aren’t the really big font foundries signing up to distribute their fonts through this. Kornel replies that the same thing happened with music industry. Pirating debate kicks off with a lot of comments again.
You can go to almost every font library and download individual types of fonts, but it is not cheap.
Majority of clients want to pay for the font and its use on a web site.
Kids on MySpace are likely to pirate fonts, but …
Would clients pay for image from Getty Images, so why not pay for fonts also?
[20:24] Edd Sowden about CSS transitions and live streaming
HTTP live streaming
OSMF – Open Source Media Framework can be used as one of the solutions (this is an Adobe solution)
JW Player (from v4.6) supports this feature
Demo shows a live example of video player switching on the fly from low quality content to high quality video without stopping
This works by chunking up files – Apples implementation uses tools which come with Snow Leopard, but only works in Safari under Snow Leopard OS.
ISS Smooth Streaming is Microsoft’s implementation of this live streaming solution.
Looks like its Apple vs. Flash.
On YouTube we currently have the manual process of users having to switch the video up a notch to get the better quality on their browsers.
[Audience question] Is there going to be a native streaming within the browsers implemented any time soon?
I haven’t seen anyone try it other than Apple on Safari with Snow Leopard, but this can be done in Flash.
[20:42] Joe Lanman on stage talking about Vector Graphics
Flash is used quite widely for vector graphics – for practical things like graphing.
A lot of the issues around various solutions are to do with the fact that Internet Explorer does not support it.
Raphael JS is a useful library which allows use of SVG in Internet Explorer by converting stuff to VML.
SVG is more ‘webby’ as it is within the DOM (SVG is XML based) so its pretty cool in that respect.
Joe takes us to Raphael JS web site to show us some examples of what is possible with this library.
The output of a graph in code terms is SVG code which can be styled with CSS in the same way we do it with HTML. This is theoretically more accessible as assistive technologies can read the graph.
Its great that data is there within the DOM so it can be accessed – it is also possible to apply JavaScript to this to add some behaviours.
Its a little bit weird in that it doesn’t support everything so animation via JS won’t work.
Kornel throws in a comment that SVG support animation elements, so animations can be done natively using SVG coding.
Downsides of this method?
This solution is good for graphing but not necessarily for animations which Flash is really easy to create with.
Android browser does not support SVG because ‘SVG adds 1MB to the overall download size’.
There is a JavaScript graphing library based on Raphael JavaScript library. http://g.raphaeljs.com/
[Audience comment] This graphing library does not handle many data points very well. FireFox also tends to halt when there is a big amount of SVG data within a page.
Many audience comments about this topic once again. Flash vs. these SVG diagrams look very similar and not much different at all.
[21:03] Talk is formally finished and informal conversation starts
BBC Homepage uses canvas with Flash fall back on the homepage.
[Audience question] Does it really matter that something is HTML5 as opposed to Flash now?
The BBC clock on the homepage works on an iPhone as well.
Excellent audience discussion about why using open technologies instead of Flash is a good idea.
Joe Lanman closes the night off thanking everyone for participating.
Posted: November 6th, 2009 | Author: Jason Grant | Filed under: w3c | 3 Comments »
Phil’s presentation (slides) is a flavour of the course he runs (with the same title) for the W3C. It was good to have him speak as he missed his regular Mobile Monday meet-up for us.
Mobile Web Best Practises 1.0 was a W3C recommendation originally put together in June 2006 by (among others) Phil, dotMobi, Vodafone and Opera. Despite it’s age and a constantly advancing industry, the content is still mostly relevant to today’s mobile web since it focused on the activity rather than the technology.
Challenges of the Mobile Web
When designing for the mobile web it’s important to think about people on the move. Different to designing for the desktop, you’re encouraged to design for the person first and the technology second. Ask questions like: why/where/when are they using my site? Understand the situation they may be in. There are some serious challenges to designing for handheld devices that must be faced:
- The screen is not very big. Yes it’s a limitation, but it’s important to meet this challenge and not make the user have to scroll from left the right.
- Input methods are different. Most phones have a numerical keyboard. You also might be walking whilst using it, or have other things on your mind. Think about the input paradigm.
- Pay As You Go customers. Data usage is important to keep low since not everyone is on a flat rate data plan.
- Latency. The mobile network is normally slow and patchy, it can cost time and money to your visitor if you have them download several stylesheets and large JavaScript libraries.
- Advertising. It’s a small screen, respect your visitor, don’t allow your marketing department to take up all the space.
If you’re in the web industry, you may well have a decent smart phone. Remember, not every user has the latest and greatest gadget.
Things you must never do
- Pop-ups and target=”_blank”. Don’t spawn new windows on the mobile platform ever. If you do you risk leaving the user out of control.
- Graphics for spacing. Using graphics for part of your design is OK, but CSS was designed to describe spacing.
- Frames. Even if your mobile device supports frames, you can’t predict what they’re going to do.
- Image maps. Older devices don’t support these on the client side, some don’t even support it on the server side. Also, input elements of type “image” cause problems on handhelds because they’re too close to image maps. There are also associated accessibility issues.
- Tables for layout. A bad idea for accessible web design as well.
- Nested tables (for layout). These make a website a thousand times worse.
Things you are encouraged to do
- Design using a single column
- Create sites that don’t require zoom
- Provide basic navigation in one simple line at the top of the page
- Put other navigation at the bottom of the screen
- Dont obscure the content with an image
- Use progressive enhancement instead of graceful degradation
- Think accessibly, since there is a very close relationship between this and mobile
Progressive Enhancement
The concept of writing a website to suit every device, then extending it for those that can access extra features. Just as relevant on the mobile web as it is in accessibility. Phil’s advice:
- Fonts and colour - don’t use these to convey meaning.
- Tables - use sparingly, it’s better if you can get away with using an Unordered (ul) or Definition List (dl).
- Cookies/JavaScript - great to use, but relying on them for dynamically generated pages could exclude visitors. See Phil’s example of a page with and without Javascript support. Phil’s experience is that some developers forget that JS can be switched off.
- Flash - which even the latest iPhone doesn’t support. Always have an alternative way to access this content. Also, use video but don’t rely on it. Again, bandwidth is a premium.
Can we have one web?
Is it possible to make a website that works on both desktop and mobile? Well, yes. And there are several ways to do it. Using the ‘media’ attribute you can use different CSS files to style for mobile and desktop. But you can also design your site to work for mobiles my default. See Phil’s examples of web pages that are friendly and unfriendly to mobile browsers.
If, as is his preference, you decide to stick to one stylesheet for all, his advice is to have the two most important links at the top left of the page and to focus the document’s content into one column. Phil has organised his site to prove that what he’s recommending is not purely theoretical.
CSS device detection
Even though CSS was designed to be able to deliver specific stylesheets to mobile browsers, they’ve had to handle lots of bad code and many mobile browsers are instructed to ignore it. Surprisingly… “The marketing departments of the device manufacturers don’t want to talk about the Mobile Web, they are keen to offer the ‘full Web’ and so top end devices ignore @media=”handheld” completely.”. See Dominique Hazaël-Massieux’s article on the importance of preserving the mobile experience.
Currently most mobile coding is lazy. For example, instructions like “display: none;” in your stylesheet only hide content and don’t prevent it being downloaded to the browser. This creates latency. But if you want CSS stylesheet switching without most of the worry of devices ignoring the ‘handheld’ declaration then you might try the Bushido Method. Developed by Dean Hamack at BushidoDesigns.net, it gives mobile device detection without using user agent detection or server side scripting (it doesn’t cover every device, but it’s good).
Device detection, going further than CSS
Although not 100% accurate, device sniffing is needed if you’ve decided to generate specific HTML. For this you can use a number of services including:
Thematic Consistency
We’ve discussed changing style and content to suit the mobile context, but the guiding principle behind all of these tools is thematic consistency. For example your website may offer screen savers for desktop and ring tones for mobile. So thematic consistency and content are seperate, since content doesn’t need to be the same on the desktop and the mobile.
A good example of thematic consistency is the BBC News website. Like other good mobile sites, the BBC doesn’t split its mobile and desktop URIs. As has already been mentioned (link back to Linked Data), this is bad for search engine rankings. If you do need two URIs, only ever use one as a link and the other as a redirect (you could even use the REL attribute).
Validating
While checking content for consistency is down to the human, you can go some way to at least make sure that machines are happy with your code by using services like the mobileOK validator. As it says, to “check a web page for mobile-friendliness”. For example, Facebook currently gets a 70% score on this. The tool does 23 tests which are pretty smart – for example it warns if you have more than 20 resources requested by your web page. You can even display the mobileOK scheme logo if your pages validate (link and image). Additionally, there is now a BETA version of the new validator called Unicorn, pitched as one validator for web, this is meant to be a very good developer tool.
POWDER is a form of XML which shows that the whole of one website is mobileOK. There is a POWDER processor which converts the data into RDF. This then signifies that the given website is mobileOK and puts your site into the Linked Data ‘sphere’. This is the way to make that data available and mash it up with other data available for mobile web.
Q&A session
How can you justify any type of device detection (because it cannot be linked to, etc.)?
This is because you are designing for a user
You can’t make a mobile version of every page
Device detection can get you so far, as long as you don’t remove the control from the user
Is MobileOK testing similar to WCAG1.0 testing?
WCAG1.0 testing is similar to MobileOK testing (23 / 60 are machine testable cases)
There is a need for human testing just like with accessibility
Definition of widget from Opera evangelist – ‘mobile magic packed with web standards goodness’
Is there a page of arguments for and against various standards?
People have issues with mobile detection approach
There is a public mailing list
Everything is done in public with Mobile Web Best Practices
Will the mobile best practices be superseded?
Noone’s going to make a standard without being paid to do so
Our members support the standards by donating through their membership
‘W3C does not claim to be be-all and end-all’
If you want to influence any of the organisations you need to become a member of it
Various comments from the audience
‘I really wish that W3C was an open source group like Linux project’
You can use Opera Mini emulator that works pretty well to test designs in it
Ultimately you need to test on an actual phone
Yahoo have made a system called ‘Blueprint’ – you can write one mobile version which can be deployed to various devices – you write one language and it gets translated to relevant implementations
W3C has tried very hard to come up with ‘Content Transformation Guidelines’, but that has been very controversial indeed
Recent Comments