PDA

View Full Version : Flash or Css


FEK315
06-16-2010, 05:57 PM
I have been racking my brain over this one.
I am a Flash developer designer hybrid that has built his portfolio in CSS and XHTML with a few examples of AS3 with SWFs.
I am leaning more on the side of developer then designer.

I am wondering if I should make my new site full Flash, a Combo or XHTML with examples of AS3 and Flash on their own pages.
I have looked at some sites of people here who develop and most of you seem to have either a combo of Flash and HTML or no Flash unless its a tutorial .


Any thoughts?

snickelfritz
06-16-2010, 06:10 PM
Obviously, if you are flash developer, you should have active flash examples on the site.
The bones of the site should probably be browser-native though.
Dreamweaver Spry is a stupid-simple way to create slick navigation that is accessible.

Artwich
06-16-2010, 06:18 PM
I prefer using plain ol' (X)HTML and CSS for websites. Sure, if you have some complex application, use flash by all means. But I don't see the reason for making sites entirely flash.

Sure, you can add new flashy effects and make people "ooh" and "aah" as your preloader explodes into a million pieces... but that doesn't exactly make the content any better.

Flash sites often, and I openly admit this, look better. They also do not have the problem of browser compatibility. But they can be annoying.

I don't want to wait a minute until a site loads. I don't want a background sound with a barely visible "mute" button. I don't want some sound effect when I scroll over a link.

Also, flash isn't exactly the most "accessible" technology. It's difficult to work with speech readers, it's hard to index them on search engines. I can't copy a URL, because often there isn't one, and the list goes on.

I find flash is overkill for making websites, and it is not meant for it. It is an application system. Not a website system.

snickelfritz
06-16-2010, 07:52 PM
Accessibility and SEO are not actually "Flash" problems with properly constructed Flash sites.
This is because the index page in which the Flash content is embedded is an ordinary HTML or PHP document; the same as for any dynamic website or CMS, such as Joomla or WordPress, and those systems do not have SEO and accessibility issues.

It is improper/incomplete structure of the Flash application (read: lazy or inexperienced Flash developers) that causes SEO/accessibility/crippled device access issues.
Simply embedding the SWF in a bone-stock Flash-generated HTML page is not going to cut it in the future.

maskedMan
06-16-2010, 08:13 PM
Simply embedding the SWF in a bone-stock Flash-generated HTML page is not going to cut it in the future.

Indeed, and the same thing is true of fancy JavaScript pages.

I'd be particularly interested to see how many JS developers decide to throw accessability out the window with full-canvas tag sites after almost a decade of complaining that Flash "can't be accessable". ;)

snickelfritz
06-16-2010, 08:40 PM
Indeed, and the same thing is true of fancy JavaScript pages.

I'd be particularly interested to see how many JS developers decide to throw accessability out the window with full-canvas tag sites after almost a decade of complaining that Flash "can't be accessable". ;)
Bingo.

FEK315
06-17-2010, 03:56 AM
I looked for the "lazy or inexperienced Flash developers" but couldn't find the thread.

So are you suggesting a full blown Flash site that has SEO accessibility?

snickelfritz
06-17-2010, 04:37 AM
Yes.
The alternate content div in the index.php file is populated by the same source data as the Flash movie, so the content is represented as HTML to search engines, and as Flash content to the user.

Here's a basic source file for an index.php file that displays the html pages used in the Flash movie in a Dreamweaver Spry accordion, via PHP.
This makes the data in the Flash website available to crippled devices like the iPad, and to search engines.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>My Flash Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">
var swfVersionStr = "10.0.0";
var xiSwfUrlStr = "expressInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#000000";
params.play = "true";
params.loop = "true";
params.wmode = "window";
params.scale = "noscale";
params.menu = "true";
params.devicefont = "false";
params.salign = "";
params.allowscriptaccess = "sameDomain";
params.allowFullScreen = "true";
var attributes = {};
attributes.id = "main";
attributes.name = "main";
attributes.align = "middle";
swfobject.createCSS("html", "height:100%; background-color: #000000;");
swfobject.createCSS("body", "margin:0; padding:0; overflow:hidden; height:100%;");
swfobject.embedSWF(
"myFlash.swf", "flashContent",
"100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
</script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- SWFObject's dynamic embed method replaces this alternative HTML content for Flash content when enough JavaScript and Flash plug-in support is available. -->
<div id="flashContent">
<div id="header">
<img src="images/logo.png" width="176" height="60" alt="my logo" />
</div><!--end header div-->
<div id="content">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Home</div>
<div class="AccordionPanelContent"><?php @ require_once("pages/home.html"); ?></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">News &amp; Events</div>
<div class="AccordionPanelContent"><?php @ require_once("pages/news.html"); ?></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Contact Us</div>
<div class="AccordionPanelContent"><?php @ require_once("pages/contact.html"); ?></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">About Sushi</div>
<div class="AccordionPanelContent"><?php @ require_once("pages/aboutMe.html"); ?></div>
</div>
</div>
<script type="text/javascript">var Accordion1 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: 0 });</script>
</div><!--end content div-->
<div id="footer">
</div><!--end footer div-->
</div><!--end flash div-->
</body>
</html>

FEK315
06-17-2010, 04:50 PM
This is awesome :-) thank you!
Just so I understand, I am createing individual HTML pages for each Flash page instead of haveing all my Flash pages in one movie. Does this mean you have 4 flash movies in your above example?
This is a new way of building Flash for me.

Is there a way to use Meta tags on the index page for SEO?

snickelfritz
06-17-2010, 08:39 PM
You can do it with one SWF or separate SWFs for each page, depending on how you like to construct your Flash movies.


An XML file that provides paths to the HTML and SWF files, as well as setup data for the UI, such as labels for the buttons and other details.
A CSS file specifically for formatting the HTML tags in Flash.
One or more CSS files specifically for the HTML version of the site.
A set of HTML formatted pages; one for each section of the site.
The index.php page in which the SWF is embedded has a section in the head for meta tags.

FEK315
06-18-2010, 12:04 AM
This is awesome thank you Snicklefritz