HTML – Stéphane Caron – No Margin For Errors http://www.no-margin-for-errors.com Thu, 07 May 2015 00:40:40 +0000 en-US hourly 1 https://wordpress.org/?v=4.5.14 We must be careful if we don’t want to make HTML5 look bad. http://www.no-margin-for-errors.com/blog/2011/12/06/we-must-be-careful-if-we-dont-want-to-make-html5-look-bad/ http://www.no-margin-for-errors.com/blog/2011/12/06/we-must-be-careful-if-we-dont-want-to-make-html5-look-bad/#comments Tue, 06 Dec 2011 16:38:43 +0000 http://www.no-margin-for-errors.com/?p=1033

Related Posts

No related posts. ]]>
There are some thing we all know we must never do with a technology. For example, we all know we must not do a welcome page in flash anymore, we also know that little animated gif envelopes are banned from contact forms.

These examples have done nothing more than give us content to mock at these poor technology choices.

There seems to be general consensus about these and quite frankly, they are banned because they either don’t bring anything more to the user or are plain ugly.

Let’s be careful with how we handle all these new APIs that are available to us.

Popup games

I think they should now enter the hall of fame of bad use of technology. I just came across this FWA website of the month today and god is it bad.

It uses popups to create a game that works pretty much the same way The Incredible Machine worked. The concept is not bad at all, but the execution is where it fails.

The programmers did a very good job, all the cases are well handled and the game seems to work as intended. That’s not where the problem is.

I’ve tried to play with it for a good 15 minutes, I got the hang of it but the technological choice was really in the way, making it hard to enjoy the game itself.

Good technology is not magic dust 

We always need to be careful when we make a technological choice, we have all these great tools we can use today but because we can use them does not mean we should.

Technology should enhance user experience, not get in the way. Many times while playing that game I clicked mistakenly on the background causing all the popups to go behind the main screen forcing me to press the “restart” button. That’s a good thing the programmers thought of implementing that functionality.

Also, every time you load a level, you have these popups that loads in the bottom left of the screen and then are repositioned, you get the feeling that so much stuff happen at the same time that you have no clue where you should focus.

In now way did the popups enhance the experience. This type of experience worked well with The Wilderness Downtown and that’s probably because you could enjoy the site passively not having to interact with anything while watching the videoclip.

HTML5?

Where it hurts the most is that this site is seen as a technological demo of what HTML5 can do. What’s the takeaway after playing this game? “HTML5 can move popups and play videos!”. Really I feel we’ll laugh at that 5 years down the road.

]]>
http://www.no-margin-for-errors.com/blog/2011/12/06/we-must-be-careful-if-we-dont-want-to-make-html5-look-bad/feed/ 23
Mobile Web Apps: The End of App Stores? http://www.no-margin-for-errors.com/blog/2010/01/28/mobile-web-apps-the-end-of-app-stores/ http://www.no-margin-for-errors.com/blog/2010/01/28/mobile-web-apps-the-end-of-app-stores/#comments Thu, 28 Jan 2010 19:30:47 +0000 http://www.no-margin-for-errors.com/?p=374

Related Posts

No related posts. ]]>
Earlier this week Google released Google Voice as a web application. It’s a toned down version of the application that originally got submitted to the App Store but stirred controversy.

If you never heard of it before, the application got pulled down from the App Store for “unknown” reasons, Google complained to the FCC, then Apple said they were investigating the app. Someone somewhere obviously doesn’t want that app on the iPhone.

What they did this week is a straight hit in Apple’s face,. They modified their original App to be available as a web app, so unless Apple block access to the Google Voice website, there’s really nothing they can do about it and that’s a good thing.

Mobile Browsers are really powerful.

Mobile Safari is part of why Google has been able to release Voice as a web app. This browser really is quite powerful, it supports advanced HTML5, CSS3 and the JavaScript performance is impressive.

This got me thinking about the relevance of developing an App for the App Store. It’s true that the browser can’t access some core features like the camera or the gps, but some apps could actually be quite easily converted to a browser based equivalent. Just think about website specific apps that really are only RSS readers (Engadget,TUAW,CyberPresse), notes apps, even Instapaper could be converted using Safari client-side database.

Visibility

It’s true the App Store can potentially give you a lot of visibility, but the truth is that with over 140 000 apps yours can easily be far down the list. As if you publish it as a web app you can actually promote it not only for the iPhone but for many more platforms as it is browser based.

Open is epic win

Developing a web app aimed at the iPhone makes a lot of sense, you don’t have to go through the approval process when you launch or when you want to update your app. Your market could also be a lot broader as the app could be easily adapted for Android and Pre, much easier than re-coding the equivalent in their native language.

You can even add web pages to your home screen on the iPhone so it feels more like an app from the App store.

Cost $$$

Last time I checked there were not many people in my area developing for the iPhone, while there were plenty of web developer. It would be a lot easier to maintain and to find support in the event you lose one of your programmer. And as with everything, if demand is up, prices will follow so an Objective C programmer ain’t cheap.

Bottom line

If I had to develop and app for the iPhone today, I’d strongly consider the web app avenue unless the app rely on core features that are only available in the iPhone SDK.

What’s your view?

]]>
http://www.no-margin-for-errors.com/blog/2010/01/28/mobile-web-apps-the-end-of-app-stores/feed/ 14
target=”_blank” XHTML replacement. http://www.no-margin-for-errors.com/blog/2009/12/16/target_blank-xhtml-replacement/ http://www.no-margin-for-errors.com/blog/2009/12/16/target_blank-xhtml-replacement/#comments Wed, 16 Dec 2009 15:13:12 +0000 http://www.no-margin-for-errors.com/?p=288

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
As you must already know, using target=”_blank” to open a page in a new window doesn’t validate in XHTML.

There’s a javascript workaround tho. This example is based on jQuery since it’s always included in my project and it’s my library of choice but it could be easily converted to any library.

The basics

To replace the target=”_blank” you should use the rel attribute. This attribute is used to specify the relationship  between the document that contains the link and the document it refers to. So your links should have the attribute rel=”external” to specify the link is not a link inside your website but to another website. There are plenty of values possible for you rel attributes, I invite you to read about microformats.

Now rel=”external” doesn’t mean target=”_blank”. Adding that attribute won’t open the links in new windows, it’s only a more semantic way of specifying the relationship between pages. Since some of you might not want to open rel=”external” in new windows, browser vendors didn’t implement it as being the same as a target=”_blank”. That when javascript comes into play.

The javascript

$(function(){
	$('a[rel="external"]').attr('target','_blank');
});

Easy isn’t it?

You actually need to either put that in a script of his own or at the bottom of you webpages. $(function(){ }); is actually the short document.ready call in jQuery. Once the document is ready, it’ll traverse through each link and add the attribute target=”_blank” to them. This way the W3C validator doesn’t see them and you page still validates.

Working markup

Here’s a working example with jQuery loaded.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<script src="http://www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript">
			google.load("jquery", "1.3.2");
		</script>

		<script type="text/javascript" charset="utf-8">
			$(function(){
				$('a[rel="external"]').attr('target','_blank');
			});
		</script>
	</head>
	<body>
		<a href="http://google.com" rel="external">Google!</a>
		<a href="http://no-margin-for-errors.com" rel="external">My site!</a>
	</body>
</html>

Your opinion?

What do you think about this technique? I personally stopped caring about my pages not validating when I use target=”_blank”, but I know some people really want to see their page validates whatever the price.

]]>
http://www.no-margin-for-errors.com/blog/2009/12/16/target_blank-xhtml-replacement/feed/ 31
New website launched! http://www.no-margin-for-errors.com/blog/2009/11/28/new-website-launched/ http://www.no-margin-for-errors.com/blog/2009/11/28/new-website-launched/#comments Sat, 28 Nov 2009 16:16:20 +0000 http://www.no-margin-for-errors.com/?p=158

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I’ve just launched my new website design. I want to say a big thank you to my friend Marie-Anne (http://turkoise.ca/) who took the shitty design I tried to make and made it pretty.

I completely change the way I display the information on the website and my plugins are now an integral part of the website instead of looking like another website.

I’ve been working on it for the past 3 weeks so that explains the lack of updates on the plugins. Don’t worry I’ll get working on them as soon as I feel like my website is solid enough.

I finally made prettySociable the official sharing tool on the website. Just hover the post thumbnail and you’ll be able to share it in all the main social websites. Head over prettySociable projet page if you want to use it!

Since I redid pretty much everything, you might see some bugs/glitch here and there, feel free to report them!

How do you guys like it?

]]>
http://www.no-margin-for-errors.com/blog/2009/11/28/new-website-launched/feed/ 6