Isometric Shadows™ [2009] | RSS News Feed http://www.isometricshadows.com/ This is an RSS feed of news & other stuff from from www.isometricshadows.com. en-gb Copyright: (C) Isometric Shadows (2009) 15 Isometric Shadows http://www.isometricshadows.com/images/is2009_rssLogo.gif www.isometricshadows.com/ 73 HTML5 Vs. Flash. FIGHT! http://www.isometricshadows.com/news/ Thu, 21 Oct 2010 12:49:22 +0000 <p>Well, where do I begin here. A good place to start might be that there seems to be a lot of, well deserved, buzz about HTML5 (A.K.A. The Flash Killer). Taking it on face value, that may very well be the case. Investigating the hype a little closer, though, the facts remain that Flash will be with us for some time yet.</p> <p>Why? Well first of all, in part, it's down to Apple. Really? Yes. First of all, it appears that they are so hell-bent on pushing HTML5, Apple have refused hardware acceleration access to the Flash Player. According to Adobe, hardware acceleration is supported neither by Linux nor Mac OSX, the latter because OSX does not expose hardware acceleration access to the API's that require it. Adobe goes on to say that "The Flash Player team will continue to evaluate adding hardware acceleration to Linux and Mac OS X in future releases."</p> <p>There are many arguments, of course, for this flat blocking. The main one being that the iPhone, iPod Touch and iPad are deemed, by some, to be at risk of over heating if hardware acceleration is allowed. Draining battery power and hoggin the processor. I know I personally would not like my device to melt in my hand for no other reason than watching a video of some kid tearing his house apart because his parents stole his XBox 360 ... funny as it sounds. Thats not to say, though, that Apples' other devices don't struggle at times with Flash, as is. I don't know about you, but my (admittedly aging) MacBook Pro tends to get pretty damn hot when running flash ... and don't even talk to me about HD Flash video. So what can HTML5 offer me?</p> <p>In terms of what HTML5, coupled with CSS, SVG and JavaScript, can accomplish is very impressive indeed. It provides native video and audio playback, nice transitions, animation capability and a level of interactivity never before seen without the use of Flash. And in the furture, who knows where this will go. That said, there a few things that we are overlooking here ... firstly, it's not the future. HTML5 has a long way to go.</p> <p>Secondly, from a Developers point of view, Flash provides one environment to develop in. One platform. One IDE. One technology. And is multi-platform and multi-browser compatible. On the otherside, we have HTML5, SVG, CSS3 and JavaScript. Multiple languages in multiple development environments ... and as yet, not multi-browser compatible. It isn't so easy to find someone proficient enough to work on all 4 technologies and still be able to achieve what Flash can.</p> <p>Thirdly, from a Designer point of view, the Flash IDE provides a relatively easy set of tools for drawing complex objects and shapes, containing far more detail than SVG can. What HTML5 "promises" to deliver in the furture is a rich interactive web experience that has the same smooth object animation, tweening effects, and video that has forever been in the domain of Flash. One thing anti-Flash campaigners have to face, however, is that the web is currently made by designers, most of which don't have the skills to code, and that programmatic animation and rich UI coding is no easy task.</p> <p>So, unless someone comes up with a unified environment that will give designers the same ability to produce timeline and tweened animations, in-app vector manipulation, multi-channel audio integration and nested movieclip objects in HTML5, with the same ease currently being accomplished in Flash, don't expect to see Flash disappear anytime in the near future.</p> <p>To finish with, I think it's interesting to look at tests of how HTML5 performs against Flash on the 2 major platforms (Windows and Mac OSX) and all the major browsers ... maybe then you can judge for yourself.</p> <p><strong>Mac Tests</strong></p> <p><strong>- </strong>With Safari, HTML5 was the most efficient and consumed less CPU than Flash using only 12.39% CPU. With Flash 10.0, CPU utilization was at 37.41% and with Flash 10.1, it dropped to 32.07%<br />- With Google Chrome, Flash and HTML5 were both equally inefficient (both are around 50%)<br />- With Firefox, Flash was only slightly less efficient than in Safari, but better than in Chrome</p> <p><strong>Windows Tests</strong></p> <p>- Safari wouldn't play HTML5 videos, so there was no way to test that. However, Flash 10.0 used 23.22% CPU but Flash 10.1 only used 7.43% CPU<br />- Google Chrome was more efficient on Windows than Mac. Playback with Flash Player 10.0 was about 24% more efficient than HTML5, while Flash Player 10.1 was 58% more efficient than HTML5.<br />- On Firefox, Flash 10.1 dropped CPU utilization to 6% from 22% in Flash 10.0<br />- In IE8, Flash 10.0 used 22.41% CPU and Flash 10.1 used 14.62% CPU<em></em></p> <p><em>The above platform/browser test information was taken from readwriteweb.com, and was published on March 10, 2010.</em></p><br><br> With the launch of the iPad, Apple's omission of Adobe Flash technology has been brought to the forefront of global web discussions. While it was deemed harsh to exclude Flash from small, portable devices such as the iPhone or iPod Touch, to append the iPad to that list simply added fuel to the fire. 63 To grid, or not to grid? http://www.isometricshadows.com/news/ Tue, 17 Nov 2009 16:16:41 +0000 "Grids form an essential part of our lives. We may not always notice them, but their influence on what we see, hear and do is everywhere. Wherever plans have been called for in the building of objects, the division of areas, of the decoration of flat surfaces grids have been involved. The desire to bring order to the bewildering confusion of appearances reflects a deep human need ... Grids, modules, and systems not only have practical applications, as a means to resolve complex design problems, but they also provide a sense of order and temporary respite from the most pressing and basic human fears and dilemmas.<em> * Taken from <a href="http://www.artofthegrid.com" target="_blank" title="The Art of the Grid">http://www.artofthegrid.com</a></em> <p>I'll be honest here. Up until quiet recently (well, roughly 4 years ago now), using grids never really entered my mind when I would start a new project. And that was fine ... for the most part. But then when the common use of tables in websites got thrown out the window a while back, I began to get a little worried about maintaining some sort of balance with the structure of a webpage. I mean if there are no walls, how are we meant to put the roof on? Well, thats the way i thought at the time anyway ...</p> <p>Now, while tables "did the job" for laying out pages, they never quiet got it right in all browers. That said, they were an aid, of some sort, when quickly trying to mock up a webpage. Then, with the advent of full support for CSS across most commonly used browsers, with the exception of a few earlier versions of IE, designers had now found a way to control and layout all the elements of a page from one source, without having to worry about what it would look like in this or that browser. This itself though, brought it's own headaches.</p> <p><strong>I really do love CSS.</strong></p> <p>By no means am I even attempting to bash CSS here ... I love CSS ... I'm trying to explain where my own need for grids came from. Now, while it may be possible to throw together a webpage in 3 seconds in Dreamweaver, that is fully XHTML and CSS compliant, it may not be the most interesting or well layed out page in terms of content placement and what portion of the page is occupied by what content. This is where a designer can run into problems ... as I did. "Content is King", I read somewhere once. If this is the case, then content placement is the Queen ... and design by grid is the holy ceremony of wedlock that binds them together.</p> <p>When designing a webpage in Photoshop or Fireworks, without a grid, the designer tends to find themselves a little lost in terms where to begin. Choosing a grid structure to start with tends to solve a lot of these issues early on. Now, while it's not as easy as 'just choosing a grid' (there are a few variables to consider), it's not that difficult to see what kind of grid you may require, depending on what the nature of the site is and who it is intended for. The idea of using grid structures to contain and unite all the information on a webpage works best for me. A correctly chosen grid can accomodate <em>almost</em> everything.</p> <p>Before choosing a grid, though, the designer must prioritise the information they want to display, and only then begin to design a grid layout that will best display this information. There is one other major external factor which may have an adverse effect on your chosen grid design and must be considered ... and that's screen resolution. Screen resolution has become a major issue with designing grids. Do I design for 800x600, 1024x768, 1280x1024, 1920x1080 or higher? This really boils down to the type of audience that will be looking at your website. Designers, for example, will more than likely use quiet high resolution screens, and so can comfortably browse sites designed for 1280x1024 and higher. Other audiences such as home users will, more often than not, use lower resolution screen ... typically 1024x768. Once you have decided your target audience and you choose your grid type, it will be easy to see how all these blocks of information can be layed out in a manner more fitting with the information you want to display and how you want to display it.</p> <p><strong>One grid to rule them all.</strong></p> <p>There are, of course, different types and styles of grid in use today all over the web ... and there is no <em>holy grail</em> when it comes to choosing one. This is simply down to the designer and the type of site they want to create. Personally, I use the <a href="http://960.gs/" target="_blank">960 Grid</a> ... it caters for a fixed width of 960 pixels and from a single column all the way up to 16 columns, and any variation in between. Don't let the term 'fixed width' confuse you. There are arguments for and against using fixed width grids, but I'll discuss that matter another time. Suffice it to say, fixed width or non-fixed width, grids are still too important to not consider using.</p> <p><img src="http://isometricshadows.com/images/960_grid.jpg" border="0" alt="http://isometricshadows.com/images/960_grid.jpg" /> <em><br />The 960 Grid system in use.</em></p> <p>Having said all that, it's just as important not to be overly confined by a grid structure ... it can be quiet easy to become constrained by grids too! I find that it's best to design using a grid that works, and then break out of it in certain areas to create more of an impact.<strong></strong></p> <p><strong>Some grid resources.</strong></p> <p><a href="http://www.thegridsystem.org/" target="_blank">The Grid System</a><br />"The ultimate resource in grid systems."<a href="http://960.gs/" target="_blank"><br />960 Grid System</a><br />Set up a grid for the common 960 width.<a href="http://www.29digital.net/grid/" target="_blank"><br />Grid Calculator</a><br />Another online tool for creating grids.<a href="http://milianw.de/projects/typogridder/"><br /></a><a href="http://www.smileycat.com/miaow/archives/layout_grid.php" target="_blank">Web Page Layout Grid</a><br />A large image to use in the background when designing with a grid.<a href="http://www.wpdfd.com/browsergrid.htm" target="_blank"><br />Browser Grid</a><br />Shows the maximum safe sizes for different resolutions.</p><br><br> Indeed, that is the question. Why do some, including myself, think using grids are the be-all and end-all when it comes to design? I will attempt to explain ... from my own perspective.