OT: Pretty Flash free websites

Laurence wrote on 3/16/2011, 10:23 AM

On my recent shoot in Africa, I noticed that almost all Internet access was via cell phone. Most people viewed the Internet directly on their phone, and a smaller number viewed it on a computer with an Internet cell phone dongle. I have found that in South America there is also a lot of people who's main Internet access is via cell phone, though not to the extent that it is in Africa.

Combine that with the rise of Apple and Android tablets in the US (which also don't view Flash) and I am finding it increasingly important to not use Flash in my websites. This is especially true of anything foreign aid related.

With that in mind, I have noticed that many foreign aid websites no longer use Flash, and yet they still have rotating pictures in their banners and can look excellent. The website for Samaritan's Purse is a great example of this:

samaritanspurse.org

Christian Mission Aid is not quite as pretty, but still not bad:

cmaid.org

I would love to at least learn how to do a banner with rotating jpegs like both these websites do. Can anyone here suggest resources on how I can learn to do this? Also, I would love to see other examples of good looking flash free sites.

Both these web sites look great until you try to play their videos. That is because their videos are embedded with Flash. I know how to link to Youtube or Vimeo videos so they show up on a cell phone or tablet. Does anyone know how to embed a video in such a way as to make it work on a cell phone or tablet that doesn't work with Flash?

Comments

amendegw wrote on 3/16/2011, 10:45 AM

"I would love to at least learn how to do a banner with rotating jpegs like both these websites do. Can anyone here suggest resources on how I can learn to do this?"I'm sure there are many ways to do this, but (since I use Visual Studio/ASP.NET), the way I'd implement "rotating jpgs" is by using the AJAX Slideshow Controls - available as a free download from Microsoft. SlideShow Demonstration

"Does anyone know how to embed a video in such a way as to make it work on a cell phone or tablet that doesn't work with Flash?"Check this out: http://diveintohtml5.org/video.html scroll down to "a complete, live example" - near the bottom of the page.

Good Luck!
...Jerry

btw: I believe (but not positive, 'cuz I have not means to test), if you use the <iframe> method of embedding YouTube videos, they will be playable as either Flash or HTML5. Not sure about Vimeo.

Laurence wrote on 3/16/2011, 11:06 AM

Thanks Jerry.

MTV.com is also Flash free and looks great on my tablet and cell phone (at least until you try to play the videos):

mtv.com

Former user wrote on 3/16/2011, 11:13 AM

For video playback use JW Player for the best cross platform compatibility.

For rotating images use a jQuery (java script) Cycle Plugin.

amendegw wrote on 3/16/2011, 11:14 AM

One more thing... I used the AJAX slideshow feature on a website I set up for our local golf club. www.pikecreekMGA.com/default0.aspx

I'm not a very good graphic designer - and the jpgs I was furnished were not of great quality - but I think you will see the potential - Flash Free.

...Jerry

Laurence wrote on 3/16/2011, 11:16 AM

Check this out: diveintohtml5.org/video.html scroll down to "a complete, live example" - near the bottom of the page.

Cool looking, exactly what I was looking for, except that the example video at the bottom of the page doesn't work on my Android tablet. Darn, and the description seemed so perfect...

Laurence wrote on 3/16/2011, 11:21 AM

Your golf site looks great on my tablet. Yes, I can see the potential of flash free. Way to go.

Laurence wrote on 3/16/2011, 11:24 AM

This is cool and flash free!:

http://mugtug.com/sketchpad/

rmack350 wrote on 3/16/2011, 11:34 AM

Android phones do support flash these days, but that doesn't mean you should use it. The goal is to build a page or site that can scale itself to different devices, and I feel that's better accomplished through good style sheets

The following site showcases page designs that scale well: http://mediaqueri.es/

I found it through Dan Cederholm's blog: http://simplebits.com/notebook/2011/03/09/mediaqueri-es/

Rob

amendegw wrote on 3/16/2011, 11:43 AM

Here's another test. I embedded a YouTube video (see if you recognize it!) using the <iframe> technique. See if you can view it on your Android.

http://www.jazzythedog.com/YT-Test.htm

...Jerry

tunesmith1801 wrote on 3/16/2011, 11:56 AM

Android has topped Apple in phone devices used.

dibbkd wrote on 3/16/2011, 12:07 PM

"Android has topped Apple in phone devices used. "

I saw that stat recently as well, but don't remember, is that US or worldwide?

I'm an Android user myself, fyi.

rmack350 wrote on 3/16/2011, 12:50 PM

So, I thought I'd just look through the links above to see what flowed well on my DroidX:

Samaritans Purse reflows very well
CMAID, nope

The Ajax Slideshow demo, Nope

DiveintoHTML5, nope

MTV does reflow but it ain't pretty

JW Player site, Nope
Jquery Cycle Plugin, Nope
Pike Creek MGA, Nope
SketchPad, Nope

Mediaqueri, Yep (Whew! was ready for some serious egg/face action there.
Simplebits, Yep (But Dan Cederholm writes books on web standards. His page BETTER be viewable on a phone screen.)

SCS Forum (this page we're looking at right now), Nope

Basically, the test for phones is whether a site requires zooming to see it. The site can redirect to a second page but the most elegant way to do it is through style sheets that just reorganize the existing page.

Rob

tunesmith1801 wrote on 3/16/2011, 12:54 PM

"I saw that stat recently as well, but don't remember, is that US or worldwide?"

It says: Manufacture operating systems, so it is all cell phones world wide since none are made in the US. :)

rmack350 wrote on 3/16/2011, 12:55 PM

Jerry, yes it plays on my DroidX. I can't tell whether it's in a flash player or not, although the controls look like flash to me. The question is whether it plays on Apple hardware since they don't have flash.

Rob

Former user wrote on 3/16/2011, 1:36 PM

"Basically, the test for phones is whether a site requires zooming to see it. The site can redirect to a second page but the most elegant way to do it is through style sheets that just reorganize the existing page."

His topic was "Flash Free websites" and that's what the links I offered provided. Image rotation and a video player with no flash required.

Having a site dynamically scale to fit a small mobile device is an entirely different and much more complex issue. The majority of the web isn't optimized for use by mobile devices and will probably never be. That doesn't mean that you can't view these sites, it's just not as easy as using a desktop.

Now a device not playing Flash is a bigger issue. If a site is using Flash for critical functions (like navigation) or important media playback, then a non-flash devices (iPhone, iPad, etc) won't work, no matter how much you can scroll around.

Jim

Chienworks wrote on 3/16/2011, 2:25 PM

I normally have flash disabled by default on all browsers on all my web-access devices. It's astounding how many websites i surf to that present a blank screen, maybe with a tiny copyright notice on the bottom. I find myself not curious enough to enable flash to see what i'm missing. I have to have been promised a very large benefit in advance before i'll be tempted to make an exception for the site.

Seems like it wasn't that long ago that it was de rigueur for a website with flash to offer a link to a non-flash version. I think sites that no longer do this risk losing a large potential audience as more viewers either have flash-free devices or, as i do, opt to not see flash.

amendegw wrote on 3/16/2011, 4:03 PM

Looks like Vimeo has implemented a scheme similar to YouTube for embedding HTML5 / Flash videos:

Anyone with a non-Flash device that would like to test, here's a test embed: http://www.jazzythedog.com/testing/Vimeo-Embed.htm

...Jerry

monoparadox wrote on 3/16/2011, 4:11 PM

Here's an interesting read: http://www.wired.com/magazine/2010/08/ff_webrip/all/1

Chienworks wrote on 3/16/2011, 9:20 PM

I find it amusing that most of the reader comments disagree with the article, and i do too. Most of the reader comments made much better founded points than the article did.

i c e wrote on 3/16/2011, 9:22 PM

just log onto templatemonster.com they have lots of really nice sites with out flash. i just put together two for use in SA. they even have sliders. just ask someone on chat.. their custumer service is A+.

peace...