As trends go through their natural cycle, the general public’s definition of ‘attractive’ websites alters. There’s no doubt that websites built in flash can be breath-taking. Wonderwall, AgencyNet 2.0 and Waterlife are a sweet reminder of the creativity and innovation that designers and multimedia developers are capable of.

However, while Adobe Flash provides what many ambiguously call the ‘wow factor’, it inevitably comes accompanied with unwanted baggage. The following are the main reasons why your website should not be built with Adobe Flash:

1. Lack of content management
   Websites nowadays are almost all CMS-driven. This means that the client or administrator can manage and maintain the content of the website instantly and without any technical knowledge. With the spread of Content Management Systems like WordPress and Drupal (both free and open-source), a website will never be considered of real value if its not constantly updated with fresh content (see my post on what makes a good website). With Flash, it’s almost impossible to have a proper CMS and therefore leaves you relying on a Flash developer to make any changes, and that within itself, is a tedious, time-consuming process. We’re at an age where sharing information has become as easy as tapping a button on your phone while on the road, the last thing we need is wasted (and costly) time on changes and updates
2. Search indexing and SEO
   There’s no real way for Google search to completely grasp the content of a Flash file. There are methods to give a general definition to the content, and therefore show up in some results, but for the most part, a Flash website’s left in the dark. Imagine putting so much effort in adding fresh, valuable content to your website as a social media tool to attract users, only for search engines to remain oblivious to it and therefore not bring you the interested crowd
3. Loading time and performance issues
   The main attraction in Flash is the reason behind its poor performance. Very rarely will you come across a website built in Flash that does not require significant time to load. And if it doesn’t, then it’s usually a lame, boring website that couldn’t been perfectly implemented with HTML and CSS instead. It is challenging to tolerate many seconds, and sometimes minutes, for a website to load
4. Lack of support across the different platforms
   When the iPhone first came out, users were too distracted with the eye candy to realize the lack of support for Flash. Now, with the overwhelming spread of the iPad, the inability to view flash websites in a number of devices has become a major issue of concern. In an open letter written in May, CEO Steve Jobs wanted to prove to the few doubters that Apple’s sole interest is to close all of their products, make them proprietary, and enforce its own way. The announcement also served as an indication that we might never see Flash playing on any of Apple’s gadgets again. If your website is not showing up on iPhones, iPods and iPads, then you’re losing grip on your audience
5. Instability of Flash player
   Flash player has been known to crash across the different browsers. Firstly, there was the famous bug that caused issues with Flash player 10 on Firefox that many blamed the open-source browser for, but later, many using Internet Explorer and Windows 7 shared similar complaints. The fact that this happened after Flash has been around for years is worrying for the future

Moreover, the arrival of HTML5 and CSS3 (along with the usual jQuery plugins) facilitates the switch
It’s far from an identical replacement, but the combination of HTML5 and CSS3 is extremely promising. Amongst other features, together they provide simple ways of embedding video and audio into websites. You also get full control of the appearance and can make all sorts of movements, transitions and animations. In fact, there is an entire cartoon built using only HTML5, CSS3 and jQuery called the CSS3 Man. Here’s a presentation of how HTML5 and CSS3 will shape on the new Firefox:

http://www.youtube.com/watch?v=gFmuNApHFec

Therefore, save yourself the hassle, be reachable, be light-wight and fast, appear correctly on all platforms, and avoid technical issues. It’s best to leave Flash behind and embrace the full potential of the alternatives while it’s a choice, before you’re forced to do so.

The Open Egypt HTML/CSS theme

When you’re freelancing, you don’t have a supervisor or manager to tell you how good or bad of a job you’ve done with your work. So many-a-times, you’re left in a bit of an imaginary self-critique that makes you feel like a superstar.

After throwing in a reasonable chunk of creative wit in a design for one of my clients, I was surprised to see them reject it. Even though almost everyone I spoke with was very impressed (albeit partially to help me feel better), the client thought it wasn’t top notch.

For that reason, Idecided to invest many hours converting the design into XHTML & CSS (and much more to make it compatible with Internet Explorer) for everyone to use. I feel proud to contribute something to the beautiful open-source community.

I’ve tried my best to make it clean and future-proof, so you shouldn’t have any problems digging into the code and make your alterations.

This could be ideal for converting into a CMS theme (like WordPress).

Features

• Built on the 960 Grid System: Therefore fully compatible and very easily changed for your needs
• Lightweight: Besides the three sample images used for the slideshow (you can place your own light-weight versions), all files amount to about 300kb
• Cufon font: Has a unique look with a non-system font
• jQuery Nivo slideshow: One of the coolest slideshows I’ve come across
• Social Media integration: Easy to add social media profiles and facilitate content going viral
• Sidebar UL CMS/widget-ready: Used ULs and LIs for the content of the sidebar which makes it easy to integrate with CMSs and any web applications using widgets

Preview the Wild Egypt theme | Download the Wild Egypt theme

Content

• index.php
• js files: For cufon and the jQuery stuff
• images: Placeholders and social network icons
• css: 960 GS and the main one

You can use it in anyway you want, and link backs are highly appreciated, but certainly not mandatory.

Out of Adobe’s undisputed Fab Four on any web designer’s desktop (Photoshop, Illustrator, Flash and Dreamweaver), the one specifically for HTML and CSS is probably the most threatened. Indeed, replacing any of the first three is almost an impossibility (see my post on GIMP’s attempt to overthrow Photoshop). Finding an alternative to Dreamweaver, however, has become more of a reality.

And why not? After all, when you’re cutting up the design, laying out the XHTML, and writing up the CSS on your framework of choice (see my reviews on the 960 GS, Blueprint CSS, or 1kb CSS Grid), you don’t need an application for rocket science. The main reason why many designers stick to Dreamweaver, as oppose to opting for any of the open-source alternatives, is because a) it tags along other essential Adobe products in a Creative Suite, and b) it boasts some neat features. However, it remains an over-priced product for a relatively simple task.

Panic Coda

In comes Coda: a web development application that brings everything you need in a single window (Mac OS X window, that is). Firstly, at $99, it’s not the priciest of applications, given that you develop websites professionally. More importantly however, it packs some top-notch features:

• Subversion integration that allows you to synchronize your files
• An emotionally touching FTP client built into the sidebar. Browse a remote server, click on the file you choose to edit, and save to instantly update the remote file. No need to use a separate FTP client, a text-editor, or endless hours
• Live collaboration. That’s right! Who would’ve thought that you’d be able to work on the same code with someone else at the same time (granted the other person bought his or her own copy of Coda)
• Live preview that is built into the application, but is actually using Safari. Unlike Dreamweaver, you are viewing the page in a full browser, but without actually changing windows
• Built-in terminal if you ever need (doesn’t get in the way if you don’t)

The most important aspect is that it’s sleek. The interface makes you feel very comfortable as you’re creating color-coded magic. Doing everything locally is a breeze, and then editing remotely on the fly saves a lot more time than running around your FTP client and temporary text editor. Its performance is also more impressive than its Adobe counterpart.

FTP on the left sidebar, colored code in main area

The biggest disadvantage must be in its price tag. Even if it is cheaper than Dreamweaver, thus making it the clear winner, it is still $100 more expensive than the second best open-source option. When the likes of Aptana Studio learn from Panic’s baby and step up their game, then no one will have to pay anything to live a proper web development experience. Until then, we’ll take the money out of our savings. My condolences to Adobe Dreamweaver, you were great, but now it’s time to move on.

Whether you are working with a CMS or creating a static page (which is logically the step before your custom CMS theme), you are often left to ponder the best way to display a navigational menu or pagination links so that they are centered and in blocks of equal size. You’d be surprised how easy that is, this short tutorial is to get you to create a list that looks as such:

We want blocks of equal sizes, each linking to a given page (without a gap between the edge of the box and start of the link). And we want the code to be perfectly valid, of course.

First, we’ll start with the markup, which is a very basic unordered list:

<ul class="navigation">
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
</ul>

This alone results in a standard list with bullets and links. Now we need to add the CSS that will give us the look that we’re after:

ul.navigation{
	list-style: none;
	text-align: center;
}
ul.navigation li {
	display: inline;
	font-size: 14px;
	margin: 0 10px;
}
ul.navigation li a{
	background-color: #e5f27b;
	border: 1px solid #d9e383;
	color: #666666;
	display: inline-block;
	padding: 2px 8px;
	text-decoration: none;
	width : 75px;
}
ul.navigation li a:hover{
	background-color: #fe8a61;
	border-color: #d78466;
	color: #ffffff;
}

As you can see, it’s very straight-forward and you can easily customize it according to your needs. It’s useful for navigational menus, as well as pagination links to be displayed at the top or bottom of a given page.