I was just doing some quick and dirty Google searches for Ubuntu and web design and I kept coming up really short on good articles. The only article I knew of that touched on this subject was written by Jonathan Christopher (link to article) but it was more about web development than design (yes, there’s lots of overlap). Too, all the articles I could find were written in 2006 so . . . it’s time for a new one.
A caveat
I draw a distinction between web designer and web developer (others don’t). When I say ‘web designer’ I’m referring mostly to someone who does front-end work. They deal mostly with Images, CSS, (X)HTML, PHP and Javascript. It could be argued that PHP is both a front-end and back-end part of web design the fact remains that if you’re doing front-end work you will inevitably have to scramble with PHP. Yet, as Nathan added in the comments below, a designer doesn’t generally live and breathe JS or PHP.
‘Back-end’ development, in my mind, has more to do with Apache, MySql and other programming languages. It also involves PHP and JS moreso than front-end design. I’m woefully ignorant of back-end development so I can’t go into much more detail than that. All I know is that what I do, I consider to be front-end work.
This article is written for people who do front-end web design with Ubuntu Linux.
Graphics editing and/or creation
I’m not even gonna try to be nonpartisan. The best image editing application for web design on Linux is The Gimp. Professional photographers will find it lacking, as will those in print industries. But for web design it’s the best.
Another application that lots of people love — just not me — is Pixel. I tried it, didn’t like it for only one reason. Well, two reasons. 1) It costs money and 2) the buttons are really hard to click for me. I have to keep my mouse perfectly still when I’m clicking otherwise they don’t work. At first I thought I was taking a trip over the cuckoo’s nest, but it’s seriously got to be a bug (can’t see that one being a ‘feature’). To be fair, it’s still in Beta.
Two of the biggest selling points for Pixel is that its contained within its own window and it has a Photoshop-like interface. So you can minimize the entire app at once just like Photoshop. The Gimp, however, is comprised of several windows and it can clutter your desktop. But that’s never been a problem for me (and no, I will not use Gimpshop).
Here’s what you do. Remember how Ubuntu has had multiple virtual desktops for years? Well, just designate one of those desktops as your ‘Gimp space’. Then all your windows will be there for you. Dead simple solution.
Keep in mind, I learned image editing and creation on The Gimp. I then used it exclusively for a year and a half of web designing before I had enough money to get a copy of Photoshop. So now, to me, Photoshop is a pain because it’s not anything like The Gimp.
(X)HTML, CSS, PHP, Javascript
Don’t use Nvu or Bluefish, don’t use any WYSIWYG editor for that matter. OK, OK, maybe you can use them but only if you’re already really good at coding by hand in a plain-old text editor. Reason being: for the most part your code will suck unless you really really really know what you’re doing.
To this day I’ve never found a need for Nvu or Bluefish. If you want to be hardcore, do what I do and use frickin’ gedit. I also like Scite and Screem as they have nifty features like auto-complete and code folding. Though I’ve gotta tell ya, I can’t stand apps that automatically close my tags. It confuses me because I’m already so used to doing that myself.
OK, so, basically as far as coding goes: be a man (or woman) and use your hands. Your code will be better, more compliant and easier to read.
FTP client
I use gFTP exclusively now that I’ve figured out how to edit files remotely. Another good one is Filezilla. Others like to use Konqueror but frankly, I didn’t even know that was possible until today when I was Googling for articles on web design in Ubuntu.
What? I missed one? No, I can’t stand fireFTP either.
Local hosting and testing
If you’re serious about web design then you absolutely MUST set up a localhost environment on your computer. You could do it manually if you’re an uber-geek but if you’re lazy (like me) you can just install and set up XAMPP. It’s really easy, here’s a tutorial.
Follow that tutorial to the “T”. The only problem I had with the tutorial was in setting up that “Sweet XAMPP Control Panel.” For some odd reason I couldn’t use the script given to add a menu item, so I had to add the item manually. Here’s how:
- Right click on “applications” in your menu bar and select “edit menus”.
- Then, in the left hand column highlight “accessories” and add a new menu item.
- Name it whatever you want
- For the command put this in:
gksudo "python /opt/lampp/share/xampp-control-panel/xampp-control-panel.py"
Now you have a simple interface to use to start and stop your MySql and Apache servers. Besides that one little problem I had, the rest of the tutorial worked great.
EDIT: if you don’t want to use XAMPP I’ve written a tutorial on how to use the available Ubuntu resources to set up a localhost environment.
Browser testing
I love browser testing on Ubuntu. Why, you ask? Because it’s easy. To test in Safari you only need look at a site with Konqueror as they display sites almost identically. To test in IE you only need to install IEs4Linux. There you go. Keep in mind though, that the only true way to test what a site will look like in Safari on a Mac is to actually test it in Safari on an actual Mac. And the only way to test in ie7 on Windows is . . . well . . . you get the idea.
The same goes for those of you who develop on Macs and Windows. Make your type Linux friendly.
End notes
If I missed anything or you would like my opinion on something feel free to leave a comment below or contact me.
If I’ve made any errors in this article please notify me so I can correct them.
18 Comments
Hey Ben — your sentiments are nearly identical to mine regarding Linux. Although I’ve switched to OS X full time quite a bit ago, I still run my Linux machine at home as an in-house web/file server.
I’ve always been a fan of the GIMP. My troubles root soley due to the fact that I work at an agency, and being the only designer/developer running GIMP does me no good. If I were freelancing solo, I would definitely suggest Linux as a viable alternative (given the extraordinary benefit of FOSS). Pixel is a tough situation, the app has great potential, but there is only a single developer behind it, making release cycles random and infrequent. GIMP is my tool of choice in Linux.
I think the only difference I can spot between you and I was that I really got into and enjoyed SciTE – but since gedit supports snippets, I may be in the same boat as you had I stuck with Linux for work.
Based on the series of articles you’ve written, it sounds as though you’re an inch and a half away from selling your Mac and the software you’ve bought altogether. Is that something you’re considering? Do you plan on keeping it around for testing purposes or otherwise?
Keep the articles coming!
You could install Safari for Windows over Wine. I haven’t tried it yet, but I use a Windows box at work with Safari installed for site testing.
I just switched to Ubuntu a month ago after a laptop hard drive failure and using the LiveCD for a few weeks. I like what I’ve been reading here, it’s been quite a help.
@Jonathan: No need to explain why you use PS and Macs.
They’re superb tools.
I get the feeling that I don’t do as much programming or scripting as you do. My need for snippets isn’t really that great. Maybe I should look into them a little more though.
@Mike: I’ll use WINE when I have to, but when I’ve got an equally viable native option for browser testing I’ll do that instead.
Ben,
You should check out http://browsershots.org/ for testing in various browsers. Also, gFTP is the only way to go for linux, unless you’re rocking the CLI. I recommend lFTP for that.
I wouldn’t put JavaScript (and especially not PHP) in the category of “design.” Both being programming languages, they don’t really fit. I can’t think of anyone who primarily identifies with the term designer, that also lives and breathes JS or PHP.
True, there are plenty of hybrid gurus out there, but for the most part designers needn’t be expected to program. I would, however, put XHTML and CSS in the category of design, because any designer worth his/her salt should be able to code the layouts they produce.
@Noah: No way. I don’t mind that CLI but it’s not my interface of choice.
@Nathan: Good point. Though I’ve had to mess with PHP in WordPress and even TXP design. Still, like you say, I don’t live and breathe JS or PHP.
Good article. Though the simplest way to differentiate between front-end and back-end is to use them as aliases for client-side and server-side. Making (X)HTML, CSS & JS all front-end and PHP, Ruby, Perl, SQL, et al. back-end.
I love font-end and back-end, and I can never decide which I love more. If I had to choose, I’d probably go for back-end, as I just enjoy the problem-solving nature of coding (and, frequently, I am frustrated by CSS’s limitations that prevent some of my more elaborate designs from working adequately).
Hey Ben,
Nice article and I agree with your choices as I too use mostly the same software. I’d like to recommend another text editor for Linux called Scribes . I usually use that or Gedit when doing my coding in Linux. The only thing with it is that it doesn’t use tabs for multiple files open but instead opens each in a new window, but other than that it’s great.
@Nathan We have a designer at the firm I work at. She designs pretty good sites, but couldn’t code it up for the life of her. It all depends on what your job requires really, I think. Though I agree that designers should be able to code up a site as well. =)
@James: Good way to put it. I like the way that distinction is made.
@Yannick: Never heard of Scribes. But if I have to give up tabs then I think I’ll pass. I usually have several text documents open at once and tabbing is the only way to go for me.
XAMPP is not a good choice for installing apache, mysql and php on any Debian-derived distro. You are much better off using the versions bundled with that distribution (aptitude install apache2 php5 mysql etc) as they are better integrated into the rest of your system, will not cause conflicts and will not randomly overwrite file supplied by your package management system.
One of the best things about Debian-based systems is the package management system (apt/dpkg) why go around it and risk breaking it?
On IRC, we spend a lot of time trying to help people recover from using tools like xampp (and the ati and nvidia installers)…. trust me, it’s not pretty.
I can understand that, Stuart. I’ve not found any tutorials for how to go about setting up a localhost environment in Ubuntu without using XAMPP. If you know of one, I’d love to know about it so I could edit this article (and my computer.)
Ben,
Nice article. as you may already know I just recently jumped into Ubuntu Linux from Windows, and was too seeking help/suggestions for web design in linux.
I have been trying pretty much all the applications you mentioned, none of them I like.
I don’t mind using gEdit to edit my files, but then it is such a hassle to ftp them to my remote server. And I’m constantly being disconnected from my server, using ubuntu’s ‘connect to a server’ thing.
I would like to learn how to edit remote files with gEdit through the command line, any interesting articles you’ve read to accomplish this, I notice you mentioned you just recently discovered how to edit remote files.
Frankly I miss Dreamweaver. But using Dreamweaver actually wasted time, when it comes to editing a local file and uploading it to the remote to overwrite, but the process was painless, very quick & easy.
Ben:
I can certainly understand why you wouldn’t want to give up tabs. That’s how I feel generally, I love having tabs. Dunno, guess I somehow managed to do without them in the case of Scribes.
Anyway, when you responded to Stuart about not finding any tutorials for how to go about setting up a localhost environment without XAMPP, did you try the Ubuntu Wiki? They have a pretty good article there on setting up PHP, Mysql and Apache. It’s what I always refer to when setting up LAMP on my Ubuntu box.
https://help.ubuntu.com/community/ApacheMySQLPHP
Hope that helps.
@Mike: All I did was open gFTP, go to ‘options’ and then for ‘Edit program’ pointed it to gedit which on my PC is /usr/bin/gedit
@Yannick: Yeah, I just found that tutorial. It was last updated for Feisty. Yikes. I figured out how to do it so I’ll be posting a tutorial in a few hours.
@Ben: Yeah it’s a little outdated (Ubuntu version wise) but I doubt the process has changed much since Feisty. Just saw your new article and that setup should work just fine. Glad you were able to find a solution that works for you.
Just googled you somehow and decided to send regards from a fellow linux website designer, with the same distinction (some people always advice me that if I\’m a web designer then I should learn .net, bah…).
Anyway, I got all programs you mentioned apart from setting up a local host, I\’ll think about it, I haven\’t yet found a reason to do so.
Congrats on a lovely blog with this darkeish theme and on your very, very neat portfolio, one day mine will be same!
Kind Regards
Sunlust
Great and most informational article! I have a Toshiba Satelitte, brand new, and am soooooooooo fed up with using Windows Vista, and being an ubuntu lover am about to install that on the lappy. I use the Xara beta and like it, but the Gimp is still king! Being able to do SVG with CSS would be a nice combo…guess I’m just pitching Linux for web design. Ubuntu rocks! Windows &%$#s!