This is a best-practice topic.
I saw it as a prefer method for some web developers. Instead of doing the CSS layout from scratch, they start a photoshop mockup first and then decode it into CSS.
What do you think about this approach?
Best to all,
Mockups are great, but I don't know if photoshop is the very first thing you'd want to try for the purpose -- at the very start, when you're just trying to get a logical layout for the various pages of the site (before refining it in terms of looks &c), a whiteboard with dry-erase markers and post-it notes affords for very fast, repeated mock-up rearrangements for the early brainstorming. Once there is some reasonable agreement on one (or a very few) possible arrangements of information, then visually more accurate tools enter into play.
BTW, just don't forget to photograph the whiteboard before changing it (any decent cellphone will do, you're not trying for high quality here;-) any time there are ideas or suggestions you may want to revisit or ponder in the future!
It is fast. This is why i always use this method. You don't want to spend the time building cross-browser CSS until you are actually set on a layout.
Most webdesign graphic artists work this way.
Many programmers simply find it a waste of time.
It has advantages, and disadvantages.
Advantages:
Many graphic artists grok photoshop/illustrator more than they do dreamweaver.
Customer gets a preview of the final product that works everywhere: mac, pc, firefox, ie, safari, whatever. Sending an html preview in early stages of production with developers using firefox and customer using MSIE always stirs up trouble.
And don't think to be on the smart side, scribbling MSIE driven html. Starting with non-standard html and converting to standard is more painful than doing it the other way.
There's one more catch: many web site customers tend to have a Mac and use Safari. Web committents tend to have a stronger taste for graphics than the average, so the chance to bump into Mac maniacs is higher in this sector than in others.
More design alternatives can be prepared spending less time on each one. This could be a dramatic advantage while dealing with murky clouds of executives with no designated decision-makers on the customer side. Alternative mockups will be passing hand-to-hand until general consensus is reached on one design or the other.
Disadvantages:
"Cutting" the graphic design into html becomes an additional work and it's not clear who's gonna pay for that extra time.
It favours graphic-centric, and rigid, design workflows. Customers agree pre-emptively on a given preview and that's what they get by contract. Every graphic modification means money, behaviour and programming instead tend not to be well defined, or worst, ill defined by the mockup.
The quest for pixel perfect cross-browser adherence to the mockup may drive you insane. If you agreed on a given rigid design with the customer, that could become a dire issue to pursue.
Dirty CSS tricks shoe in into your design. Using an HTML mockup, the customer would have approved a design driven by code with less tricks in place.
Anyway, I wouldn't suggest photoshop for a mockup, but inkscape. (or illustrator, if you worship adobe by burning piles of money into magic circles at midnight)
A scribbling stage is good too, while discussing the contract live with the customer.
I prefer pencil and paper to felt-tips, and I webcam shoot ideas for archiving and email forwarding. When it comes to scribbling, anyone does what feels more natural.
Not doing any and rely onto sample site examples and screenshots for graphical reference is always an option.
If you're productive that way, why not? Not everybody manages to envision their Web site perfectly as they're typing in a bunch of angle brackets.
More seriously put: It's your job, so it's your responsibility to do it in a way that allows you to do it effectively.
When prototyping, it's important to choose the right fidelity. This article from BoxesAndArrows provides a nice introduction to the various options and their uses.
I particularly like this line by Bill Buxton which the article quotes:
There is no such thing as high or low fidelity, only appropriate fidelity.
In this TechTalk by the Facebook Design Team, they mention how they use Photoshop in their design process (IIRC it's somewhere midway through, but I can't seem to forward through the video).
I am a web programmer who knows html and css fairly well. I can use a graphic program for it's basic functionality, but desinging a complete graphical web site is not my thing.
I let a graphic designer use his or hers graphic program to create a nice looking layout, and than code the website by hand in html and css.
It works for me, and gives my customers a design they like (cause a graphical designer will always make a much more nice looking design than most web programmers).
Agile methodology would suggest something easily modified in consultation with the customer. Dave Thomas in Agile Web Development with Rails suggests scribbling on paper. But anything has got to be better than chipping away directly at handmade CSS unless you really know what you want.
I was thinking about saying "scribbling might not cut it for a formal presentation" but the awesome SO crowd beat me to it in the comments...
Personally, and at every webdev firm I've worked at, I've always mocked-up in photoshop first. Jumping straight into CSS and markup is more of a bottom-up approach and makes sense to a lot of programmers but in web development you have to keep in mind that there are aesthetics to consider and a creative direction to follow. It's not enough that your product is functional, it needs the input of a professional creative-director/graphic-designer in order to make the product pleasant to look at and use.
In my experience, the problem has always been wrestling with inflexibility of team-members. Graphic designers who are aesthetics focussed and refuse to compromise their design integrity; which sometimes results in impossible or extremely difficult and un-semantic layouts. Developers who flatly refuse to compromise the integrity of their code where there is a workable solution - which might be a little less elegant. The key is to have a creative team who is intimately familiar with CSS and what is and isn't possible and an engineering team who have an appreciation of the importance of design and aesthetics.
In my freelance life (having had the benefit of working in both camps) I find it much easier to mock-up in photoshop first because I know what I can and can't do. And photoshop mockups are a lot easier to change on client feedback than are CSS and markup. Also, if you can show your client a mock-up, they feel more secure because they know that their money is going into a well planned project with a definate direction.
Hope this helps!
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 have a friend who wishes to work as a freelance web developer, but insists that tables are the way forwards for layouts.
Several points he maintains in favour of tables:
This is what was taught at the beginning of 10 years of programming & computer science degrees, thus it 'must' be right.
Large companies use tables to achieve 'technical' things (like server side scripting and working with forms)
It saves time.
I have coded him some examples of CSS exactly matching table based layouts, and provided many links to articles explaining SEO and accessibility benefits.
With regards to semantic uses of HTML tags, I have explained at length with examples how tables are great for displaying tabular data but not for general layout.
From the perspective of a client, I have been explaining to him that I wouldn't hire someone using outdated methods as their main strategy for layout. As he is my friend and I wish him every success, I believe it is important for him to gain the best start when pitching for work.
The question again: How can I explain to a programmer that CSS positioning has many benefits over table based layouts?
Show him CssZenGarden. You can't do that with tables.
Designing with tables is really easy. Changing a tables design, such as "Put navigation on the left instead of the top," is anything but.
This is what was taught at the beginning of 10 years of programming &
computer science degrees, thus it
'must' be right.
So were frames and marquee tags. people dont use that anymore for a reason
Large companies use tables to achieve
'technical' things (like server side
scripting and working with forms)
If by 'technical' things he means ugly looking things, then hes right. also as i said, tables are good for tabular data, and you SHOULD use them for that. also, i dont see how server side scripting and forms have anything to do with tables.
It saves time.
Yeah it does, at least initially. if you want your code to be maintainable in the long run, tables will not save you time.
I would say that an approach that uses both tables and divs/css is best.
Tell the programmer to look up accessibility requirements and/or 508 standards. Depending on his target market that should mean it's a requirement.
Otherwise challenge him to a contest. Take a scenario of a potential client that likes the functionality but wants this button moved there, that menu moved here, blah, blah, blah. See who wins.
In your friends defense. If he is targeting small businesses, most of them probably won't know the difference if he uses tables or CSS. They just want a site that works.
It really sounds like your friend is just lazy. He's not going to last as a free lance developer for long if he insists on not keeping up with the technology and trends.
Tables were used for layout because that's all we had. It's always been a hack, they were never intended to do all of the things they were put in to. Surely, most programmers today know the history of HTML enough to know why things were put in place how they were...and that at the time of their invention we had NO idea what the internet would become.
No one put them out as a design mechanism, at least no in the way they ended up. So the argument that "that's how it always was" falls flat there. It was that way because we hadn't come up with the right way yet.
I don't personally think it saves time, either. You spend as much time repeating yourself and typing those irritating tags over and over again, all the while keeping straight how many columns your currently supposed to be spanning.
Table-less design has so many advantages (unless you're displaying tabular data). They are more accessible, easier to manage, (generally) smaller...the list goes on and on.
Anyone who is still holding out is simply either not willing or not able to learn tableless design.
I love this question. It does seem still to be a tough cookie.
I'm a developer, and prefer CSS for everything. first of all
1> This is what was taught at the beginning of 10 years of programming & computer science degrees, thus it 'must' be right. - HA
Table format as I've seen is a presentation thing. Therefore should be removed from the logic.
Working with designers, allowing them to change a tables format at will is a big bonus for the freedom of design.
Tables definitely still have their place in the world but large companies only use them as the techincal team are often met with larger challenges than the choice for a table layout or presentation changes
It can save time, but can later meet other problems, again with redesigns, SEO, accessibility.
I've had the problem when wanting to add another field... inside of <div class='cell'>my new field data</div> POP DONE - you have to fiddle with all manor of table formatting, which is time consuming and tedious -
"Working with designers, allowing them to change a tables format at will is a big bonus for the freedom of design." I don't understand this point, could you elaborate further? I am a designer first and have only been learning web coding to meet my clients web design needs. My friend is a programmer, and needs my design skills to help him gain business.
Well, its my experience, every designer has the right to say "I'd like to move that field slightly to the right by three pixels" - with a table it tough to break out the box. Giving the designer an option to either present something in a table format, or do magic -
For example, today - working with Google maps - its my mind, the route steps (directions you get for turn by turn roads) I saw that as a table and thats it. Later the design scope was changed and it was no longer a simple table format. If I did do table stucture - it would have been a recode on my side or an ordeal on the designers part.
this is my firts post here ever.
I have to develop an aplication for a group of people with special needs. The functionality is really trivial, however, i have no clue of how to do the interface for them to be able to use it.
Their intelectual habilities are perfect, they are actually studying high school, but one of them types with his nose which needless to say, is very dificult and another one types reaaaaaaally slowly with only one of his fingers and neither can use the mouse.
I was wondering if i could use javascript to develop a usable interface, based on huge grids or something like that or maybe you guys have a better idea.
Political incorrectness aside, why don't you ask them? You're talking about accessibility here, if they're using computers they must be able to tell you about what they like or dislike about user interfaces that they've encountered.
I'm going to split my answer into two parts - design and implementation.
From a design perspective, it's important not to be intimidated by the fact that the users use a computer in a different manner. Treat this like any other project. Observe how they currently use other apps, and ask about the kind of things that they find helpful, or have difficulty with. If they claim nothing is difficult, ask a teacher or assistant, who will be familiar with the kind of things they struggle with.
Once you've started implementation, try an idea and get initial feedback. If you simply ask how they find the prototype, they'll likely say it's ok. Instead, try observing them using it without saying anything or giving guidance. If they get stuck, let them find their own solution to the problem. If appropriate, you could ask the user to speak their thoughts out loud (e.g. "I need to save this form, so I'm scrolling to the bottom, and clicking save").
On the development side, try to use web standards (valid HTML, CSS and Javascript). People often point to the "Web Content Accessibility Guidelines 2.0" (WCAG2) but this is quite turse and hard to understand; there are many more friendly articles on "Web Accessibility".
Someone with a physical disability is likely to use an alternate input device, such as a "Switch", onscreen keyboard, head-tracking device, a device for pushing keys on the keyboard, or speech recognition. Many of these methods involve simulating the keyboard, so by far the most important thing is to consider the accessibility of your site without using a mouse. For example, try tabbing through the page to see if you can access all elements in a reasonable amount of time. Consider using the acesskey attribute to provide an easy way to jump to different parts of the page (using 0 through 9 is often recommended so you don't interfere with browser shortcuts).
Also make sure that no part of your site is time-dependant, as different users may take different amounts of time to perform a task. For example, don't use the onchange Javascript event to update a page based on a listbox selection. Ensure you have alt text for images, so it's accessible for speech recognition. make the pages short enough so that excessive scrolling isn't required, but not so short as to require following lots of links.
Those are just some ideas to get your mind going in the right direction - but there are many accessibility resources on the internet - steal freely, and don't reinvent the wheel.
I realise I haven't addressed your question about Javascript - that's because I think it's probably one of the less important considerations. If possible, use Progressive Enhancement techniques to make the site work with and without Javascript. You might also look into the WAI-Aria standard for giving semantics to your Javascript.
And finally, to reiterate my initial point - make something simple, show it to the users, tweek, and show again.
It doesn't really matter what technology you use. Use whichever suites you.
But, make sure that you make UI components BIG in size(Bigger buttons, bigger font, bold font, coloured font(are there any colour blind?). This is for the ease of use of people (you said someone types with nose).
Also, better to have audio as informative source along with the usual screen display whenever some wrong action is performed on the application. This way visually impaired people will be assisted more.
Do it well, you are doing a divine job.
The first thing that you should read up on is the Web Content Accessibility Guidelines written up by the W3C.
In a nutshell this document describes the basic principles for people with disabilities in general.
For your needs regarding persons with special needs, you might want to look at Jakob Nielsen's article on Website Usability for Children, wherein principles of web design for young children or people with otherwise limited cognitive ability are outlined.
We are looking for a prototyping tool to allow our business analysts (and myself) mockup sites. Some people have suggested using the MS Expression suite of tools for this. I am worried it might be a bit too technical for the non-programmers.
Does anyone have any experience using Expressions Web (or Blend) as a prototyping tool? Is there anything else anyone would recommend.
Take a look at Balsamiq Mockups.
Very easy to use, and the resulting mockups actually look like mockups.
I would not recommend that. You should use something that isn't intended for real application design. Mockups shouldn't look real, and your mockup tool shouldn't be difficult to use. When mockups look real, users get confused when the actual product looks different.
Visio works well for this. Usually for mockups you should be looking at what pieces of information go on a page, general layout, menu at the top, content in the middle kind of things.
If you build your mockup in HTML you may spend to much time fiddling around with things that do not matter early in the project, colors, exact spacing etc. Since it is a "real" form you will also get a lot of feedback on these items.
You don't even need a computer, just get GUI Mags.
If you are familiar with Eclipse then take a look at WireframeSketcher. It's a plugin I am developing for quickly sketching screen mockups.
There is a comprehensive list of such tools here.
Some of those are targeted for non-programmers (as my own, MockupScreens, it's also on the above list) but most can be used by business analyst, UX designers and the like.
The real difference is whether the tool is aimed at communication (e.g. clarifying requirements together with users) or at application design (ie. mockups being as precise and as complete as possible)
Axure RP is the best tool I've seen for this.
It's expensive (free trial available), but it's absolutely wonderful. Goes way beyond static wireframes, allows you to mock up interactions, navigation, behaviour and the like. Resulting prototypes are viewable/usable from any web browser, and it'll let you annotate them and generate static documentation (Word docs, etc.) directly from the prototype.
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