Navigation

Creating Flash Websites with Wix

Resources, Web Design, Web Development | Feb 24, 2011

There are some definite downsides to building websites with Flash (key being the lack of support for Flash on iOS), but there are still plenty of sites out there that are built on Flash, and that’s unlikely to change any time soon.

And sometimes you’re going to have clients who are dead-set on having a Flash website.

But what if you don’t know how to use Flash? Do you spend hours trying to adapt a template, learning as you go? Or is there a better way?

Wix is a great option for anyone who wants to create a Flash website without learning Flash.

Unlike a lot of website creators, it lets you customize virtually every aspect of the sites you create, whether you start from scratch or build your site from a template.

 

Two Options

Wix gives you two options for creating your website: you can start from scratch, which basically gives you a blank canvas; or you can customize one of their templates.

There are well over 300 templates currently available, in a wide variety of categories: e-commerce, business, consulting, real estate, photography, lifestyle, kids, personal, and more.

There are a lot of great templates offered, but there are also a lot of very poorly-designed ones, too. You’ll want to take a close look at them before deciding on one.

Given the number of templates offered, you’re almost certainly going to want to look for a template that could be adapted to your needs, rather than starting entirely from scratch.

It makes for a much faster design process, and eliminates a lot of the legwork and setup portion of creating your design. And, because you can change literally every aspect of a template, it still offers complete creative control.

 

Building From a Template

Let’s take a look at the process of building a Wix website with one of their templates. Make sure you not only view the template, but also preview it from the editor to make sure it’s set up properly and everything’s working before you start doing any customizations.

It’s possible to fix things if they aren’t working, but you’ll want to be aware if that’s necessary before you get started.

We’ll start with the Photographers Utopia template. It’s a simple template, but can easily be adapted to virtually any site where images and/or video will play a prominent role. For this article, we’ll be building a site to showcase a movie trailer for an indie film.

Movie sites almost always use Flash, at least to some degree, so it makes sense that if you’re designing a movie site, you might use Wix.

The Wix interface is fairly simple and self-explanatory.

We start by deleting most of the content from the home page and embedding our trailer video. We want this to be the main focus of the home page. So just click on each element and then use the trash icon to delete it (or just hit delete on your keyboard).

Then, go to the “Add” button the left-hand side of the screen, select video, and then choose the source. You can use video from YouTube, Metacafe, or 5Min, and you can customize the player. You can resize the element once you’ve got the video embedded on the site.

Then we can go along to add content on each of the following pages. I deleted the “Location” page (since it’s not applicable here). To do that, just click on the page in the Page Manager, and then hover over the arrow to show a drop-down menu. You can also rename or rearrange pages here.

To add content, use the “Add” button on the left. To edit content, just click on the element you want to change, and a menu for editing that content will appear on the right. If it’s a text element, you can either double-click to change the text, or, after you’ve selected the text box, click on “edit” in the tooltip that pops up.

One issue I ran into with this template was that I couldn’t change the font in the text boxes that were already there to anything other than Arial or Times New Roman. The only workaround I could find was to delete the text boxes and add new ones (I copied the content prior to deleting them, and then just pasted it into the new text box).

If you want to add an entirely new page, click on “Add Page” in the Page Manager. Name your page, and then use the Move Up or Move Down options to place it correctly within your navigation. It doesn’t get much easier.

Of course, you can also get into changing around the transitions, animations, and other settings, but we’ll save those for the next section, where we’ll create a site from scratch.

 

Some Great Template Examples

Wix offers a ton of templates you can customize if you’d rather not start from scratch, all available from their Create page.

My Personal Portfolio


Catering Website


My Flowers Shop


Designer Portfolio


Urban Artist


Yoga Center


Country Diner


Photo Planet

 

Building From Scratch

Creating a website entirely from scratch on Wix isn’t much more complicated than creating one based on a template.

You start out with a mostly-blank canvas, with a primary content area (the default size is 1000×650 pixels, though you can set it to whatever size you want) and a background. The first thing you’ll want to do is set up your master pages.

For a small website, you’ll likely just want to set up a single master page. Larger sites, or sites where you want specific sections, can benefit from multiple master pages.

On your master page you’ll want to set up the background color for the entire page, and then the background image or color for the main content area.

For this site, I chose a woodgrain pattern for the main content, with black for the overall background. I also set my title on the master page, so that it appears in the same spot on each of my additional pages.

Add any other elements that you want to stay uniform across every page here. Now, you might think that you should also set up your navigation at this stage, but I found that that actually doesn’t work the way you would think.

If you have multiple master pages serving as sections, then you’ll set up your menus at this level to navigate between each section. But if you have only one master page, your navigation won’t work at this level. What you want to do instead is add your navigation to one of the actual pages you set up.

Once you’ve got your basic master page set up, go to the Page Manager and click on “Add Page”. Name your page whatever you want it to show up as in your navigation. Add as many pages as you need (here, we did “Home”, “About”, “Story”, and “Contact”, the same as appeared on our template site).

You’ll see a “Main Pages” rectangle appear on your design once you have pages added in the Page Manager. Resize this so that it will fully encompass the content for each individual page you’ve created. In this case, it fills the part of the page that isn’t used by the title or the navigation.

To add a navigation menu, click on the “Add” button and then choose “Navigation”. You’ll be able to select from a number of pre-designed navigation menus (all of which are fully customizable once you add them).

Here we’ve chosen a vertical navigation menu. The original was black and blue, which doesn’t really work with our color scheme. So click on the menu, and then click on “Color”, adjust the color, and then “Format Text”, and adjust your text settings.

Next, I inserted an image (I used a stock image from the Wix gallery, of brown paper, though you can also choose images from Fotolia or upload your own). That was placed in the Main Pages box, rotated to set it at a skewed angle and then the video was added on top. You can layer as many elements as you want, and rearrange them by going to the “Arrange” menu at the top.

You’ll notice that the colors on this are a bit washed out, and the wood and paper textures aren’t nearly as vibrant as they appear in the menus. To desaturate or otherwise adjust the colors of your images, just click on the element and then click on “Effects” in the right-hand menu. From there, you can select the “Adjust Color” option, and adjust contrast, brightness, saturation, and hue.

On additional pages, I set the same brown paper background, but this time without the skew. Size and arrange it on one page, then copy and paste it on each additional page. You’ll have to place it by hand, though. Tip: If you don’t want to take the time to set up guides, you can place it roughly where you think it belongs, and then switch back and forth between the pages to see if it’s positioned correctly. Make micro adjustments until you don’t notice the transition between the pages.

Photos and text were added to each additional page. You can add frames around your photos by selecting the photo and then click on “Frames” in the right-hand menu. There are quite a few frames to choose from. You can also add effects to your photos, the same as you did for the background images. And you can add animations and behaviors.

Adding a contact form is easy enough. Just go to “Add” and then click on “Widgets”. The contact form option is listed there, and there are a few different skins to choose from (and customize, of course).

Finally, you’ll want to add transitions between your pages. To do that, just click on any page in your site, and then click on Transitions in the Page Group menu on the right. Most common transitions are listed there. I picked the blur transition because it’s similar to the one used in the trailer.

Once you have everything arranged and set up the way you want it, just click on “Preview” at the top to see the production website. If you’re happy with it, you can click “Publish”.

 

Examples of Non-Template Sites

Wix has a great gallery of non-template sites you can look through for inspiration.

I Love David A. A very cool site that includes a splash page for visitors to select a language.


Barefoot Photography. A pretty site with centered content and a layered look.


FlyingDork.com. The FlyingDork website has an animated intro, showcases a demo reel on the home page, and has an interesting navigational structure.


Jen Adams Photography. This is a very classic site design, that’s both elegant and well-thought-out.


Sproud. Sproud has an interesting splash page, and then a very traditional, cleanly-designed site.


Event Essentials. Another very nice, more traditional design, but with plenty of animation effects.


Belinda E.S. This site is just a little bit grungy, but at the same time very soft and feminine. The vertical tabbed navigation is also interesting.


Conscience The Film. Here’s another movie website, this time for a dramatic short.

 

Widgets and Other Designs

Wix also allows you to create widgets, and the process is very similar to creating a website, just simplified.

There are three different options for creating non-site designs: Widget (300×400 pixels), Comment (400×300 pixels) and Header (800×250 pixels). Just scroll to the bottom of the “Create” page to select. There’s also a “Widgets” template section you can browse.

 

Who Should Use Wix?

The best part about Wix is how incredibly easy it is to use once you’re familiar with the interface and the minimal quirks.

Both of the sites created for this post were done in about an hour (a little less for the template site, a little more for the site from scratch). That includes coming up with the design, creating the content, uploading images, etc. It really simplifies and speeds up the development process.

Wix doesn’t require any knowledge of Flash (or any other programming language), which is also great for a lot of people. And for small sites, or portfolios, Wix is an excellent option. The free plan is suitable for trying it out and testing the waters.

Upgrade to premium and you get your own domain name, no ads, unlimited bandwidth, extra storage, and more. Premium plans start at $4.95/month (though this plan still includes ads and the Wix logo) and go up to $24.90/month for their full-featured e-commerce plan (though at the moment all the plans are discounted). There are also discounts for paying by the year rather than monthly.


At this time, there’s no way to run a blog with Wix, though you could always link to an off-site blog. It’s also not necessarily going to be great for very large sites, or e-commerce sites with a lot of products.

But overall, Wix is a great, low-cost option if you want to create a Flash site without learning Flash.


Written exclusively for WDD by Cameron Chapman. Please note that links to Wix contain an affiliate ID which you can use to support WDD when upgrading to a premium account. This  has in no way influenced the content of this article and the opinions expressed in this article are those of the author only.

Ever used Wix in a production environment? We’d love to know your experiences in the comments!

Share this post
Comments (no login required)
  • Marciano

    Reading through it shortly; please include a disclaimer when your writing sponsored things as this, Wixx is known for their ads, this seems just like it.

    • http://www.webdesignerdepot.com Walter

      It’s a non sponsored post yet there’s ben a disclaimer about the links just above your comment together with the bio line.

  • http://knmedia.net/ Ale Gadpen

    Are you kidding? Web Designer Depot and putting a post about Wix? What about agencies and young proffesionals that make a living with web development/desing?
    In my years of experience, when a customer takes full creative control of the project the result is lame. And Wix is for lame/lazy designers that don’t learn flash, semantic coding, php in order to give their customers the quality their business needs!!

    Hey! I gotta another good post to put right before this one: “Create your Professional Card with Microsoft PowerPoint”

    Cm’on! I barely believe that this post found it’s way on WDD. ¬¬

    • http://www.webdesignerdepot.com Walter

      Nothing wrong with Wix, it’s just a tool for some people to use, and we know it’s not for everyone :)

  • Eduardo

    Can’t believe you are recommending to build a full site in flash in 2011. Bad advice my friend.

  • http://sexidesign.com Melody

    It’s nice to see the wide array of different templates/designs that wix is capable of creating. A lot of times sites offer to create template web sites with designs that are often just so generic that there is little wiggle room. Would be great for those wanting a shortcut.

  • Brian

    If someone is looking for a website built in Flash in 2011 that is probably a client you don’t want to have. You should be focusing forward thinking technologies. Flash needs to got the way of the dinosaur. It’s the 2011 version of building your website with tables.

  • http://www.webdesigner-michigan.com Kevin Mist

    “key being the lack of support for Flash on iOS” – How about the lack of any perceivable SEO? This seems to be a large issue in my book..or how about users with low bandwidth? an issue where I live (yes I live in the sticks… exactly 3 miles from the middle of no where is my actual address)

    I was a little disappointed when I saw this topic here but I will look on the bright side I suppose. The next time I run into a client that HAS to have a flash site that I have failed to convince that it is a horrific idea.. I will point them this direction so at least they will not end up at a competitor that will build them a flash site with no thoughts put to SEO or usability

  • http://www.bebop-ad.com BebopDesigner

    I’m glad it’s not just me… Flash is not meant for internet, not anymore. Sorry Flash fans.

    I’ve had to turn down projects because the client was obsessed with doing everything based on Flash. (for some bizarre reason they were all photographers)

    I don’t think Flash should disappear at all. You can make great many things in Flash, it’s just that a website is not one of them.

  • http://www.webdesignerdepot.com Walter

    I agree that Flash is not for everyone or everything, but it does work great in some cases.

    Check this link for SEO with Wix: http://support.wix.com/index.php/SEO

  • http://wendellers.com wendelle

    I agree with the other comments, i can’t believe that wix is being promoted here, flash is good.. in browser games i think.. but not in website.. and also wix is not for hardworking people around here….

  • Nate

    Yup, I also agree with my other fellow posters.

    Considering how WDD is a resource that promotes a better web, seeing articles/promotions like such is disappointing. Why not promote, MS Expression which at least gives you HTML templates as opposed to a site that relies on an external plugin. By the way, please make sure to highlight that Wix sites wont work on iPhone, iPad, or iPod because these devices don’t support flash.

    Greatly disappointed.

  • http://www.dessign.net Dessign

    I would not recommend using Flash to build entire website in flash, maybe small part of it if you want some extra features, But I know there are still clients who think Flash is the best, sad but true.

  • http://nickeykhem.com Nickey

    I wouldn’t go so far as to say it has no space for internet, flash websites allow you to indulge in a deeper experience, and i have actually found it popular with luxury clients that i work with, as they really don’t care much about people living in the sticks…as its not their target market. The art direction and experience is way more important to them.

  • Marciano

    I think the writers here will think twice in the future, good.

  • http://www.nichterdesign.com Ed

    Maybe if some of you fools would try WIX and not bash it you would see its potential. Like it or not, this to some extent is the future of web design. Go have fun coding hours of code, I can have a site up in a few hours.

  • http://www.aledesign.it aledesign.it

    A nice idea…special for the newbie…but I hate when I see the icon…sorry.. but I think is the future..unfortunately

  • http://www.microignite.com GSP

    This is kind of like posting an ad for McDonalds on a foodie blog – Just like McD’s, Wix has it’s audience but it’s out of place here and the snobs will laugh at it.

    Full Flash is (just about) still fine for ultra high-end experience sites or for the odd animated element, but for basic 5 pages and a form websites it’s a poor medium – what you gain in snazzy transition effects you lose ten times over in device compatibility and SEO.

    Agree with the posters who say that this sort of thing is the future – hosted and managed platforms which abstract the code are certainly powerful and will probably replace low-level hand coding, but full-Flash sites are definitely not the output medium of choice.

  • http://[email protected] Blonde Brit

    Guys, stop being so against Wix and flash sites. Firstly get your facts straight -Wix do offer SEO help and guidance so you can do search engine optimization for a flash site. There are designers out there that charge thousands of $s to build a site and Wix offers a great platform for those who want a professional website without having to pay so much money. Granted designers will always be needed but not everyone can afford to lay so much cash when they are beginning to build a business. Like it or not flash sites look great and am very grateful that such a platform has been created.
    Keep pushing Wix – I know enough users out there who love it and rely on it to.

  • Sarah Pederiva

    Guys! relax, I’ve been a designer for almost 6 years now, I’m an HTML-CSS-PHP-Flash and Flex wiz but with the economy today I find allot of my clients want a quicker job in less time (less money…)- Wix allows me that.

    If a project takes me up to a week with HTML’s and working along side with a webmaster or programmer, in the half the time I can create something simple with Wix.
    As it said in this article, this isn’t for every one, Wix is for those who aren’t experienced with web and want a nice quick site.

    Think about it this way- how many people you know asked the neighbors 16 year old to create a website for their car-shop? this is for them :-)

  • Graziella

    Personally, I can’t stand Flash. I think it’s a thing of the past and I don’t see why anyone today would use it except maybe games creators. However, I do have a cousin who set up her website with Wix, she’s a junior graphic designer with a small budget so publishing with Wix was very cost effective and she did get new leads through her website. She spoke with one of their sales reps prior to upgrading and was told that the websites are SEO friendly and will soon be viewable through smart phones. If this is true I see no reason why small businesses shouldn’t use these platforms to get themselves online.

  • http://www.katherinedizio.com Kate

    Wix is what it is…no need to bash it. It’s good for designers who don’t have the time to keep up with the coding (I’m talking strictly graphic designers here, guys), and clients that need more affordable options.

    I freelance, and I use wix for my portfolio. Because I have a full time gig during the day, wix is good for me to update quickly if necessary. Also, I give this option to clients who need to save a buck. In this economy, you get more work that way!

    Let’s face it. Will I eventually put in the time to make my portfolio site better and code it properly? Sure! Of course I will. But, alas, I don’t have the time.

    Wix does what it needs to do, and it does it sufficiently.

  • http://www.cquinndesign.com Chris Quinn

    WIX is awesome for people that do not know how to design websites. But it’s not for everyone. I mean, you are not going to see a fortune 500 company developing their website with WIX. It’s good for personal pages, and maybe small businesses that just want their name on the web while saving for a real website design.

  • http://www.gabriel-c.com Gabriel Champeix

    Most of these sites are plain rubbish. Campy, chessy, outdated templates with poor font management and poor graphic balance. At best, it’s average.

    You’re a designer, and you want a portfolio but you don’t know your way around Flash ? Do it in HTML, don’t use crap-factories such as Wix. It’s full of ads, it’s not professional. It’s plain ugly 95% of the time. Do something simple and elegant, hell, use a wordpress if you want.

    You’re a designer AND you know how to use Flash ? Get your s**t together, saddle up and do it yourself. Flash can be great, no matter what the SEO guy next door tells you – he doesn’t know sh*t when it comes to visual creation. Flash can create amazing interactions and display a huge amount of creativity, if you use it well. Problem with SEO ? Do a lighter HTML version on the side with a lot of keywords. Same stuff with iOS ; show that you care about those users with an HTML version.
    Insert your flash display in a clever and complete system. Be wise. Be smart. Don’t be a sheep screaming around “OMG flash iz so dead !!1!!1! long live HTML OMG OMG”. Make both. Master both.

    The HTML of 2011 is the Flash of 2001. Plain and simple.

    PS : I also think, like other colleagues, that making that kind of post is not a smart move. We’re professionals with a sense of aesthetics. These kind of platforms are crappy crap-copters for Crapville..

    Thank you for reading me.
    Gabriel