Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
As a little side project, I am starting to build a new website for a certain organization I am affiliated to, which current site is simply outdated.
I am regularly a Java developer, and last time I really did some web development was back in the late 90s, when <p> was still more popular than <div> and Javascript was cutting-edge technology (JQuery is for lazy bums these days :) ).
Anyway, I feel really outdated. The website basically is going to be:
Django based
mostly serve static information pages
it will have a dynamic news and updates page (based on Django admin capabilites)
and some basic apps I'll develop myself (polls, small registration app, etc...)
My problem is designing the whole thing. I found some nice web-based CSS layout generators that got me going, but I still feel I'm wasting my time smoothing out the CSS files and aligning <div>s.
Are there any tools - the simpler and faster, the better - that you recommend I can use to speed up the design part of the site so I can concentrate on the real work?
I don't need anything fancy, just a nice looking layout and design that I can tweak a bit so the site will look presentable.
I second Brandon's suggestion to use a CSS framework. It won't give you 100% freedom to design anything you like, but it can speed up your design process greatly and free up your hands to do the coding you really want.
Suggestions Updated July 2013:
Twitter Bootstrap http://twitter.github.io/bootstrap/ - complete grid, typo, UI widget prototyping framework
ZURB Foundation http://foundation.zurb.com/ - responsive grid, type, UI widget prototyping framework (similar in scope to Twitter Bootstrap, but feels 'cleaner' in some ways)
960 http://960.gs/ - grid layout system
Tripoli http://devkick.com/lab/tripoli/ - really good typography, but no grid system
YUI Grids http://developer.yahoo.com/yui/grids/ - very customizable (to the point of overkill) grid system
Blueprint http://www.blueprintcss.org/ - grid system and basic typography
BlueTrip http://www.bluetrip.org - a hybrid system, mixing the best of the Blueprint grid with the best of the Tripoli typography
I won't lie to you. This website isn't the best place to go if you're looking for reliable Web Design advice. Stack Overflow is a programming community and programmers rarely know anything about design. If you want to get some real advice then I would strongly recommend the main Web Design/Development forums on the Internet, especially SitePoint.
That being said, as a former freelance Web Designer/Developer I'll offer my input on the issue. Not that you should value it, of course. After all, this is a programming website.
NEVER EVER SAY CSS LAYOUT GENERATOR EVER AGAIN! If you're going to seriously get into designing web pages then you need to learn semantic XHTML and CSS first. Whilst many people tout W3Schools as the definitive resource I see it as a programmers answer (i.e. not very good) and would prefer that you read up on the subject using...Google. There are countless examples of great websites to pick up the basics of Web Design/Development that Google is probably the best website for the job. Also, with a plethora of new websites offering this information you know it's going to be more improved than W3Schools. You'll seriously want to get clued-up on writing your design because it'll be much harder to fix things later on in the project.
If you're going to be designing web pages it would be a good idea to learn what actually makes a good design. Check out CSS Vault for a fantastic resource of some of the best-designed web pages around, of course with all the source code intact so you can have a play around with their code and see how they've managed some of the wonderful effects they've produced. I've learnt more than a thing or two from websites that have been featured on CSS Vault. On top of that you should read up on Web Design from the big Web Design/Development sites. Two of my favourites are SitePoint and A List Apart, two names that you'll near time and time again when you hear people talk about resources. Browse those websites, check their forums, see what REAL Web Designers/Developers are using, not what programmers are using.
On the subject of CSS Frameworks; they do help! The problem with using them is that you'll often spend so much time looking for a worthwhile framework that you could have finished most of the CSS for your website yourself. You'll either love them or hate them, but many people will say that they're not necessary.
Once you've got your mind set on what a good design looks like and you've got the resources you need to make something of value I suggest that you get to work! In reality when you're designing a web page all you really need is a text editor with a save function, an image manipulation program, a browser window and FireBug. An IDE helps a lot of people, but if you do use one then you'll definitely want to work in its text mode. I use NotePad++ or Emacs exclusively but a lot of people like to use Aptana Studio, so it may be worth a look.
When you're getting to actually building the code behind your website you can't really go much worse than your favourite IDE/Text Editor and a source control tool. As a Java programmer you're better suited to talk about programming so I won't lecture you on a subject you already know.
In the end, Web Design is going to take time and many of the tools that we choose to use that we claim will "save time" save very little in reality. If you're not a design guru then it will take you a substantial amount of time to create a great-looking website. It's a fact of life. Call me old-fashioned (a funny word coming from a 21 year old) but I still think that the quickest way is to sketch a design out on a piece of paper (a image program if really necessary) and to just get out there and make the damn thing! Again, I'll have to take this hunting for the silver bullet mentality as a programmers trait, one that really won't help that much when designing, because designing a web page is vastly different to writing a Java program.
In short, ignore everything you read here, read what REAL designers are doing and just make the damn thing!
There's one piece of advice that saves more time than any other when it comes to rapid development of CSS styled sites and that's KEEP IT SIMPLE
Use an attractive simple layout that doesn't require pixel perfection and that can 'gracefully' degrade in less compliant browsers (IE6). Minimise the amount of CSS and fix the basic bugs mentioned by meouw above. Then get on an concentrate on content and functionality...the real work
In my previous employment I created dozens of templates for websites.
The most useful too I ever discovered is the Firefox Web Developer Toolbar.
It has a wealth of small useful tools. My favorite feature is the ability to edit the CSS and see the results in real-time. This saves on the whole edit - upload - refresh cycle. Watch out for ie CSS inconsistencies though!
Off the top of my head, these are the most important gotchas.
double margin bug [google: double margin bug]
incorrect (but more intuitive) box model [google: box model]
incorrect (but more intuitive) float clearing [google: clearfix]
FireBug is another really usefull Firefox plugin for more in depth analysis.
I've always found Open Source Web Design to be a good resource when looking to get started trying to design something.
- http://patterntap.com/
- http://www.dotemplate.com/ (interesting concept of customizing template)
- http://www.templatemonster.com/
- http://www.freelayouts.com/websites/html-templates
- http://www.templateyes.com/
No idea what the site is going to be, but have you thought of using a pre-build CMS like Drupal, Joomla etc etc.? You can then tweak templates etc, rather than worrying about making it from scratch.
This question is pretty old, but since we're in 2012, it's only proper that I answer my own question with the exact thing I was looking for, back in 2009.
Twitter Bootstrap
Have you looked into any CSS frameworks? If you are competent enough with CSS something like a framework could help speed things up.
Don't forget firebug :) if you're worried about tweaking the design it's really great. With the inspect feature allowing you to real-time edit the CSS of your page.
https://addons.mozilla.org/en-US/firefox/addon/1843
I second Jens Roland's list of CSS frameworks.
But I would also suggest you have a look at websites such as Smashing Magazine. You might find this article of interest, amongst a lot of others. They tend to do a lot of nice and long mash-ups for the web developers that will at least give you inspiration if not a direct solution.
A colleague of mine has been trying to convince me all week that Dreamweaver, 5 years after I was last forced to use it at gunpoint, is actually now worthwhile for knocking up a design quickly and painlessly, and is also now competent at producing the HTML for that design.
I refuse to invest the 10 minutes it would take to find out based on my previous experiences of it, but you might like to give the demo a quick run around the block :)
I'd recommend finding a CMS package, since you're using Django, look into django-cms. It has TinyMCE and Markdown Support so updating your pages should be easy. Also django-cms integrates well with the Django admin interface.
A piece of paper to sketch your design
A text editor (preferably set up to save directly to a development server local or otherwise) to write up the initial HTML/CSS
FireBug/IEDeveloperToolbar to inspect each element that looks wrong and edit its CSS directly in the browser until it looks fine, followed by commits with the text editor
If you're doing any JavaScript development, use an advanced editor that highlights errors and warnings as you type. This kind of functionality has until recently been the province of static language editors only, but the free NetBeans 6 achieves this amazing feat. Traditionally, you first discovered JavaScript typos and simple bugs when first loading the parent page into a browser. The speed-up you get from being able to short-cut these iterations is profound.
NetBeans 6 also highlights CSS errors and is a more than capable editor for most all languages a web developer is likely to use these days.
You can also use www.zbugs.com - it will help you speed up a process of compressing and gzipping your CSS and Javascript files
Related
I am mainly a programmer, and while I have extensive Photoshop and Illustrator experience, alongside a decent understanding of html5, and CSS, I have just never been able to do a proper WYSIWYG drag and drop website design with dreamweaver ( kind of like you can with visual studio.net or eclipse windows builder).
I don't understand why it is so damn hard ? the CSS divs and layers are sooo complicated to place, you have to do all these calculations, sometimes increasing margins,decreasing margins, type of divs , maybe it is just me, but after many months of headaches I have switched to using a website builder such as one provided by webeden.co.uk ( this isn't an advert, i m not affiliated with them, ). I mean ALL i want to do is drag and drop a few divs, click a few buttons and for them to just work, and webeden can do it online and the dreamweaver which is the software solely designed for web development cant. I am desperate to switch back to dreamweaver as it is a lot more powerful, but doing the layouts is a nightmare.
Is it just me, do I just need hundreds of hours to get all my divs and spans just right? or maybe I am not suited as an occasional web-developer? or did adobe put a curse on me for leaving dreamweaver ?
thanks
Unfortunately or fortunately for me, to have nicely coded, custom website you need a human being with programing experience and knowledge of latest techniques and technologies. Sure you can create a word document and and save it as an html file, but have you seen the code behind it? Bleh. But you as a designer probably don't care about that, a developer does and so do server people who see your bloated website eats up bandwidth. So the answer is, you are just not suited to be an occasional developer just as developers are not suited as occasional designers no matter how good their Paint skill are
In all honesty dreamweaver is bloatware. It costs too much, and a real professional wouldn't touch it.
That being said. The guy talking about crap code and bandwidth is obviously a derp. The code itself on even a large site will not chew up that much bandwidth. The major bandwidth usage in any site will be it's media.. i.e. images, videos, music etc..
In my honest opinion, one only needs notepad to create a decent website.
As for drag-n-drop technology. I have yet to see an implementation of it that is fast, powerful, and complex enough to have the options for what i want to do. That isn't counting what the resulting code would look like.
My suggestion to anyone creating a website, is for them to learn html, and css. There are more powerful languages out there to build sites with, but for a beginner, html, and css are a great foundation. After that if you wish, go on to learn javascript, php, perl, and python.
i am a hobby programmer with very little experience in web programming, i devote an average f 20-30 hours a week, but with summers coming i have some free time to experiment and learn. could anyone please tell me, whether a framework like (Kohana/cakePHP/CI) should be used or directly a CMS tool like drupal/joomla should be used to make a website something like stackoverflow, on a smaller scale though.
Thanks for your help.
It depends on what you want to learn. Depends on your goal.
Is it webdevelopment you wish to learn? CSS? Webdesign? Programming? Building sites?
If your goal is the site itself, I would suggest to start high up in the stack: use a ready-to-go CMS, such as Drupal, that gets you going fast. And that offers a (production ready) result in a few hours. Your downside will be freedom: sure Drupal can do a lot, so can Wordpress. But unless you move down in the stack (develop addons and such) you will have to do with what you are offered: ready made components that work according to the authors wish. Possibly not your wish.
If your goal is to learn webdevelopment in a more general way, you should start lower down in the stack. Ruby on Rails or Django are probably the best options. Simply because of their vast resource on newbie documentation. You will learn programming along the way there too. Within a few days you will have built a site according to your exact wishes (obviously, your milage may vary, depending on the wishes:)).
If your goal is development of software, Python and Ruby are most probably a good start too: both are cross-platform, have good newbie resources and offer great documentation. Both are really well (opinions may differ on this) abstraction and object orientation. They will form you into a good programmer, simply by their nature.
There's a Stackoverflow clone called Qwench that is free.
(search stackoverflow for open source stackoverflow clones)
and one built on drupal http://drupal.org/project/arrayshift
Wordpress can act very much like Stackoverflow with a proper template. See here: http://p2theme.com/ (demo here: http://p2demo.wordpress.com/). Actually you can than start editing the theme (.php files) and make it behave more and more like Stackoverflow (with reputation system etc. which should be easy to implement). This way you won't be reinventing the wheel and have a good headstart.
I personally use CodeIgniter and love it. I would recommend it to any novice looking to further their knowledge of object oriented programming, and any veterans looking to get their projects off the ground quicker. I am not going to go into great detail here, because I know Kohana and CakePHP are similar, and its mostly opinion. CI does have great documentation though.
I think learning the most common CMS is going to be hugely beneficial to you, tons of sites and companies use WP/Drupal/Joomla/Etc and it really can't hurt to understand them. These projects are very large, so you don't necessarily need to know their internal operations 100%, but you should know enough to be able to install, customize and get a site up and running fairly quickly.
Everyone has their favorites, but I invite you to try them all and see what moves you. It will NEVER hurt to learn something and not use it, especially with some extra time.
There are times to use a packaged CMS and hopefully be able to theme/customize it to what you need quickly...then there are times you will want to code a special case by hand using a framework.
Just understand the depth of the project you want to undertake, because starting from scratch is fun and rewarding, but once you get neck deep in code and get stuck its easy to lose motivation all together.
I would suggest learning the basics of HTML before diving in to using a content management system. The importance of understanding the basic building blocks of websites can't be overstated.
There are loads of resources online to learning about HTML - once you've got some experience with that, you can look at CSS, Javascript, and server-side scripting languages. Knowing the basics will help with using any content management system.
Joomla / Drupal are a good place to start with content management systems, as is Wordpress, but you'd be much better off learning how it works underneath (at least to the most basic extent) before diving in to anything else.
If you're already a programmer you won't find it too hard, but it's definitely worth doing.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Looking for some feedback on those of you who have evaluated umbraco lately.
I've been on a quest for the 'best' cms that balances ease of use/extendability/customization etc. to use as a base for a new vertical product I am in the planning stages on, so for the past month or so I have been downloading, installing, reading source code and creating test sites in every asp.net cms I can get my hands on - and so far I have pulled down GraffitCMS, MojoPortal, Oxite, Orchard, Kuboo and maybe a couple of others that I am not remembering of the top of my head.
For each of those, except Umbraco, I have been up and running in less than a couple of hours, including adding pages, customizing templates, and in some cases (especially Graffiti), writing drop in widgets in C# in a matter of just a few hours....
But with Umbraco, after wrestling it for almost 2 days just getting it to run, and now another morning watching videos, and then building pages etc, I am still unable to even get even a simple site operational, and even the pages I have gotten working crash routinely (not to mention being a dog)...
So, the question is: Am I doing it wrong? or is it really that hard to work with? and more importantly, if I continue to push forward, will it be worth it? or do I cut my losses and move on?
Edit: asp.net with SQL Server support are requirements of anything I pick.
UPDATE ONE YEAR LATER (Feb/2011):
My initial impressions are still accurate, Umbraco is different than most of the other CMS's that I have used in the past, and for me took a bit longer than usual to 'get it', but now that I have, I have to say I have a much better appreciation of the product, what it does, and how it does it - and to top it all of, it really performs really well - especially with the latest release of 4.6.1. So call me a convert - I am glad I stuck it out and then took another look. I only update this post now, over one year later so as not to leave my initial negative 'review' here for posterity.
The learning curve for umbraco is short but steep. Once it all 'clicks' then you'll be up and running in short order.
It's different from other CMS platforms in that you doesn't give you anything out of the box - just a blank canvas to work with. Other cms systems will set you up with a default template and allow you to drop in pre-built functionality. Umbraco is, by design, not like that at all. You only get out what you put in, it doesn't generate anything for you.
This is ideal for developers and designers who want 100% control over their code/markup.
Version 4.7 (currently in release candidate) introduces the Razor syntax for creating macros. This does away with needing XSLT+XPath which I think was a big stumbling block for a lot of people. Even if you're not familiar with Razor, it is much intuitive to learn than the XML based offerings.
The videos have been mentioned by other posters below. $20 is a small price to pay to get up and running quickly.
Does it matter? What I mean is, if you find it hard to use, and there are other alternatives available, why persist? If it's non-intuitive to you, then you're going to find it hard to use. If it doesn't have some killer feature you (think you) need, dump it and move on. You don't need the hassle of trying to wrap your head around some oddly-designed (to you) product, and the product's developers don't need the hassle of trying to support people who think their product should work in some way it wasn't designed to.
None of this is intended to be harsh, just practical. You have the freedom to choose, so choose what works best for you. This sounds like it isn't working, so move on. My brother-in-law wanted to buy a Volvo, but found the controls and dashboard totally confusing, so he wound up with a BMW instead. Nothing wrong with the Volvo, nothing wrong with my brother-in-law, just cognitive dissonance. Don't worry about it.
I've been building sites with Umbraco for something like 5 years now, and I don't recognize your description of Umbraco as a very difficult CMS, but I'll try to provide a few pointers here to help you if you're still considering Umbraco:
Go to http://our.umbraco.org, read the Wiki-pages, and post any questions in the forums there, it's a really friendly community.
Always use Microsofts Web Platform Installer when installing Umbraco, It'll help you create your site, and set up your database. Just be sure not to install Umbraco in a sub/virtual directory, since Umbraco can't handle a setup like that.
If possible, do your install on a development machine with IIS7 and SQL Server Express, it'll work for sure, and deployment of a finished site can be done with a xcopy transfer and a restore of a database backup.
Don't start a new Umbraco site, before you've coded the HTML you'll be using for the site, or at least have a really clear idea about the page types, and html content you'll need.
I hope I'll be seeing you on the Umbraco forums.
Regards
Jesper Hauge
As a grizzled CMS veteran I can say that Umbraco is no harder to set up and use than many other CMS solutions.
However much of whether you find it hard or easy depends largely on your previous experience with CMS and your expectations for what a CMS should provide out of the box.
I've worked mostly with larger CMSs:
Microsoft CMS
Immediacy
Obtree
Reef (anyone remember that one!)
etc....
Against those it is no harder to use and is probably easier as it tends to get out of your way and lets you get on with building the functionality you require.
However if your expectations are more based around things like Wordpress, i.e. install and go but with more limited options, then it can be hard to start with (if you just fire it up without installing a website starter kit).
My recommendation is that if you are building a small site you take a look at the Creative website starter kit at our.umbraco.org. There are also many packages that you can install to make things easier or add specific functionality (including pre-built navigation controls and full blog solutions).
Also take a look at the Wiki on our.umbraco.org and ask questions in the forum, the community is helpful and friendly.
Umbraco is a bit different than other CMSs like Sitefinity, DNN, or Drupal. It does compare well to Sitecore.
Yes, there is a bit of a learning curve. I think the XSLT can cause that, but more likely its just the fact that you have to understand how Umbraco is structured. There are very few "modules" out of the box that you have to arrange and style. Rather, it allows you to easily create your own structure and markup that doesn't force you into a box that is hard to get out of.
I've used Drupal, Sitefinity, WordPress, Sitecore, and some others and frankly Umbraco is my favorite. If you know how to develop great web sites and you don't want limits on your design, markup, or client experience then Umbraco is a great choice. If you aren't really building a site but just want to put pieces together and get "something" working, then it may not be worth your time. If you build lots of sites or want your end users to edit content easily (not just a big rich text editor), then it may be worth overcoming the learning curve.
The videos are totally worth the $20 to watch BTW. They are far better than any documentation you can find and after maybe 5-6 videos you should be "getting it". Just buy one month and cancel after that.
The community is awesome too. If you're struggling, head over to the http://our.umbraco.org forums and get some help. There's lots of it over there.
Also, try installing the Creative Web Starter Kit package or the Blog 4 Umbraco package to get a head start. Those will be more familiar to those coming from a Sitefinity or Drupal background and may help the learning curve flatten out.
Good luck!
As a senior .NET programmer naturally I gravitate to .NET based solutions, and Umbraco seems to be a solid CMS. So I installed it and tried to gain some knowledge and getting it going and these are my findings:
Videos are ridiculously thin on content. The first introductory video talks of a runway. What on earth is a runway??? No jargon please, I'm a first time user.
You have to pay for the most advanced videos. No wonder it hasn't taken off as a mainstream .NET based CMS.
Out of the box demos are non functional (I chose the business theme an the menus don't work)
Admin area very non-intuative
Installation forces Web-Matrix installatiuon.. I have IIS7 and so do our production systems... I DON"T WANT WebMatrix!!! Finding documentation on this is also not easy.
All in all EXTREMELY FRUSTRATING to use and put me off Umbraco totally.
So I've picked up on Wordpress in the mean time and find it extremely easy to extend the admin interface. Documetnation and community support is superb. Just a pity its PHP bases because that won't fly in my company that has invested heavily in .NET developers :-(
Opinions aside, this all depends on your background. I'm a software engineer not a webmaster. So, I think like a software engineer and not like a webmaster.
Umbraco was VERY frustrating for me to install simply because there was no easily found TEXT documentation. Once I finally found that, it was a breeze to install.
The problem for many web designers is that they are not software engineers. Nothing bad about web designers who aren't also software engineers, it's just a different way of seeing the world. I have worked a lot with web designers who needed to interface with my C++ and C# back ends; they have a completely different perspective of almost everything.
Once I got past the goofy implied install process (which is bad, bad, bad -- you should never require another product JUST to install your own!) I found Umbraco to be simple and intuitive. Even my (non-programmer) girlfriend found it to be much more logical than some of the other CMS's we had been playing around with. Drupal, for example, was simple to install, but isn't really designed for a Windows development (ASP.NET/SQL Server) environment and I hate PHP, so I eventually abandoned that. MojoPortal was really nice and simple, but... it was... well... simple. Too simple.
I like Orchard, but the last time I looked at that there was so little in terms of what to start with that I decided that it would be a problem in the immediate future. I wanted a web content management system, not a web development platform. I kept thinking Orchard is a lot like *nix: "A nice place to live, but ya wouldn't wanna visit there."
Umbraco for me is a nice medium place, extremely flexible and easy to extend. It tries very hard to not get in your way. If you want to extend it you would probably do best to either learn C# (or {cringe} VB) or co-opt someone to write the CodeBehind for you. But, using it is extremely simple and straight forward.
I can't say whether it's just hard to use in general - but I came to much of the same conclusion as you did. I was especially disappointed by the lack of useful documentation - all the potentially useful video resources at their website are for pay $$$ only - what's up with that??
Also, the few intro videos I saw never quite clicked with me. They presented lots of concepts, but really never explained them much.
I also had tried Graffiti, but that never quite worked, either - and with its future less than sure, I gave up on that. Others seemed overly complicated for my requirements (Kentico, CommunityServer, and others).
In the end, based on a tip by a fellow on superuser.com, I went with BlogEngine.NET for my club's web site, and so far, I haven't looked back at all. It's pure ASP.NET which appeals to me, it's easily extensible, has a fairly large community with extensions and themes and stuff. From my personal experience, I can only recommend you check it out, if you have a mostly (blog) post based site in mind.
Strange. It takes me 5 minutes to install new Umbraco site, in 2 hours i managed to create standard portfolio website (well, when I've already got used to XSLT). It's very easy to create, modify, add custom controls, add smth to administration section, etc.
What was hard to understand (took me half an hour) that I don't have to write any SQL or C# code until I need some additional data model that's above Documents concept or Umbraco capabilities. Such samples: auto-resizing pictures, invoking some web-service, etc. - anything that comes from business logic layer that can't be covered by CMS model.
In most cases Umbraco is so easy to use that even that little bit of documentation is enough. There's pretty thin and easy API provided by Umbraco, but there's a good tech. level needed from developer, and that's XML 1st of all: XQuery and XPath to use maximum of XSLT.
And once more about installation: I just followed each step of installation guide and that's all.
The problem with Umbraco is that the UI is awkward and it's not immediately apparent how to use it and where to find things. There are several section buttons at the bottom of the page and when you click on one, you're presented with a tree view where you drill down to what you want. This is bad UI 101: no mystery meat. All functions should be organized and visible to the user. Dropdowns with submenus would have been a better approach.
The UI element names are ambiguous. For instance, there's a Members and a Users section, a Developer and a Settings section, a Content and a Media section. Isn't Media supposed to be Content? Aren't Members also Users? Aren't Settings something a Developer would do? You get my drift.
With the release of version 5, none of these issues have been addressed. The best thing they did was to kill XSLT/Classic ASP.NET and replace it with MVC and Razor. This makes getting your head around the product much easier from a developer's standpoint, despite a lack of adequate documentation for version 5. From a content creation standpoint, it's still lacking, however.
If you want to see a great UI, look no further than SiteFinity. Even though the new design isn't as good as SiteFinity 3 versions, it's content editing is the best I've seen on the market. It's too bad it doesn't support MVC and it's controls are cumbersome to modify and style.
what i wish i would have known!
Umbraco - Before you start
I am working on the rewrite of a large VB6-based application. We are moving from Windows Forms to web-based deployment using ASP .Net. There are about 50 core users and all are internal to the company.
We need an efficient way to try out different designs in order to investigate the information architecture of the site, the workflow, and the overall look and feel. Ideally, the prototype would look good enough to show to the users in order to gather feedback.
A few ajax-style drop-down menus or controls would be useful to demonstrate our ideas, but not at the expense of quick prototyping.
It feels too early to break out Visual Studio, and we need something more than pen and paper or Visio... Any suggestions?
Jeff Atwood had a nice article a while back about this:
http://www.codinghorror.com/blog/archives/001091.html
We used Visio the last project and while the Visio document screens look nearly identical to the end result I'd recommend against doing a pixel-perfect prototype. Simple rectangles and simple coloring are better and gives the designed and the web developers more freedom.
In our case some of the screens were developed by a person without good knowledge of limitations of web apps. Depending on the team members, this could lead to endless discussions about what is possible and what is not.
Have you taken a look at the excellent Balsamiq?
I use JustProto.com - it's very simple but works very fast. I regret there are no ready components to use but you can create your own masters.
Anyway - I did a few prototypes with JP and for me it's fine enough.
In the past we've used full page graphics - either pretty designs from our design team, or just Visio/PowerPoint (don't ask) mockups - dropped into HTML pages as a background and then added ImageMap links and dropped some dynamic controls on top - Drop-downs, pop-up/accordian menus etc to link most of them together.
This worked quite well in for A/B usability testing with our users - some were slightly confused by the pretty design versions, as they looked more like usable web pages, but they quickly got the hang of it.
For large systems, you really need something with masters/templates. Two good threads here on SO:
What tools are there:
https://stackoverflow.com/questions/156937/balsamiq-mockups-alternative-for-building-wireframes
Why mockup tool instead of IDE:
Whats the best way to create interactive application prototypes?
And here is the most complete list of mockup tools I know of:
http://c2.com/cgi/wiki?GuiPrototypingTools
(I am the author of this one: MockupScreens).
You can use Balsamiq mockups, is a very good software and easy to use for prototyping, mockups can make dynamic and complexity you need, not very expensive and has an evaluation version and limited version online.
If you want a much more complex software has components and functional and you can use Axure is a prototyping software very complete, you can export and test the prototype in the browser with all the features, I invite you to go to the official pages there you can find examples.
Balsamiq link: http://balsamiq.com/products/mockups/
Axure link: http://www.axure.com/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
As web based designer who has designed web sites using tables but never with css, how can a novice get started with css?
Related SO posts
SO - Css Book & website for CSS
SO - Css blog
Get started by reading tutorial web site first. This way, he will see how to create simple CSS and see the benefits.
http://www.w3schools.com/css/
http://www.echoecho.com/css.htm
http://www.csstutorial.net/
http://www.w3.org/Style/Examples/011/firstcss
http://www.westciv.com/style_master/academy/css_tutorial/
Than, I suggest since he knows how to design website to check other website source and see their CSS files. Zen Garden is a good start.
If he requires more information, he can always get a book (I do not think it's necessary but if he wants a book), he could try Core-Css.
Definitely get the Firebug plugin for Firefox. Go to a site you like and check out the CSS for it. Turn some off and on, change things, just get a feel for how it all comes together. Great learning tool.
Read CSS: The Definitive Guide, Third Edition by Eric A. Meyer. It's one of the best technical books I've read.
To all the other suggestions I would add Smashing Magazine's list of CSS articles.
I recommend Transcending CSS: The Fine Art of Web Design by Andy Clarke. It's less about the technical aspects of CSS and more about the mindset switch that needs to happen when moving from tables based design to separating content from design.
When I started learning CSS, I found myself coding pretty much the same way. Instead of tables and tds, I was using divs and spans. Still working from the outside (design) inward (toward the content) and designing my markup and contents around the look of the page, locking it into the design. Transcending CSS gets into the process of going from the inside (content and markup) out (design) leaving the site's appearance flexible.
Technical info is easy enough to find. I tend to frequent W3Schools.
I'm a big fan of reading tech books, so I learned from Beginning CSS Web Development: From Novice to Professional
I learned a lot from Eric Meyer on CSS and More Eric Meyer on CSS. The books take you through several examples step-by-step, starting with unstyled pages and explain the purpose for each step along the way. They would only be a starting point though, since they're a little bit dated. Sites like A List Apart will give you the most up-to-date information.
Start simple. Read a few sites like A List Apart and Position Is Everything.
Don't try to replace your whole site at once - change one piece at a time.
Keep testing it in different browsers - the earlier you find out it looks different in one (or all!) the better.
The book that got me started was Web Standards Solutions: The Markup and Style Handbook. by Dan Cederholm It is not a reference, but gives you a good start with real-world examples. Dan does a good job of holding your hand, taking it slow and not boring you. I bought it several years ago and still refer to it on occasion.
This is the only CSS book I own. I use the web as my CSS reference.
SitePoint have a large amount of tutorials and reference on this. They even have a book that sound like it would answer your question directly!
HTML Utopia: Designing Without Tables Using CSS, 2nd Edition
http://www.sitepoint.com/books/css2/
with 4 chapters available free
For French there is a good site : http://www.alsacreations.com/ there is tutorials on HTML, xHTML and CSS and many examples (how to create "pretty" menus etc...)
I learned a lot of CSS by downloading free site designs from http://www.oswd.org/ and trying to implement the same effects on my own. It also gave me some insights into ideas for site-wide design patterns in CSS.
I'm a fan of the brute-force approach. Learn a few basics then start trying to recode your HTML using pure CSS. Every time you need a new technique, google it. You may want to subscribe to the CSS-discuss mailing list or read the wiki.
http://www.w3.org/Style/CSS/#specs
Someone already listed a w3c link. This link goes to the specs which is how I learned what I know about css. Anyway, start with level 1 then move on to the other levels. Well, level 1 should get you most of what you'll use so you may just want to learn level 1 then google the other things you want to do as needed.
I have found that using a DreamWeaver template is a good first place to start when creating a new page. They have made some very simple templates that allow you add any formatting you want, you just need to know things like 2 or 3 columns or elastic or fixed. Before I started doing this, I was constantly trying to figure out how to position stuff, but this has helped a lot, at least giving me a start.
Also consider a reset CSS file. It really helps dealing with browser differences.
Along with this, of course read tutorials and search the net.
Have a look at the Web Design From Scratch website. It has been really useful to me.
One important concept that most references are missing is that the CSS attributes aren't independent or cumulative. The most important properties, 'display' and 'position' react to each other and even change the behavior of other attributes. They interact in such a way that any guide that tries to teach these attributes independently is fail.
Most people doing HTML/CSS don't understand this, and are stuck fiddling without a real clue.
The only book I've found that relates these attributes at all is "Pro CSS and HTML Design Patterns". Eric Meyers book might... Personally I hate the style "Pro CSS and HTML Design Patterns" is written in, but its still the most effective guide to CSS that I have found.
I wrote an overall intro guide including some good CSS links elsewhere (see the comments too)... might be useful.