39 Comments
- CRasH180, on 10/12/2007, -0/+5YMMV? Maybe I am clueless to the whole acronym thing, but did I miss an acronym somewhere?
- extratired, on 10/12/2007, -0/+3RTFA
"This is not a production technique for people who want to get the most benefit out of (X)HTML by creating structural, semantic markup. Creating structural, semantic markup, as A List Apart and most standardistas recommend, still takes time, thought, and hand-coding." - rogersmj, on 10/12/2007, -3/+6I tend to not put much stock in what he's saying, because he seems to think that exporting your web design from a graphics program to HTML is a good idea. His knock on FireWorks was that it only exports in tables. Uh, yeah, so what? No WYSIWYG editor is ever going to actually generate *good* code. FireWorks is the best for doing web mockups, and then you code the div/CSS structure by hand and slice in the graphics you need from your FireWorks mockup. ImageReady is an atrocity, which is why Adobe is scrapping it in favor of FireWorks for CS3.
- diggless, on 10/12/2007, -1/+4this is how i have done my presentation mockups for clients since i started freelance work in web design. It would be good information for someone with no experience, but if you cant use photoshop / image ready to make a mockup your probably not ready to start "working" in the web design field.
This is ONLY to be used for presentation purposes. the code created is easy to read and is logical, but is not streamlined or creatively compact in any way. If you publish a site using this method you are not getting the most out of it. - geekwithsoul, on 10/12/2007, -1/+3"No WYSIWYG editor is ever going to actually generate *good* code."
Actually, that hasn't been true for some time. Dreamweaver actually can do quite well, thanks in part to the efforts of such organizations as the Web Standards Group [http://www.webstandards.org/]. It that has a Task Force that works with Macromedia's (now Adobe's) engineers to improve standards compliance and accessibility in Dreamweaver.
Can it be mis-used and create gobbledy-gook? Of course, it's just a tool. Just like the lever you could use to pull your foot out of your mouth :) However, when used correctly Dreamweaver (and other apps out there now) are perfectly capable of producing valid code. It's actually easier to have it produce lean valid code when using XHTML and CSS than back in the days of nested tables. - chubbymidget, on 10/12/2007, -0/+2What is so wrong with position:absolute?
- bdurkin, on 10/12/2007, -1/+3No WYSIWYG is going to create good code and I don't think that anyone using the WYSIWIG part of it will care because they don't know what that means. It is meant for people who don't know how to hand code and if you do, then you are using it as a text editor anyway.
- jesirose, on 10/12/2007, -0/+2YMMV = Your Mileage May Vary
- chadu, on 10/12/2007, -1/+3Hmm. Not a typical Alistapart quality article, honestly. A bit obivous, kinda vague and a very YMMV type of approach.
- digimat, on 10/12/2007, -1/+2Umm exsqueeze me but anyone who does not find this a valuable time saver for simple mock-ups should really give their head a shake.
I had no idea you could export slices into divs from imageready.
great article. - Keyframe3D, on 10/12/2007, -0/+1actually this article is helpful, read it through.. he spits out xhtml+css code, but gets absolute positioning, which is rather simple to transform to relative positioning. Also, you need to make images which are in html, part of background in css..
- suppazone, on 10/12/2007, -0/+1jesus christ - check out the authors site...what a crap portfolio.
- TomP, on 10/12/2007, -1/+2Now we just need a program that makes them edits automatically :)
- bradleyland, on 10/12/2007, -1/+2Tables are for tabular data. Period.
"A lot of the reason why these so-called "Web 2.0" sites look so samey is because they've embraced the limitations of layouts without tables."
Go here and look at the many complex and talented designs created using the same XHTML and changing the CSS:
http://www.csszengarden.com/
"Let's face it, HTML and CSS are crude at best, and we need a faster, more agile, and more modernized standard, from the ground up, if the web is ever going to move beyond where it is today."
HTML/CSS is crude at best, but table layouts are a suitable substitute? Now I've heard it all. - dent, on 10/12/2007, -0/+1Actually, I thought this article was kind of interesting. I am even thinking about incorporating it into our development processes here to see if it might improve the time it takes to get from psd to final working CMS driven site. Don't get me wrong, I see it for what it is... I know its not going to replace the hand-coding that I do every day... However, it does allow a customer to see their design (or ours) in the context of a web browser. Ive participated in many projects where inital designs have not translated well to the web. Even worse a site design has changed AFTER all that beautiful xhtml and css has been hand-crafted to perfection.
I think its important to take the article for what it is. One day you might find yourself up against a tight project schedule and the customer is changing their mind AGAIN, this might just help you out! - cvoogt, on 03/25/2008, -0/+0Well, sometimes a JPG isn't enough. You can't show rollovers easily with JPGs. It isn't that much more work to show a slightly more interactive mockup.
- cvoogt, on 03/25/2008, -0/+0Yeah, the article's meant to point out the obvious, because the HTML/CSS export of ImageReady seemed to be a feature overlooked by most people, and it was quite handy for me anyway.
- KevinLiu, on 10/12/2007, -1/+1Err.. I just show my client a JPG. What was the point of this article?
- cvoogt, on 03/25/2008, -0/+0Crap portfolio? Whatever ... at least I make my living with it, and my clients and several major awards and influential entertainment industry individuals don't think it's a crap portfolio. And mind you, the article's only intended for mockups, and the code would have to be reworked by hand to get it into production.
- Smuikas, on 10/12/2007, -0/+0Most of the stuff on ALA is fairly beginner. Whenever someone asks me how to learn how to "do css designs," I point them first to a CSS primer, then to ALA, instructing them to read ALA from beginning to end. They've usually got a pretty good grasp of what it means to "do css designs" by that point, unless they're a complete basket case.
- oceandragon, on 09/19/2008, -0/+0Design to xHTML slicing service http://www.9xhtml.com
- divabox, on 10/11/2007, -0/+0Hard to believe! Web-design becomes more and more complicated.
- ClintonB, on 10/23/2007, -0/+0best css i have ever seen on this sites:
http://www.weather.com/search/partner?Keywords=%22 ...
http://www.medicalnewstoday.com/newssearch.php?key ...
http://www.weather.com/search/partner?Keywords=%22 ...
http://www.medicalnewstoday.com/newssearch.php?key ...
http://www.medicalnewstoday.com/newssearch.php?key ... - Kazrog, on 10/12/2007, -2/+2Tables aren't all bad. In fact, in many layout situations, the code is cleaner than using Divs and ULs, etc. on their own. You can still use CSS and be compliant and have tables where it makes sense to from a symantic coding perspective.
A lot of the reason why these so-called "Web 2.0" sites look so samey is because they've embraced the limitations of layouts without tables.
Let's face it, HTML and CSS are crude at best, and we need a faster, more agile, and more modernized standard, from the ground up, if the web is ever going to move beyond where it is today. - chadu, on 10/12/2007, -1/+1wouldn't the biggest time saver for mockups be to simply send them a jpg or a link to a jpg of the mockup? what is the point of cutting the mockup up? if you need navigation or the illusion of navigation try *shudder* image maps. of course not for proudction sites, but for mockups, sure.
- cvoogt, on 10/12/2007, -0/+0Some of these comments prove people don't read - they scan. The article is pretty clear this is for MOCKUPS and not production! The whole point is you can use Photoshop CS with ImageReady to set up your graphics, then export to HTML/CSS. Then you hand-code the rest from there in a new file, and you can keep exporting your images from PS as you make changes - without affecting your hand-coded HTML/CSS. You can therefore use this technique with semantically correct code too. However, Photoshop CS2/3 and the upcoming Fireworks CS3 (replacing ImageReady) should be a leap forward, but there's still nothing like coding it yourself by hand.
I know some of you just show your client a JPG, but the client won't get the full effect of the design without seeing rollovers etc. Adding that bit of interactivity really helps a mockup. But the absolutely positioned ImageReady code causes the whole mockup to be top-left aligned, so if you want to center your design in the browser you're better off using relative positioning. Besides that, absolute positioning does not mix well with semantic code. Someone else may be a better guide on that though. Anyone?
And yes, tables ARE evil if used for anything other than tabular data! They can be oh so convenient, but doing it with CSS is more flexible in a lot of ways. - mikehartor, on 10/12/2007, -0/+0Quite doubtful because they will _never_ do a really good software...
- csnoke, on 10/12/2007, -7/+6echo?
- j3one, on 10/12/2007, -2/+1I get what he is saying, but no.. thats a bad idea.
imageready is a BIG no-no. Do the same thing, but use the slice tool in photoshop and export the images you will need. DO NOT EXPORT ANY CODE from Photoshop or imageready. In fact never open imageready again. The Gimp, Photoshop or Fireworks can be used to make nice clean graphical sites. Just cut images where necessary, hand code the divs (it takes less time to hand code a whole site shell, than to fix shat out css ) and make with the pretty css...
Even in a fast paced production environment, where your just showcasing a "mock up" its still faster this way. - guitarromantic, on 10/12/2007, -1/+0This really didn't tell me anything useful, at least, compared to typical ALA articles. I feel this issue is a little, well, obvious. It basically gives "make a paper-based design" and "make a Photoshop-based design" the ALA treatment, which means pretty graphics, well-written descriptions, but doesn't remove the fact that this stuff is pretty beginner and pretty obvious.
- pimpdad82, on 10/12/2007, -5/+2*yawn
- sputza, on 10/12/2007, -7/+4lame
- Po0py, on 10/12/2007, -6/+2Doink!
.... nope. - Gigabyte, on 10/12/2007, -7/+1echo
- phatvolvo, on 10/12/2007, -14/+7hear an echo?
- kingace, on 10/12/2007, -12/+4an echo?
- sewalsh, on 10/12/2007, -14/+6do i hear an echo?
- superbird, on 10/12/2007, -12/+3What was the point in posting that?
- chardy, on 10/12/2007, -33/+2This article is for people who need to produce valid, standards-compliant mockups quickly, with the graphics tools they already use. This is not a production technique for people who want to get the most benefit out of (X)HTML by creating structural, semantic markup. Creating structural, semantic markup, as A List Apart and most standardistas recommend, still takes time, thought, and hand-coding.


What is Digg?