July 12, 2010

HTML isn’t about Web pages

Or rather, it isn’t just about Web pages.  Responding to my post about CSS as the new Photoshop, Neven Mrgan makes some good points about HTML & CSS as a general purpose graphical system:

That assumption is that Nack is talking about creating web pages. I don’t believe he is… This is not the web Zeldman is interested in. It’s no web at all, in fact. […]

Look at any of Apple’s stores on the iPad – App Store, iTunes Store, iBookstore. Heck, look at the iTunes Store on your computer: it’s all made with HTML and CSS. Why? Because in the year 2010, if you’re going to be describing layouts, it’s not a bad call to describe them using very well adopted, rapidly developing technologies. […]

There’s no pride or glory in tweaking number after number and reloading a page to make sure my drop shadow looks nice.

On this last point, I’m hopeful that if Photoshop made it possible to copy/export styled text and objects as HTML/CSS, developers would accept the generated code.  There are only so many ways to specify box dimensions & borders, right?

More broadly, people are clearly interested in doing demanding, print-quality typesetting using HTML, the better to create things like magazines for tablets.  I’m encouraged to see work that enables better text breakingkerning pairs & ligaturesproportional leading, and more. Onward and upward.

One other thing: I’ve gotten to know Neven a bit after he (justifiably) needled Photoshop for its admitted hodgepodge of UI elements. I’ve never managed to finish my long and detailed response, but in it I talk about how using Web elements (e.g. embedded WebKit) makes it hard–if not impossible–to match everything with OS-native controls.  I go on to cite numerous examples of Apple’s Web content not matching Aqua, etc.  The point is, the more powerful & ubiquitous Web content becomes, the more we’ll deal with the challenges of making the complete desktop/online experience feel cohesive.

Posted by John Nack at 8:57 PM on July 12, 2010


  • Sean Foushee — 5:56 AM on July 13, 2010

    Interesting take on the whole “what is HTML and CSS” debate. I agree these aren’t strictly web technologies, but in my opinion I think the overwhelming majority of uses for HTML and CSS are web-based. I applaud Adobe for thinking outside the box on this, and your last post shows an understanding that any implementation where Photoshop (or Illustrator or InDesign) produces HTML/CSS documents would be a difficult mine field to navigate.

    For instance, would Photoshop produced CSS with vendor prefixes or remain standards based (I’d prefer a preference to turn on or off prefixes)? I for one agree with Eric Meyer on the topic (see A List Apart no. 309: Prefix or Posthack) but I’m sure the zealots in our community would shun anything less than W3C properties all the way. And this is why I don’t envy you or the Photoshop team on the decision ahead, but I do appreciate coming to the community for a frank discussion on this proposal. I think Photoshop, and the web, would be better off having this feature than not. And if it helps with quicker UI design for apps, as commented on by Neven Mrgan, then even better.

  • Chris V — 6:14 AM on July 13, 2010

    I’m with Sean Foushee on this, and would add that the user needs complete control over the generated HTML/CSS: HTML5? XHTML 1.1 Strict? HTML 4.01? CSS3? Vendor prefixes? CSS2.1? etc.

    [Yeah, believe me, there’s a reason I haven’t clamored to relight the code-generation candle. (That’s part of why I’ve been enamored of the idea of HTML layers: PS would parameterize and pass through code rather than *create* code.) On the other hand, Photoshop/Save for Web have long provided options for HTML generation & naming, so making things configurable isn’t without precedent. –J.]

    Oh, and we need a live preview of what we are exporting given our set of options. Did someone mention minefields?

    [FWIW one could use WebKit in a panel (which is already supported in CS5) to see the results of the conversion. –J.]

  • MikeW — 6:19 AM on July 13, 2010

    What you speak of is a cool concept. However, after seeing years or Wysiwyg editing tools code output, I remain skeptical about the ability for tools like PS to output clean, standards-based code. I hope you can prove me wrong though!

    It’s a lofty goal. But trying to have a computer make black and white conversion decisions will almost always lead to less-than-optimal compromise won’t it? This isn’t a shot at PS or any WYSIWYG tool. It’s just the reality any sort of product like this. The logic it uses might be ideal for one circumstance but not the other.

    With all that said, I think the market is ripe for some new type of website creation tool. One that totally thinks outside the box. The tools we use to create websites today are all less than ideal. I am not sure trying to bolt on features to Photoshop is really the right way forward. We need some from the ground up Lightroom thinking.

  • John Hamish — 7:14 AM on July 13, 2010

    Interesting that HTML and CSS are consider a “rapidly developing technology.” Sure while the web is moving at the speed of hot pancake syrup. It sure doesn’t look like HTML and CSS get updated any where near as fast. I mean hell we are still waiting for CSS3 and HTML5 and I am going to bet that outside of making things more complex they (especially) css aren’t going to make designing layer based css layouts any less of a headache. For some reason they just can’t make it easy you have to mess with floats and doing odd things with margins and junk like that. Stuff that makes little sense. Hell what you have to do to center a graphic is 99% odd and unintuitive. I guess having something like is just too much to ask for you have to mess around with its margins. Come on. Heaven for bid they redid it (along with Adobe and Dreamweaver) so that page layout was more like InDesign and the languages used (HTML and CSS) were logical and made sense.

    I think CSS and HTML are rapidly moving away from the main stream. Sure it will always be used, but it won’t be used by the masses. The masses are going to use something like WordPress where doing content becomes more important that doing the back-end junk and pulling your hair out for. Those creating things like WordPress or those that have a self destructive desire or heaven forbid consider it fun to unravel the unnatural thinking of the creators of HTML and CSS, the rest of us are going to say screw this and get as far away from it as we can. Unfortunately, for Adobe they have done little with Dreamweaver to make designing web pages easier and to minimize the need for getting in to the code. In fact CS5 did more to get in to the code than anything else.

    By this time the web design products should be to the point that messing directly with code is something you do on a very infrequent basis. But, instead it seems to be going in the opposite direction. Oh, well it isn’t like Dreamweaver hasn’t suffered from its purchase by Adobe.

    I do find it ironic that Adobe specializes in visual creation applications, yet has one of the most un-visual and obtuse (and the only really viable option on Windows) web design product. I guess Adobe doesn’t feel web site design needs to be visual.

    BTW we need a 64-bit Bridge. Calling a 32-bit program from inside of a 64-bit program (Photoshop CS5 64-bit and mini-bridge) is probably part of the reason this doesn’t seem to work so well.

  • Skyler — 9:30 AM on July 13, 2010

    As a designer that is learning HTML and CSS, and following as many developments as my brain can wrap itself around, I have to say that working visually isn’t just a way to make things easier. It’s a workflow decision. InDesign is a workflow more than anything else, and nothing else can compare in terms of quality product in a short amount of time.
    As far as clean code goes, I get the concern, but there has to be a way to avoid dealing with it directly when making aesthetic decisions.
    I think a good example of what John is talking about here is the jQuery ThemeRoller website. I think this is the most brilliant thing I’ve seen since I’ve been researching this whole web thing.
    I think Photoshop could do something similar.
    Output separate elements, and CSS files, etc. Not really create a webpage, but give you code that you can integrate into your webpage.
    What would really make it work though, is to have the canvas work as a browser window, and not a static page like current Photoshop windows. I think eliminating the disconnect between code and the finished product would help visual design quite a bit.
    Anyway, good luck, being new to this, maybe my contributions aren’t that helpful, but hopefully another vote for a clean visual web design system will help push you guys in the right direction.

    [Thanks for the feedback & for the ThemeRoller tip; I’ll check it out. –J.]

  • Greg Geisler — 12:59 PM on July 13, 2010

    John Hamish and Skyler both make very good points about the complexity of html and css (now and future versions). You would think that after all these years that it would have become -easier- to create html web pages instead of much more difficult, particularly for designers. The InDesign comparison is a good one. Imagine if you laid out your page in InDesign but then had to open it in a text editor to fine-tune the PostScript in order for it to output properly. I can’t fathom why we can’t have a WYSIWYG editor that is as cut-and-dry as that InDesign workflow.

    I’ve gone from being fluent in the original version of html to running in terror from its current incarnation. That’s a big part of why we develop in Flash- you throw stuff on the canvas and it “sticks” with no concerns for browser incompatibilities. The few html projects we do tackle we job out to places like PSD2HTML to get 100% compliant code or, like John H mentioned, we push people toward WordPress as a solution. Things are a bit of a mess IMHO and we designers are in dire need of something similar to InDesign for html websites.

  • Dave — 8:38 AM on July 14, 2010

    Yeh as both a web and print designer, it’s liberating doing a design inside InDesign and not have to worry about page structure and semantic markup but that’s also the fundamental problem standing in between designers who want to write clean, semantic code visually.

    That’s almost an oxymoron isn’t it? Designers are visual and don’t want to think about which element is h1, which is a paragraph, which is page navigation, etc. because they know that instinctively based on its size, its position on the page, the color, the way its styled… The problem is telling the software the intention.

    I think a combination of heuristics and designers actually thinking semantically is what’s going to help most in the long run. Take a typical example: a designer makes something bold or a different font choice and then boosts the size to, say, 200%; you end up with a bunch of spans or styled bold/strong elements instead of what it should be: a h1 or h2 element. And navigation elements are usually list items… The way the software usually does it now is slice up the images and puts links on those slices.

    What I envision happening is you create your design like normal in Photoshop. Depending on how your layout is setup, you could use a layer set and tell Photoshop or whatever program you want to treat those pieces like navigation. On export, Photoshop could also use heuristics and say “OK this element is bigger than the rest… that might be an h1 element. Tho next text layer is smaller and there’s a couple of those so make those h2s…” etc. Each layer set could be a page division which you could move around and end up being a div element. The ones with longer text would be paragraph elements… etc.

    I don’t think we can completely get rid of designers making semantic decisions but we could make those decisions easier without getting in the way of the design itself.

  • imajez — 4:27 AM on July 15, 2010

    I’ve said much the same as Greg regarding the crazy mess of coding for web display.
    But the problem is that the browsers are the problem as they all interpret code slightly differently even if you code correctly for them. So to follow his ID analogy even if you had someone hand code postscript for your InDesign files, Canon printers would give a slightly different result to Epson printers, which would be different from HP printers….and this is the reason good and consistent typography/design online is impossible unless you use Flash, but childishly Apple have nixed the only consistent way of outputting designs online.

Copyright © 2020 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)