Doesn’t anyone else do their mock-ups in Fireworks? I use Photoshop too sometimes, but I was curious as to why no one was mentioning Fireworks here. You can use the “Page” feature and everything to make it also interactive for the user in Adobe Acrobat or even in a browser, but it is not a real working live site.
Yep, I use fireworks too…
Yes, the purpose of Photoshop is to create images. A web layout is usually an image, initially. I want my layout to look exactly the way it will look in the browser (at least FF). Why “shouldn’t” I want that? My clients definitely do. Should I be using another app for my layouts in your opinion?
A web layout should not be an image. It’s merely pretty dressing for the form and function of the content-- something it already has at the beginning.
What’s terrible is that clients now expect this. As everyone has said, the web is not print, and what’s more, it’s not a pretty picture, it’s not a television commercial, and it’s not a billboard. It’s an interactive document (or set of documents), with its own rules.
Should I be using another app for my layouts in your opinion?
Not sure any other one would get around this problem, because the problem isn’t really the PS. Though I really like Jim’s idea with the building the basic layout in code and taking a screenshot. To tell the truth, that’s a LOT less work, and faster. At least, for me it is-- I write the layout faster than I could make it in GIMP.
I’m 100% with Ed on this (web building), but I understand some people have to work with companies who have been lead (possibly by web developers or even worse, graphic designers and marketers) to believe that he web is a place on teh Tubes where you have a picture with advertising and information on it. It’s actually a document with information and advertising on it, an interactive document that needs to be reachable, readable and workable with many many user agents (not all of which are even web browsers).
I agree designing a “web site” with Photoshop (or GIMP) is working backwards… except, in many cases, we are forced to work backwards.
When there is no content, the designer is forced to make a pretty picture first, then later on shoehorn the content into it. This makes doing things like making the page logical, accessible and semantic much much harder. And if it’s harder, then someone somewhere just isn’t going to bother. Which sucks for the rest of us, and for the visitors… and ultimately the client.
I was forced once to build a site with absolutely no content. I knew it was to sell some sort of security camera, and that’s it. The site still exists, works badly, is total crap and is nowadays my favourite example to send to folks showing them “This is Exactly How Not To Build A Web Site”. No content, crap site. Oh and someone learning PHP wrote the PHP backend, and likely the site still has PHP errors showing up on the page.
While the page is black because it’s a security camera, I’d made a “light” css version because I knew a lot of people would have problems reading the coloured text on black background. This is still only sitting on my server as someone else thought it was too much work to implement it-- even though I even made it pure HTML so they wouldn’t have to do any work!! So it’s not very accessible to certain groups now either.
If you want to control how fonts look, you’ll need to take everyone in the world and force them to download your desired fonts, and while you’re at it, make it easier on yourself and force everyone who wants to visit the site have the same OS, with the same settings, fonts, font-sizes, dpi/resolution, and user agent. Then, and only then, you can guarantee everyone sees the fonts the same, if still not like you can in PS.
On my Virtual Box, I have Windows XP without any extras added on. IE7 looks ok, font-wise. Tredosoft IE6 and below look nasty. FF looks really really nasty as does Opera. Safari-for-Windows looks really nice most of the time, as does Chrome (even if it doesn’t dress the fonts up as much as Safari does). So even the same page on the same OS looks like crapola fonts just because my browsers aren’t picking up on that ClearType thingie or whatever it is Windows has for font-smoothing.
Unlike a billboard or a newspaper, where everyone pretty much is forced to see the same font because there’s no software between them and the design. You then only have to worry about people with colour blindness, cataracts, myopia and funky brains. Lawlz.
Doesn’t anyone else do their mock-ups in Fireworks? I use Photoshop too sometimes, but I was curious as to why no one was mentioning Fireworks here. You can use the “Page” feature and everything to make it also interactive for the user in Adobe Acrobat or even in a browser, but it is not a real working live site.
If the clients can interact with the proto-page without needing to dl extra software, then yeah, that could be a nice way to show them a concept without having a site built… though it’s also twice the work, isn’t it? Build the site once for the special software and then again “for real”?
Also, the client is also still going to look at the finished product in a browser eventually as well.
Maybe it’s just safer to use crappy, aliased fonts in the mockup, so at least then it’ll match FireFox and Opera : )
Noone has mentioned the cases where the designer is not the coder - if the coder has no design skills, and the designer has no coding skills, what other options do you have?
Right now my husband’s company has a graphic designer who does only that-- and they are getting slowed down by demands for pixel perfect from the guy, while he’s unaware of how brittle his “layouts” are. I hope he decides to learn some HTML and CSS. His PS and Flash skills are great. But he makes bad design decisions sometimes for pages.
On the other hand, I don’t mind being given a design and told to code it, so long as it’s not a design that’s just begging to die in a thousand points of light at a single text enlarge. I can’t really come up with Teh Pretty myself, and if there’s a design for me, I can still start with the content, and use the design as a guide. The real page is still different-- the picture can’t stretch and grow like a real web page or browser-- but then I think that’s where the coder needs to know what s/he’s doing, so they can accommodate design while keeping the needs of visitors and the content itself in the fore. Design can be copied pretty well much of the time.
Actually, that may be the ideal setup-- a designer who’s aware of how the web really works, paired up with a coder who can write accessibly/semantically/minimally and also good enough with CSS to be able to imitate the design.
Kinda like, somebody usually “designs” a car on paper and then some engineer has to build it. You’ll get garbage like those “fins” that appeared in the 50’s (remember how the engineers would b**** constantly about designers not knowing about the existence of wind) but you can also get really beautiful cars.
But in that case, everyone knows a car isn’t paper, so at least that misunderstanding doesn’t exist, and clients know a car will not look in real life like the car on paper.
That’s just an education issue - designers need to be aware of the web’s limitations and what it can and can’t do, and what types of layout work on it.
Thank you Paul (and somecallmejosh), saved me having to respond directly. I know for a fact that if I told clients ‘I don’t know what your website is going to look like till I’ve built it’ I wouldn’t have many clients, and with the ones that did agree to let me work like that I’d probably have problems with time and time again when they said ‘I didn’t want it to lok like that’ and I’d have to completely rebuild. I can’t even imagine trying to work like that.
Plus, I don’t know how I manage it considering how the internet is ‘designed’ but I get all my sites to be cross browser compatible and Accessible. Guess it must be luck.
This is what I love about forums, you get to see all different kinds of perspectives, who would have guessed that people would do it the way Ed Seedhouse does it.
LOL, great way to put it.
You’re right, it really helps if the designer has an understanding of what’s easy to turn into a functioning, WC3 compliant, Accessible (etc etc) page and what isn’t.
Lawlz, it’s because you know what you’re doing and are good at it.
Actually quite a few people (seen around on forums) do it the way Ed does, but I’m not sure they all do it as freelancers for clients.
Since most of my work is code-rewriting, I’m usually taking pages which already exist, already have content and most of the time already have the design they want, all for a single employer (who just owns several different businesses) and so I got to learn right away how to copy (for the most part) a design while having the tables and generated crap behind it all get exchanged for semantic, accessible code. So, yeah, it can be done, but I’d also consider it “working backwards” in a way-- design->code->content really should be content->design->code (assuming you are required to code around the design, which usually we do). Ideally it would be content->code->design but as the other design thread floating around out there says, sometimes design includes more than the picture and so is a pre-existing partner to the content, before the code.
It’s just that, you can’t always do it that way, and also there are a lot of types of content that really are the same, basically, and so design has a lot more freedom and certain chunks of content can indeed be plugged into pre-made sections.
PS where did your Wade avatar go? The duck?
Hah! You remember that? I took it down in case people thought I was serious…
having different results in different browsers is annoying, but such is life. it really changes the way my site looks.
As for text in photoshop, I set the AA to none and hope the client doesnt notice the difference wink
edit: look at this image of one of my sites for example, renderred in IE 7 and FF:
http://www.uploadstop.com/viewer.php?file=bwjm8hc46yyaz3ss2yip.gif
Fantastic thread! Ed Seedhouse is bang on the money. I found myself nodding in agreeance. When you work in a large corporation these issues are intensified and it’s sometimes a battle of ideologies, it’s up to us to explain to people why the web is not print and people that are “giving in” simply do not help the cause.
The reason text rendered in Photoshop doesn’t look like text rendered in the browser (or other Windows apps) is a limitation of Photoshop. It does not support sub-pixel antialiasing with hinting (known in Windows as Cleartype). The closest thing it has is ‘crisp’ which is antialiased with strong hinting, but it is not sub-pixel like Cleartype so it is still slightly smoother with less defined curves and diagonals.
There are a couple of real hackish solutions. First, you could turn off all antialiasing in Photoshop. That will mean that if anything, text will look worse in Photoshop than in the browser (or the same, if Cleartype is off). It isn’t ideal, but hey at least it solves the “text looked better in Photoshop” problem.
Second, you could put it on smooth antialiasing and then it will look very much like as if it were rendered in Safari. Safari renders all text as antialiased and with no hinting or sub-pixel rendering; it is very close to the way Photoshop renders text in ‘smooth’ mode - that is, favouring accuracy of letter shapes over sharpness and readability. From a design perspective text rendered like this always looks ‘prettier’ which may be a bonus depending on how you look at it.
A more accurate solution would be to use something other than Photoshop which supports sub-pixel antialiasing (or just uses Windows’ built-in antialiasing, with Cleartype on).
“shouldn’t want” is a bit strong term in this case, I think. But you do need to educate your customers. There is no way that it is going to look like your photoshop because the browser simply will not render the text with the same properties that photoshop uses. Therefore, if you insist doint it that way, you will always find the same problem. That’s for a start.
Another problem that you will find is that the site will need to be flexible and resize as needed for various screen sizes and different ways of browsing, something that a photoshop image doesn’t need to do. To do a site pixel perfect (and yet, there will be small differences) you will need to use fixed measure units such as pixels. There are a number of advantages to do this, but I think that there are even more disadvantages.
In my experience, the kind of person that uses pixels for everything normally comes from the printing world and has a lack of understanding of the new medium and that’s why he insist in this kind of work flow. In general, those who finally understood the web, forgot about pixel perfection and concentrated in creating great layouts that work fine in any screen size.
Your customers are not experts in web design and therefore it is logical that they want everything to look the way you showed them. It is up to you to make them understand that a mockup is just an approximation.
On the other hand, once the first mockup has been accepted (and the cash has exchanged hands ;)) some designers put the site in their server so their customes can see it “live” and give their opinion and do their changes.
I think content should always be ready before design, otherwise you’re not designing the right way.
People are searching for your content, & the design should aid them to find it easily & read + understand it easily. (design should enhance the content, make it more readable, enhance it’s meaning & emotions, …)
There’s no way to do this effective if you don’t have the content IMO.
That’s why I find Lorem Ipsum one of the most stupid inventions in webdesign.
uncovery -> Internet & content strategy + information architecture -> wireframe -> storyboarding (filling in the content on the wireframes, click scenarios, points of action, information design, …) -> prototype -> test & change prototype -> prototype approved -> final html & css layout -> design detailing + programming. (at the same time, 2 teams/persons) -> optimization
This should be the best way to make effective websites.
When you’re not sure what content can & will be placed on the website, there’s always a big possibility you’ll have to make big changes on your design/structure. (unless you still think that when you put the content on any place in the website & it will be read by the visitors).
When you’re not sure what content can & will be placed on the website, there’s always a big possibility you’ll have to make big changes on your design/structure. (unless you still think that when you put the content on any place in the website & it will be read by the visitors).
I can vouch for this. Once I was making a “site” based on very little content and an image the guy had made. I thought at the time that the bottom part was a footer, except it had a lot of information in it.
Later it turned out the information there was pretty important, while I had stuck it last-in-source, that was not a good place after real content got in there.
I did manage to convince the guy to let me rearrange the source, but it was also an extra amount of time spent that wouldn’t have had to if I’d had all the content in the first place.
Argument by insult. yawn
Who said that I don’t have content before I start a design? I need more than just to know how the client wants the site to feel, the impression they want it to make visually, before I can do a design. I also need to know what content they plan to put on the site, and the job the site is intended to do so that I can make sure that it is fit for purpose.
The design is driven by their content, the job the site has to do and the ‘feel’ they require. I rarely have all the content but I always make sure I have enough to be able to do a homepage and one content page mockup for them to see before I start coding anything.
Sorry, thought that went without saying but maybe it’s because it’s taken me years of real life experience with real clients to get to this point and I see other professional website designers doing the same thing time and time again that I now take it for granted that anyone building websites is following the same steps.
I don’t think he meant you personally 
Still, I feel that designers that do ask for content before creating mockups are here, at SP (am I being cheeky promoting SP? probably! still I think it is true :D)
Many designers are shy or do not understand the importance of structuring the information the right way and how that can affect the design side of things because they are extremely visual persons. Today we are more educated towards those things, but there are a great number of designers that can’t see the advantages of working this way.
Maybe he didn’t 
I just thought that since I never mentioned content and I did mention starting the process with the design that he was either talking to me or people who work the way I do.
It just never occurred to me to mention that of course I’ve discussed content with the client before starting a design.
True.