Magento - How complicated is it to install a custom design? - css

I am working with a client who has already purchased Magento -eCommerce CMS. I have never worked with this program and after reading over there extremely lengthy material I am not sure if I should take on the project. I am worried that this is a little outside of my skill set. I mostly do Design and Front-End Development. I have worked with Wordpress somewhat regularly without any problems, however that is extremely well documented. My understanding of actual programming is limited. Has anyone created a skin for Magento and if so, how complicated was it?

It depends on how you define complicated. Anyone with a good understand of Magento's architecture MAY actually call it intuitive. I can say that it has a significantly higher learning curve than many other packaged application in frameworks due to its shear number of features. It's extremely easy to think you done and found out from a client that there's a page you failed to style.
To better answer your question I'll tell you what you'll be facing.
CSS:
It is possibile, though difficult, to skin Magento using purely CSS. This can be made easier depending on your design.
HTML:
There are more individual templates than I'm willing to count. I want to say upwards of 40 ".phtml" files that you can edit each with an uncomfortable amount of logic to my taste (and I'm a programmer). For the most part you can manipulate the HTML within these files as you see fit with out any trouble. You probably will have trouble if you need to edit anything logic wise or that output by PHP
XML:
Magento uses xml files for what it calls layouts. These files are actually what puts the template files mentioned above together. To do some significant changes to the default layout you will have to change these.
Realizing that you referenced wordpress. Magento is SIGNIFICANTLY more difficult to skin than wordpress. Even after a very thorough understand of magento's architecture I still get hung up when changes. Magento is full of complex caches which can prevent your changes from being visible and unexpected dependencies which you can easily break if your not careful.
This is probably a horribly written answer but I hope it helps.

Related

Non-theme based Drupal development?

I run a design firm and have frequent need for Drupal development. I'm looking for a bit of guidance on a Drupal workflow that will work best for my company.
My experience working with Drupal developers in the past has been great for back-end development, and chaotic for front-end development. Projects end up with multiple and inconsistent CSS styles, and doing quality control on the visual aspect is very time-consuming.
Moreover, I'm a front-end coder, and use HMTL/CSS/JS prototypes for all phases of projects. I would prefer if the front-end coding I do to was used by the developer instead of going to waste.
However, this workflow hasn't been compatible with Drupal dev partners so far. Because they use themes, and retro-fit them to the design I give them, they aren't able to use the HTML/CSS/JS work I do. Moreover, I have a responsive framework that I like (Foundation), and my developers want to work with the standard responsive Drupal theme (Omega). I don't like Omega because it isn't fluid.
Then there's things like my developer telling me they can't do a carrousel that uses CSS (background-image), because the available Drupal carrousel modules are all based on using the HTML img tag. Does everything have to be based on modules?
Going back to the HTML/CSS inconsistencies and the time-consuming design QA, I think this comes from trying to retrofit a theme. The code is very messy and it makes it hard to target elements for styling. It also makes it impossible for me to do my own CSS changes if I want.
So, in short, I'm looking for a completely different design workflow, and I'm looking for feedback on whether it's workable in Drupal without inflating costs.
Is it possible in Drupal to use front-end code (provided by me), throw in some PHP tags, and end up with cleanly-coded pages, instead of relying on themes? Would this reduce costs (because the HTML/CSS/JS is provided), or would it inflate costs (because it's easier to use a theme)? Are there any security issues involved? Are there update issues involved? In short, what's the big advantage with working with pre-fab themes?
I really, truly appreciate your comments.
We usually develop from the backend to the front end. Modules like Views add many div tags, classes and tags so the theme developer can make better use of them and fine tune the design.
I do not think that is a "messy" code unless you are doing all of the work in tpl.php files.
Modules simply processed the data. It should not heavily theme the output. For a better understanding, see the image below (from drupal.org):
If you want to do any database intensive work in the template level, you will have to load many stuff again that you could simply do in a module.
In my opinion, if your developer is not hardcoding the HTML stuff, he is doing it right.
Keep in mind that you can override most of the theme functions so you already have the flexibility if you want.
Is it possible in Drupal to use front-end code (provided by me), throw
in some PHP tags, and end up with cleanly-coded pages, instead of
relying on themes?
Yes. But you can't simply use slider-image.php like files for that. You will have to add necessary theme functions to and pass the variables to it. IMO, it's relatively more work if you need to completely rewrite the theming functions.
Would this reduce costs (because the HTML/CSS/JS is provided), or
would it inflate costs (because it's easier to use a theme)?
I do not think so. If you have multiple backend developers working on code, ask the theming team to make changes to HTML/CSS. CSS can make your site look worse, and a security bug can ruin your business, expose all your user information or even worse.
Are there any security issues involved?
Most likely. Default theme functions tend to come with much better security. Even though few bugs come out, they will get fixed soon by the community.
Are there update issues involved? In short, what's the big advantage
with working with pre-fab themes?
Because there is a whole lot of work that you can simply adopt. That will also block you from adopting others' CSS work though.
I work somewhere with highly stylized well thought out front end builds which are almost not compatible with the way Drupal theming is handled currently. Having front end developers track down bugs is also very problematic. It looks like there's some acknowledgement of this in Drupal 8 at least. At this point we frequently rework Drupal to work as an API and then build a lightweight PHP Framework app on top to pull content when we need it which gives us total flexibility to do anything we want with the frontend. Another alternative is to checkout Expression Engine where you are explicitly telling it what markup you want outputted and how you want your content to be placed in the markup.
The holy grail would be a very lightweight layer that was part of Drupal where we could use Twig to pull the content the way we want it and all HTML output was defined in Twig.

A REAL quick, basic CSS layouter

Short story: I frequently have to work on many different, rather small, web pages.
Most of them are layouted with pure CSS.
My Problem:
My job is to work on the code itself, on the functionality of the pages, not on the layout. However, due to the changes I make, I am often forced to make slight layout modifications and that soaks up my time like a black hole.
I end up spending as much as 10 times as long to do the slightest layout modifications as it takes me to add or rewrite routines.
We have a designer as well but it is just impossible to wait for him to redo layouts for every change I make (and often enough I have to change things multiple times).
So what I've searched for is a super basic and simple CSS WYSIWYG editor that isn't a complicated professional design tool. After trying a few tools I gave up, going back to editing by hand. In particular, the behavior of nested layout boxes just freaks me out every time.
Does anyone have some hints on this?
I'd appreciate any help,
Thank you
Two thoughts:
1) Adopt more of an agile process
The visual design (layout) and logic design should be built in tandem rather than one after the other. As you've found out, modifying things after the fact can be a real pain.
2) Adopt a CSS framework/OOCSS methods/Component Library
The idea behind all 3 of those is to create reusable CSS that follows a predictable structure. This takes a lot more up-front work, but results in a code base that should be a lot easier to maintain going forward.
twitter bootstrap
http://twitter.github.com/bootstrap/
looks really good from first impressions.
My rails expert keeps raving about it and I'm planning on trying it. Obviously free 'n all.
Basically we've felt your pain with this issue!
Bootstrap is good for real developers, a lot of it is basic layout via css tags and I think it'll make a lot of sense to you.
Even if it doesn't meet all your needs, it might be a great place to start with, as a standard for a development team. As much as developers often dislike being templated ;)
The actual direct github site is: https://github.com/twbs/bootstrap
Is it used much? Currently?...
Github Stats:
Watcher: 8682
Forks: 1383
Last Update: 10/10/2011
This post: 10/26/2011
Looks good! :)
I'm also a big fan of HAML - Ruby + HTML without the angle brackets(and more)!
... not sure if this will help, but yahoo grid builder works well for me. Of course there is a catch. The css selectors it generates are not very semantic, so you might have to do some re-factoring of them from withing the generated html page.
Github Stats: (for Blueprint suggested by Daniel below)
Watchers: 4556
Forks: 390
Last Update: 06/06/2011
This post: 10/26/2011

Seeking opinions on the best CMS platform for designers and front end developers

I have so far been a dedicated Wordpress user, but have been researching other CMS solutions of late, specifically, looking for something that could potentially allow me to EASILY convert an XHTML site into a CMS site for most projects.
I don't care for PHP - and find adding the appropriate tags to Wordpress a bit of a challenge. I am building fairly simple sites and simple blogs - I don't need a lot of extensibility.
I have heard good things about ModX and Textpattern and have today installed them on a localhost and started playing with them. Each has a bit of a learning curve, but I like what I see in terms of their tag codes (which looks a lot more like html than php).
I'd like to design websites where most pages are distinct from one another and don't necessarily have to fit into a template. I am looking for an automagical solution where I can directly input my html, css, javascript code into a CMS platform and it spits out my website exactly as I'd imagined it. Is this just a dream?
With so many solutions out there, just wondering about other web designer's and non-hardcore developers preferences?
I guess it's like asking if ipod or blackberry or n900 or htc etc.
While there are vast differences in how it works under the hood, for the most part you can expect about the same functionality, and it comes down to the provider and a particular feature you prefer in one over the other. In this case instead of your carrier you need to worry about you host, whether they offer the php version required aand the database you need etc. But for most part, you should be fine.
Modx Evo requirements : http://modxcms.com/learn/general-requirements.html
Modx Revo requires: http://rtfm.modx.com/display/revolution20/Server+Requirements
TextPattern requirements: http://textpattern.com/about/119/system-requirements
I find this an important thing to start with, while my server can handle either, you never know what server your clients are running(there still are some old configurations out there)
I haven't used Revo much yet, but it looks like there are quite a few really nice enhancements. One of them is installing packages. Previously you have to create TVs snippets chunks, so installing a package wasn't always so straight forward.
Modx Evo however has the import html feature, where you can load put your html site in a folder set the tag that holds the content, and modx will automatically create and fill the resources(pages), pretty nifty, but I've only used it to see what it does :)
Modx lets you get away with not knowing any php, but as your requirements change, you might find yourself needing an extra feature of script that is easy to add. I've found that using modx for the past 2 years or so has vastly improved my php abilities because of these additional functions required.
While I haven't worked with textpattern much I do remember installing it and playing around, but it just wasn't love at first sight, like with modx.
I also think modx is pretty easy for clients to navigate with some minimal coaching, but that is more of a comparison with joomla and drupal etc.
Bottom line, I think few people have spent enough time with both to REALLY understand both in terms of differences/advantages and mostly what you'll get is "the one I use is better; evidence being me using it" (myself included) or worse yet "I see you're mentioning CMSes, here's my favorite one"
To wrap up, one more important aspect (and this one is really important if you don't know your way around backends and php much) the community. If you run into problems, how likely is the modx vs textpattern forum.community willing to help. A good indication is community size. While I can't see the numbers for textpattern, currently modx forums show "255 Guests, 46 Users (3 Hidden)"
good luck
If you're comfortable with HTML then Textpattern's method of adding markup like tags into templates for content will probably be relatively straightforward for you to pick-up. The biggest issue most people seem to have in understanding Textpattern is its semantic model, there's a great page on the semantic model on Textpattern's Textbook site that should help.
I'm a big fan of Textpattern for building simple but powerful small to medium sites that do not require complicated user groups. It's quick to build well designed sites and the admin interface is really simple.
The Textpattern community is extremely friendly and helpful if you ever need help. Best place to ask things is on the Textpattern Forum.
You may want to consider sNews CMS in addition to MODx/Textpattern. It is quite minimalistic
PHP code is single file (excluding language translations).
You need to import one SQL script on phpMyAdmin and you are set.
After that its only styling and content.

Umbraco, is it just me or is it really hard to use? [closed]

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

Free tools to speed up web development [closed]

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

Resources