I'm about to start building new start-up so i need some guidelines from you.
What's the best way to plan a website? I don't think like "first design, then the database relations, then start development", but "how to plan the way application is going to work"?
Are there some proven methods, like THE best way to do website 'blueprints', like with some tool or something?
I need as much feedback as you people can give me, this is really important to me.
Links, experiences, everything is welcome =)
I'd like some tool to be able to draw the process like
page
- if logged in - do that
- if not logged in - do that 2
Write it down. On a piece of paper. Draw lines between the related parts.
Rinse and repeat as necessarily.
I'm serious. Tools, fancy diagrams, flowcharts, all look pretty for management, but they get in the way of actually understanding how your app is going to work. If it's so complex you can't get it all on a couple sheets of paper, do a big picture view and then do each sub-section.
If you can get a HUGE whiteboard or piece of butcher paper, it's even better. For some reason, having a large space to work on is fantastic for working things out.
I used to do huge specifications in word...hundred pages or more. I no longer believe in that since as soon as you write it down it is likely to change (your ideas, features, etc.). Instead I suggest that you look at an MS product called SketchFlow (which comes with Blend). This allows you to quickly and without writing any code snap together a working wireframe, sitemap, and mock up. While you can create a high fidelity (it functions and looks very close to the real thing) I suggest that you instead focus on creating a low fidelity mock up. There are sketch styles which looks like hand drawn UI elements. This way you can focus purely on how your product works and no so much about how it looks. If there is too much 'finish' put on your mock up you will get hung up on the "big blue button" syndrome where people are more concerned with how a button looks and less concerned with what it does.
I wrote four articles on wireframes, mock ups, and the like and suggest various tools and why I chose SketchFlow. Then I go into building a mock up in SketchFlow.
http://dotnetslackers.com/articles/aspnet/Building-a-StackOverflow-inspired-Knowledge-Exchange-Sitemap-and-wireframes-with-Expression-Blend-3-and-SketchFlow-part-1.aspx
http://dotnetslackers.com/articles/aspnet/Building-a-StackOverflow-inspired-Knowledge-Exchange-Sitemap-and-wireframes-with-Expression-Blend-3-and-SketchFlow-part-2.aspx
http://dotnetslackers.com/articles/aspnet/Building-a-StackOverflow-inspired-Knowledge-Exchange-Sitemap-and-wireframes-with-Expression-Blend-3-and-SketchFlow-part-3.aspx
http://dotnetslackers.com/articles/aspnet/Building-a-StackOverflow-inspired-Knowledge-Exchange-Sitemap-and-wireframes-with-Expression-Blend-3-and-SketchFlow-part-4.aspx
Hope this helps you!
This is a pretty big question. My best advice is to start by thinking hard about your user, what their goals are etc and then draw up some personas. Personas are descriptions of the typical people who will use your site. Once you have your personas you can start to plan your site.
http://en.wikipedia.org/wiki/Personas
Once you have your personas you can work out user journeys - these are essentially flow diagrams detailing how users will achieve the tasks you want to help them with.
http://www.boxesandarrows.com/view/an_introduction_to_user_journeys
From user journeys you can work out the pages you'll need to create in the form of a site map.
http://en.wikipedia.org/wiki/Site_map
Then finally you can work out the content of the pages as wireframes.
http://en.wikipedia.org/wiki/Website_wireframe
There are loads of tools out there: Visio (http://office.microsoft.com/en-us/visio/FX100487861033.aspx) for the PC and Omnigraffle (http://www.omnigroup.com/applications/OmniGraffle/) for the Mac. Both these tools have web design stencils available for free download on the web. There's also a great online tool call Balsamiq (http://www.balsamiq.com/products/mockups) that allows you to lay out pages without having to use a design tool. In the first instance though a pen and paper are the only tools you need.
Once you have these details sorted you can start to think about data models, graphic design etc etc. However this whole process is iterative and you might say will never be finished :)
Good luck!
Develop your data model first. Even if you don't go whole-hog with UML, get a sense of how your data will be represented.
Come up with some use cases to validate your data model. It doesn't have to be perfect, but it should be 99% there to avoid pain in the future.
Once you have a data model and use cases, your interface needs (in your case, your website) will become a great deal clearer. Of course, I'm coming at this from a purely back-end perspective.
Once you have an interface that's workable, hire a good UX specialist to round out the details for you (both workflow and actual interface).
I use FrontPage for two different tasks; authoring html help and authoring a couple of websites. The websites don't require a lot of stuff -- they are there to disseminate a bit of information to a couple of small audiences.
FrontPage has been quick and easy for these tasks. WYSIWYG is good for these jobs and I like being able to click on links to quickly bring up other pages in the editor.
I've been exploring all sorts of options. tools that work online such as Kompozer make editing the html help difficult (at least, I haven't found a way around) and other html-level tools are just too much work. Tried nVu, Kompozer, Aptama, Komodo, Bluefish and so far, unless I'm missing something, I'm not sold on any of them.
I'm about to take a look at SeaMonkey but wondering if anybody has any recommendations. Or should I go back and look at those other tools again -- maybe I missed something?
Notepad++
I think the natural upgrade path would be Microsoft Expression Web.
People still use FrontPage?
I switched a couple of years back to DreamWeaver and never looked back.
Something to consider is that you could deploy these sites as wikis (which don't have to be publically editable) and edit them directly on the web in your browser. This would give you the ability to click around and do pretty much wysiwyg edits. It would also make it easier to maintain larger collections of data and to make new pages. You also don't really have to do any HTML at all because wikis mostly come pre-HTMLed (and CSSed and Javascripted), you just need to fill in the content.
I should note that this won't work if your webpages are deployed statically on a restrictive shared hosting account, but even most shared hosting supports installing things like wikis these days, so hopefully this is something you can look into.
I should also note that this probably isn't the best way to do local HTML help files, but if the HTML help is online, this is probably still a good choice.
I'm making this community wiki so others can add links to other wikis if they like or add more info on why you might want to or not want to use a wiki for this purpose.
Some wikis to consider:
MediaWiki - The wiki behind wikipedia
MoinMoin - Implemented in Python and popular in that community.
TiddlyWiki - Implemented in Javascript and runs on a single page. This is probably the most different wiki that's out there. Some love it, some hate it.
NVU and Kompozer both are best suited for you. NVU is my personal choice. Choose your poison. :)
FrontPage has been replaced by SharedPoint Designed in the Office suite.
You could also use Microsoft Expression Web if you can have it.
Drewamweaver or MS's Visual Studio/Web Developer Express will do the trick. They're both overkill (especially MS's tools).
I also think MS has (free) HTMLHelp. It's out there, but I don't know if it'll produce the files you need.
It depends on what kind of pages you are designing. If you are using Adobe Flash, Dreamweaver would be the best option but I would recommend "Microsoft Visual Web Developer Express". I am currently using it and totally love it from the bottom of my heart.
I'd say Dreamweaver, but last time I looked there was still bloated code, not as bad as the MX days mind.
Smashing Magazine has a list of WYSIWYG tools that would be worth a look :
http://www.smashingmagazine.com/2008/05/06/25-wysiwyg-editors-reviewed/
I persuaded my friend to ditch Dreamweaver for NetBeans, took a week or so but I got a pint out of that :)
You might look into Aptana (http://aptana.org) which should provide everything you need. I think it even has a WYSIWYG editor, though I would really recommend learning html instead.
I would use Notepad++ for the simpler things, and Dreamweaver when working with other Adobe products. Notepad++ is simple and has a lot of great features. Dreamweaver is huge and will take some getting used to.
Try dokuwiki. I've implemented a wiki/manual/documentation for my app in a week. It's very simple n easy installing. You just need PHP, no database (mysql), the information is stored on files. Give it a try.
My wiki implemented wiki doku: wiki.vigo.com.br
Microsoft Visual Web Developer Express perhaps? http://www.microsoft.com/express/vwd/
Works well, and it's free!
Something similar to FrontPage is Adobe Contribute. It does cost $199, but if you're looking for something as simple as FrontPage, it may be a good option for you.
A freelancer web designer I work with will setup clients who want to make simple HTML edits to their sites with it and they've all been pretty happy. They're all non-technical people.
Dreamweaver is good, but however using the WYSIWYG may have problems getting consistency when viewing between IE, firefox and safari.
I want to get more inspiration and ideas for creating web based business applications. These apps have treeviews, tabs, grid, forms, panels..etc. I develop apps but want to improve my design skills. So I would like to look at very good looking online business apps which have good use of text and background colors, good use of a general theme across the site, good use of white space, groupings and a clean layout.
I am NOT looking for web design templates or how to design a web page using css and columns.
I want to design a business app (semi heavy use of controls) which looks polished and professional.
So if you encountered a business app site or template which you liked, please share.
Business app means something like mint.com or salesforce.com.
these apps are worth
checking out for ideas (you can sign up free accounts with all of them)
Invoicing:
Freshbooks.com - popular
Invoicemachine.com - polished UI
Cannybill.com - polished UI
Blinksale.com
GetBallpark.com - very slick and new, saw it on reddit a few days ago
Accounting:
Xero.com - polished UI, they also use lots of ExtJS controls (rare)
LessAccounting.com
Project management:
Basecamphq.com - popular
There is lot more at feedmyapp.com
Check out Salesforce.
Look at the pinnacle of web applications: gmail.
I was impressed with the Terracotta site, it has a lot of good info without being too cluttered.
The Zoho Suite is pretty sweet.
Seconding gmail, and the whole rest of Google's apps. Bonus attention to Google Calendar, that thing is a fantastic example of a classic desktop app made better on the web.
You could also take a look at the samples here:
http://www.sencha.com/products/js/
I have the feeling that Flash-based ( or Silverlight-based) websites are generally frowned upon, except when you are creating games or multimedia-content rich applications. Why this is so?
Flash is infamous for its poor accessibility.
Keyboard navigation does not usually work, and Flash (up until recently) did not have search engine support.
Flash applications does not work in mobile phones and other portable devices.
Flash is not there in the iPhone!!!
Flash is controlled by a single company (Adobe) and so it is not following any well defined standards for the Internet.
The beauty of Internet lies in the fact that you can always view the source code of any website you are in. This way you can use the same programming/design techniques in your website or you can find security flaws in the web application. This is not possible in Flash. In Flash, source code is closed.
The big question is, why should you use Flash "except when you are creating games or multimedia-content rich applications"?
jtyost2 says,
"I would also add that you can't directly link to any content inside of a Flash site, thus breaking one of the major factors that makes the Internet, the Internet, links."
content weight
usability
crawlability of search engine bots
accessibility
ease of use (disputable)
technology encumbrance (added software required to access the site)
security issues (needing to add software comes with issues involved with installing or running that software/player of the content)
[Edit] Why I place usability and ease of use separate is best explained in this link
Usability:
a result – software that is usable;
a process, also called user-centered design, for creating usable software;
a set of techniques, such as contextual observation and usability
testing, used to achieve that result;
or
a philosophy of designing to meet user needs?
Ease of use:
Effective
Efficient
Engaging
Error Tolerant
Easy to Learn
I agree with the comments on that site, but this is all debatable...could be a good stackoverflow question: is usability and ease of use the same? IMO part of usability is ease of use and vice versa, but they are not necessarily the same.
I hope I don't enfuriate the more semantical sensitive with this edit :-)
Interestingly everyone here blasts Flash/Silverlight and you would do well to recognise that this is only one side of the coin.
Flash (and Flex) allow web site designers significantly more flexibility and richer content for their site and this works in a variety of situations - e.g. sites relating to movies, or bands, sites for kids, sites for games etc.
Certainly, there are many reasons to not choose Flash/Flex/Silverlight, but one can do sites just as inaccessible in JavaScript these days. I have previously worked with JavaScript products that have no reasonable usability by blind people, or web crawlers.
Flash penetration (from a biased source to be sure) is 99%+ (http://www.adobe.com/products/player_census/flashplayer/version_penetration.html), which means that those that say "would never visit a Flash site" are in the 1% of the population that do no install Flash, do not watch YouTube or movie trailers online.
So, you need to be mindful of your audience. Certain audiences and situations would definitely be better off with plain HTML pages and a minimum of JavaScript (government websites, programming websites are two areas that spring to mind). Other times it is because the audience are office workers that are not allowed to install Flash in the browsers.
Rich Internet Applications (RIA) is one area where there is a distinct clash/struggle between the Flex/Silverlight and JavaScript/CSS/HTML sides. I've worked with both, and I'm now of the opinion that requiring Flex/Silverlight plug-ins is fairly reasonable, though you can still lose some visitors if the application is public.
In summary - you're best to identify your audience, identify what they're willing/able to use and then based on such limitations decide on your technology.
Flash and Silverlight based sites typically go against basic Internet conventions with their closed models.
For example, most Flash & Silverlight based sites:
Ignore the back/fwd button.
Don't allow you to send anyone a URL to a specific place on the site, or bookmark a specific spot for later via your browser
Place the internet in a fixed size box. No dynamic sizing for wider monitors or higher resolutions.
"I was about to click checkout but I wanted to change something so I hit the back button"
In this next rant s/Flash/Flash or Silverlight/g
The Flash application/plugin is a closed source pot of serious undisclosed security holes that expose private data, allow modification of arbitrary files on your hard disk, etc.
Flash files are enormous for basic content. There are more efficient ways of doing things
Flash is slow. The plugin on my Windows PC can hog 100% of the CPU time to play some shitty websites.
Flash is non-standard. There isn't a supported flash plugin installed everywhere. Linux users can't run it without jumping through package management hoops. Firefox users on Windows don't get it by default (well didn't last I checked).
Flash is annoying; your users don't want to be bombarded by animations and jingles and junk just to get some basic information.
No back/forward functions unless the Flash designer wanted to implement them in
Can't view a single page without waiting for all the content/scripts that make up that "page" to load. That's really quite painful if all your user wants is a slice of text and you force the multimedia down their throat.
Most Flash-only sites are really bad; the designers seem more concerned with using all of the features of the flash engine rather than presenting something that's concise and useful to the user.
I am a Flash developer. The firm I work for has no difficulty finding clients who want us to build Flash-based products for them. There is a certain set of applications which it is much easier to develop in Flash than in other environments I have used.
But Flash has its problems. Some above have complained that Flash apps do not include keyboard support. Others say it is because the developers are too lazy to implement it. The truth is that many of the components that come standard with Flash are buggy. At my firm we have had to write our own replacements. One feature that is problematic is keyboard support. I implemented my own support for keyboard interaction. It works well, but required effort. If I were writing a Windows VB app, the keyboard navigation would be provided and would work well out of the box.
The same is true for deep-linking, back-button support, etc. A clever developer will be able to make a Flash app behave well. Some open source libraries are indispensable here.
As for flowing layouts, I just completed a proof-of-concept for this (in AS3) as well. It is possible, but requires much effort. Why do I make the effort? Because of the other things that Flash does well.
My biggest gripe with Flash is that it takes you "out of the browser" into its own totally separate application. This breaks "browser standards" - i.e. the functions I can do in my browser:
Right click
Middle click (for opening links in other tabs)
Selecting text
Copy & paste
Printing
Keyboard shortcuts (since Flash steals keyboard focus)
Back/Forward buttons and the whole "page" concept
Javascript interaction with other elements on the page (I don't think this is possible).
"Inspect element" in Firebug or Chrome, if I wanted to see the source of a particular part of the Flash file, or find the image being used.
Flash has its uses. It's good for content, not webpages.
Printing is often poorly supported and the backbutton does not work.
I think it's a matter of selecting the lowest cost medium to reach your target audience,
be it Flash or Silverlight or JavaScript or plain text.
You can have text-only, JavaScript-only, etc. versions of your site if you have the
money, and your target audience come with different prioritizes.
So my question to you would be: does your website has people who frown on Flash as its target audience? If yes, you need to stay away from it. If not, use anything to give your
visitors a good experience.
SEO is the prime issue. Still Flash is not crawlable. But Adobe is working on it.http://www.adobe.com/devnet/flashplayer/articles/swf_searchability.html for better swf indexing.
Does anybody know a site called YouTube? It wouldn't exist without flash. Flash has great video/multimedia capabilities that simply cannot be ignored.
Flash is amazing when used in the proper way, in appropriate circumstances and when the designer/coder has taken care to embed basic accessibility features.
The thing is, like all good things, there's a lot of abusive use (flashturbation). Especially in the beginning, when people just want to slap Flash wherever they can just to show off.
But I strongly disagree that Flash sites are bad: When made properly, and with good UI design and accessibility, they bring a whole new dimension to the web.
See Steve Jobs' Thoughts on Flash: http://www.apple.com/hotnews/thoughts-on-flash/
Let us not forget that Flash allows web sites to display video, animation, user interaction, etc., and it allows this to be a simple process or a geeky techie one, depending on what you want to do. Many bad Flash sites are down to the author.
If YOU don't like Flash then the answer is simple, don't use it. Don't install the Flash plug-in, or install a browser plug-in such as Flashblock on Firefox. This replaces any Flash movie with a play button, preventing and download until it is clicked.
Better than that though, if you don't like the solution that Adobe or Microsoft are giving you, then come up with a better one, or at least let them know what you don't like, they do take feedback seriously. Support some of the people who campaign for accessibility improvements in Flash, for example visit http://niquimerret.com.
Accessibility is an ongoing issue and not one that will go away, Flash accessibility is improving for people with physical disabilities. In in some cases the use of Flash enhances the experience for people with cognitive and learning disabilities, when an concept or idea is better explained when presented as an animation rather than a page of words and static images.
Flash adds another heavyweight component that's required to properly view a web page. The flash plugins are often buggy and can crash a browser. Flash pages often are used to make cutesy animations and other things that make it harder to quickly navigate a site.
All of the above is true for the wild wild web.
However, for internal business applications, Flash and Silverlight allow the user to have something close to a fully-fledged application in their browser. Accessibility, SEO, and closed source are not very important in an internal application. All that matters is making the user's life easier.
I dislike Flash based websites because what happens if your browser crash or your connection dies for a bit? You have to load it again and go back to the menu, and select the item you wanted to read about, and so on and so forth.
Just don't do it. :S
I don't install Flash on my browsers, mainly to escape the nuisance of animated ads, but also for all the security and privacy reasons mentioned by others.
So sites done completely in Flash are nonexistent as far as I'm concerned. (W.r.t. Youtube, I download videos directly into Miro.)
Probably for the same reason C programmers shied away from Win32 API, Win32 programmers from MFC and MFC programmers from Windows Forms. It's tricky to use and understand - I have tried programming in Flex and am getting along pretty well but it is not inherently designed for typical web application design e.g. there is no native (at least until Flex 3) support for databases or cookies or sessions - you need to put all 3 in PHP or another server-side page and call that from ActionScript.
Try making a simple register/login page with PHP and then again with Flex/Flash and you will see that all the server side crunching is done by someone else - again, this is probably by design since we have HTML/JavaScript for the front-end mixed with ColdFusion or PHP etc. for back-end in "traditional" web applications.
Like started by other people, Flash is bad with the keyboard - try pressing Ctrl-T in Firefox when a Flash object embedded in an HTML page has focus (mouse-over) - so that can be frustrating for the user...
Having said all that, I would still rather make a web application front-end in Flash/Flex than HTML/JavaScript/CSS since the latter needs a sharp learning curve that gets quite bewildering after a while since you have to account for the "good" design aspects of CSS and JavaScript and the bad ones too - and also the peccadilloes that JavaScript/CSS inherently have and those which are introduced by the JavaScript library vendor (Yahoo's YUI, Google's Ajax API, script.aculo.us, etc.
If you are already a web programmer who knows CSS/HTML/JavaScript very well and have a good development environment set up on your PC with all required code inspectors and runtime debuggers etc. etc. then it's easy to keep on working in that (not taking into account end-user preferences) but if you are like me and want to make a web application ready and available for use quickly and want to add features to it quickly while making it pretty all the time, then Flash/Flex is a better option, IMHO.
I am a Flash developer.. and I have found that although Flash requires more effort in coding, the potential is enormous. You can create very simple sites with simple transitions, so subtle it would seem to be a normal HTML page, while still being just as light.
At the same time, you can use OOP with ActionScript to create a website that is as complex and as inclusive, as well as feels and acts like a desktop application. WHILE ALSO REMAINING VERY LIGHT! (only the content required is loaded on demand, as apposed to 4 column HTML sites with far too much information.)
Nowadays, and this is still without migrating to ActionScript 3, but still using ActionScript 2, MY flash files contain simply 2 or 3 lines of ActionScript, only one frame, and an empty stage. Everything else is dynamically created or added at runtime.
Flash's problems are not about Flash, but about lazy development.
In its defence, most of the issues raised here about how people have implemented Flash in their websites, not about Flash itself. Flash does support accessibility it's just that most people don't consider it when building their sites. Flash does work on mobile phones - it's Flash Lite, although the ActionScript is limited in earlier versions.
Why should anyone have an automatic right to view the source code of a website?
A web author has spent time and effort dreaming up their code to share their ideas through the medium of the web. If you want to know how something works, why not put a bit of effort in yourself, and work it out? The beauty of the web is the message, not the medium.
So what if Flash is owned by a single company - Adobe bought it for a reason, and that's because it's a fantastic bit of kit. The problem comes from web authors not using it properly, trying to make it do things it was never intended to, or simply not applying standards to their sites when developing using Flash.
What is so evil about a Flash based website? Absolutely nothing.
It's like asking what is so evil about a gun. Nothing. It's the idiot wielding it that has the problem.
Flash sucks and I refuse to visit Flash-based web sites. Why? Because I can't. Why? Because Adobe is too ignorant to write a plugin for a 64-bit browser.
Look at any major car maker's website, they are ALL in Flash. It depends on what you are doing. If your goal is to provide a rich, sexy website Flash/Silverlight will give you a huge advantage in terms of development time. IF you are providing content/data HTML and JavaScript (jQuery for example) can give you a lot of whizbang without requiring additional software plug-ins (Flash/Silverlight).
Flash Player is the culprit behind more Mac OS X crashes than anything else. It's not exactly well-known for its stability.
All the above answers are focusing on Flash, Silverlight is just as bad or worse. If you are running Firefox with NoScript (you should be) then you have to click on every script that you wish to allow to run.
So build your websites with scripts, Flash and Silverlight. Just make sure that they still work with them disabled. Many of us will simply move on when we open a site and see nothing.
Many of us have had bad experiences with Flash based websites which has propagated the idea that flash is "evil". I don't really think it's fair to apply the label of evil to any technology or framework, they are each designed to cater to specific scenarios and many of them do well in those scenarios, for example, I have no problem with websites that use flash video.
A few other responses have touched on the fact that the use of flash contradicts many of the standard metaphors we use on the internet (e.g. links and navigation buttons), I hate this as much as the next web user but this doesn't really make flash evil either.
While it has been said that there are mechanisms within Flash/Flex to add support for these things, in my experience these are rarely implemented, which is not directly the fault of Flash per se, but is very annoying for the user.
Perhaps the evil is not Flash/Flex but Adobe for not making many of these things easier or more visible to developers.
For the record I have never developed in Flash
Flash isn't evil, it's what people do with it that's evil.
For goofy vector animations and maybe even for example a 360 product view or interactive diagram, yes. Flash can do beautiful Full HD animation on my ancient box # 60 fps using ~15 % cpu.
For web video, if you have no other choice, I suppose.
But for entire websites and these things called 'RIA's, no.
So shockingly a technology works better for the thing that it was designed to do.
Flash is one more stuff to learn in web development. No thanks!
There are just too many already. If I can do my job without it, I don't need it.
Programming is being paid less every day.