Andrew Pollack's Blog

Technology, Family, Entertainment, Politics, and Random Noise

A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pages

By Andrew Pollack on 03/23/2009 at 12:11 AM EDT

So called "Designers" take their artsy-fartsy training with Adobe Illustrator or Photoshop to create "Mockup" pages, then ask us as developers to make web pages that look the same way. Sometimes I think they don't really know when what they're asking us to do is particularly difficult.

These are my tips to "Designers" -- I hope they'll understand what they're asking us for.

I realize that these are "best case" recommendations. Sometimes you want color fades or other things for the look they achieve. Its a trade off. I just want the designers to understand when they're making that trade off, so they can decide if its worth it. There are combinations of images and overlays and tricks we can do to make it appear that these things work, but they all take a lot more time and limit the overall flexibility of the page for growing based on browser width or content size.

1. Solid Color Choice

In Illustrator, you can choose a color from a palate of process colors. The web doesn't have these. The web uses only RGB colors. Even then, some combinations are more "web safe" than others, meaning they'll appear the same on a wide range of monitors. Here is a specific list of the "most safe" ones: http://www.w3schools.com/html/html_colornames.asp. When you use a color in Illustrator that is a "Process Color", as a developer I have to try to find the closest RGB conversion to match that process color. Sometimes its easy, sometimes it isn't. It would be even more helpful if you could provide an editor's mark at the side of the page -- perhaps as an overlay layer with arrows pointing to specific details on the page -- that showed clearly the RBG color code you've chosen. The problem with "process colors" is that they'll look very different on each person's screen even in Illustrator. They're meant to look good in print and refer to specific inks. For that reason, if I match an RGB color to what I see on my screen as your choice for a process color, you may see it as wildly off base.

2. Color fades, overlays, filters, and transitions

These do not exist in HTML. There is no program code to say that this 'area' fades from blue to red. There is also no matching technology for all the overlay fade types that Illustrator offers. Any time you use these in Illustrator, whatever part of the page that is must be reproduced as a graphic image. The problem with doing things as graphic images, is that they don't expand or contract smoothly without pixilation if that area of the screen needs to resize. The result is that we must limit the page's ability to go wider or longer based on content or based on the size of the user's screen. On the web, this is considered unprofessional.

3. Transparencies, and transparent overlays

There are some severe limits to this on the web. If something has to be an image due to some of the reasons above, or those listed below, it must be done as a ".GIF" image. The problem with .GIF images is that they are much more limited in the number of supported colors. You won't see photography done as GIFs. For high resolution, you need a .JPG. JPG, unfortunately, doesn't support transparency. There is the alternative of a .PNG image - but these are not well supported by older browsers, so using them causes other problem. To simulate the look of an overlay that has this, we have to make them a part of the image they appear to be on top of. There is support for transparent overlays of non-graphical content -- like text with a transparent background -- that can be overlayed onto images, but its only really good for either 100% transparent, or 100% opaque. Any point in the middle of that will vary across browsers and systems.

4. Shapes - other than rectangular.

If it doesn't have a 90 degree corner, then HTML doesn't do it. Period. Absolutely any part of any page that isn't perfectly squared off with right angles absolutely has to be done with graphic image trickery. This gets especially difficult if you have a long curve or arc that goes through many areas of the page which are otherwise content specific and have to line up. The biggest problem we run into here, is that the things we have to do to make it look right really limit the ability to grow the page based on content and browser width.

5. Fonts - Sadly

The web browser world supports only a very small subset of fonts reliably. Any others depend entirely on the seemingly random choices of end users for their other software. Unfortunately, there is no reliable method for embedding other fonts that works across enough browser versions to be considered a good practice. There ARE ways to embed fonts for some browsers. In fact there are several. There just doesn't seem to be a reliable way to do it across many browsers and operating systems. Two pages which show which fonts are well supported are listed below:

http://www.fonttester.com/help/list_of_web_safe_fonts.html
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

One of the things you'll notice on each page, is that several different fonts are listed "together" as if they are they same. As a designer, you'll say "but they're not the same at all". That is true, but this is how a browser sees them. It will try the first, then move to the second, and so on through the row until it finds one in that row that the user has. It will show that font. Oh -- and users may have made local changes to their "font substitution" table as well, so even these sometimes get tossed out the window.

I hope this helps somewhat.

AUTHOR'S NOTE ADD 3/23 --
If you're going to declare "CSS Is the solution to HTML problems" you need to re-read. CSS is included in the tools I'm talking about. It doesn't change the issues I've mentioned at all. It does make doing those things possible, but nobody is saying they're impossible to accomplish. What I'm saying is they're more difficult than most designers think, and the tricks you have to do to make them work reduce the flexibility of the page.


There are  - loading -  comments....

re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy Bruce Elgort on 03/23/2009 at 12:46 AM EDT
Andrew,

Have you not heard of CSS? I work with graphic designers all of the time and
have no problem working with the artwork and designs they supply. Yes they can
be complex but CSS and HTML do a fine job.

Can you tell us all more about what you got and what you are trying to do?
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy Andrew Pollack on 03/23/2009 at 12:55 AM EDT
Read the story, Bruce --

I'm not saying the things can't be done. I'll send you a list of some of the
sites I've done recently by email.

What I'm saying is that when you do these kinds of things, the tricks you have
to use -- with css absolute positioning or not -- have unintended
consequences. In particular, when you make complex image based curvey
backgrounds and things, you lose the ability to flexibly grow the screen
horizontally or some times even vertically to handle your content.

CSS is just a tool in the tool box. It isn't magic. It doesn't give you
smooth curved arcs with transparencies to the images below that resize smoothly
to accommodate dynamic text.
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy Bruce Elgort on 03/23/2009 at 09:12 PM EDT
Simply look at the Domino blog templates to see what a wonderful job they do
with importing and using pretty funky and nice looking designs. Most of this
is done via HTML and CSS. So why not your design?
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy Simon O'Doherty on 03/23/2009 at 07:51 AM EDT
I think for any kind of design work your going to have to use CSS rather then
HTML formatting. It is easier to maintain as well.

As for graphics, HTML4 allows you to do some graphical based markup (I forget
the tag).

But with most design stuff it should be tested in a text based browser and
ensure it makes sense logically.
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy Andrew Pollack on 03/23/2009 at 08:41 AM EDT
Actually, its a combination of CSS and HTML formatting that seems to work best
if you really want to cross browsers and maintain flexibility.

Some people eschew tables no matter what. Everything must be a div layer.
That's bogus. Tables are helpful for a lot of things.

HTML4, VRML, lots of other ML's --- great, but tell that to your customer who
wants to support all the browsers popular for the last several years.
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy Nathan T. Freeman on 03/23/2009 at 08:22 AM EDT
Andrew, you left out the last one...

6. Get the hell of my lawn!
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy Nathan T. Freeman on 03/23/2009 at 08:22 AM EDT
*sigh*

"OFF" my lawn, of course.

Blew that punchline, I guess.
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy Andrew Pollack on 03/23/2009 at 08:41 AM EDT
So you don't think its a good idea for designers to understand the media
they're designing for when making decisions?
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy Nathan T. Freeman on 03/23/2009 at 12:19 PM EDT
I think it's a useful idea. That doesn't keep you from sounding like an old
man, though. ;-)

For instance, I'm often torn on the concept of fluid layouts. In the past,
I've tried really hard to make my layouts fluid so they expand to fill the
allocated area. Over the last several years, I've learned some of the
ergonomic reasons why interface width limitations are important in horizontally
rendered languages. So there's an argument to be made that being able to grow
to fit the screen resolution is actually NOT desirable from a human interface
perspective.

It might be that the designer is doing you a favor by forcing you to a static
width.
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy John Turnbow on 03/23/2009 at 10:08 AM EDT
If you want a good graphics designer that understands all this and more and
also is great for domino developers here is a link:
http://www.linkedin.com/in/iwonajankowski
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy Bruce Perry on 03/23/2009 at 12:06 PM EDT
CSS may have changed since I looked at it a few years ago, but at that point if
you wanted to do any serious layout work, you ended up having to do something
that was a hack in at least one browser - and you still had to consider how
your site would render with each browser.

CSS seems fine for allowing you to control fonts and background colors for an
entire site in a consistent way, but it's not the cure-all for browser
inconsistencies that some had hoped.

... and don't even get me started on just how fast the cascading part of CSS
can induce madness.
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy David Killingsworth on 03/24/2009 at 02:17 AM EDT
CSS is very powerful these days. It's used for more than fonts and background
colors.
re: A few tips for "Graphic Designers" who are creating page mockups for developers to code into web pagesBy David Killingsworth on 03/24/2009 at 02:16 AM EDT
I started doing Notes/Domino stuff back in R3 days in a corporate environment.

I took a hefty severance in 2003 and did a bit of Domino consultant, but mostly
got into LAMP (Linux, Apache, MySQL, PHP) installations, open source
application setup/customization, and web design.

I did this for 4 years before getting back into the corporate Domino side of
things.

I still do a few PHP/MySQL based websites - mostly utilizing Drupal
(Drupal.org).

One thing I can tell you is that the underlying technology - the web
programming to make a task happen can take a certain amount of time, but the
theming and coding to put a pretty face on that can be a very very daunting
task.

Finding the resources to perform this task can be very difficult, especially
someone who knows the technology you are working with, works fast, and
understands a vision of what you want - oh, and doesn't cost and arm and a leg.

I almost always split web development into 3 parts:

1. Code development.

2. A graphic designer to create "screens" which are produced in Illustrator or
Photoshop. The only thing they produce are images of what it will look like.

Sometimes, Step 2 also creates the process workflow of how one screen leads to
another. In this case, Step 2 can take place before Step 1.

3. Theme development - which is the process of beating CSS into shape to match
the "screens" the graphic designer has created into usable HTML, PHP, and CSS
files.

Steps 2 and 3 can take much much longer than step 1 believe it or not.

Theme designer don't get the credit they deserve.....

and by the way, if you know any Drupal theme developers, please send them my
way. I'm ALWAYS looking for someone who knows what the hell they are doing -
AND doesn't cost an arm and a leg.


Other Recent Stories...

  1. 05/05/2016Is the growing social-sourced economy the modern back door into socialism?Is the growing social-sourced economy the modern back door into socialism? I read a really insightful post a couple of days ago that suggested the use of social network funding sites like “Go Fund Me” and “Kickstarter” have come about and gained popularity in part because the existing economy in no longer serving its purpose for anyone who isn’t already wealthy. Have the traditional ways to get new ventures funded become closed to all but a few who aren’t already connected to them and so onerous as to make ...... 
  2. 04/20/2016Want to be whitelisted? Here are some sensible rules for web site advertisingAn increasing number of websites are now detecting when users have ad-blocking enabled, and refuse to show content unless you "whitelist" their site (disable your ad-blocking for them). I think that is a fair decision on their part, it's how they pay for the site. However, if you want me (and many others) to white list your site, there are some rules you should follow. If you violate these rules, I won't whitelist your site, I'll just find content elsewhere. 1. The total space taken up by advertisements ...... 
  3. 12/30/2015Fantastic new series on Syfy called “The Expanse” – for people who love traditional science fiction[] “The Expanse” is a new science fiction series being broadcast onthe Syfy channelthis winter. It’s closely based on a series of books by author James S. A. Corey beginning with “Leviathan Wakes”. There are 5 books in the “Expanse” series so far. If you’re a fan of the novels you’ll appreciate how closely the books are followed.TIP: The first five episodes are already available on Syfy.com. If you’re having trouble getting into the characters and plot, use those to get up to speed.The worlds created for ...... 
  4. 10/20/2015My suggestion is to stay away from PayAnywhere(dot)com  
  5. 08/07/2015Here is one for you VMWARE gurus - particularly if you run ESXi without fancy drive arrays 
  6. 08/06/2015The Killer of Orphans (Orphan Documents) 
  7. 06/02/2015Homeopathic Marketing: Traveler on my Android is now calling itself VERSE. Allow me to translate that for the IBM Notes community... 
  8. 03/17/2015A review of British Airways Premium Economy Service – How to destroy customer goodwill all at once 
  9. 02/26/2015There's a bug in how @TextToTime() and @ToTime() process date strings related to international standards and browser settings. 
  10. 01/21/2015Delivering two new presentations at Developer Camp (EntwicklerCamp) 2015 in Germany 
Click here for more articles.....


pen icon Comment Entry
Subject
Your Name
Homepage
*Your Email
* Your email address is required, but not displayed.
 
Your thoughts....
 
Remember Me  

Please wait while your document is saved.