Tonight’s Feature: The Road To Impracticality
Having a custom web design is great! Ideally, it will look gorgeous, help you sell stuff, and maybe even express some of your personality. A beautiful color scheme, a custom logo with fine artwork, appropriate typography, and well-chosen layouts are just the best! I applaud you for creating them! However, some things on a site should be as little designed as possible. Why?
One time I was asked to build a site from some very lovely graphic designs. The site owner was going to sell things, so the designer made a gorgeous product display. Then came the bad news – they wanted to use an existing eCommerce system for the site. Shouldn’t be a big deal, right? Wrong – the product displays in the system looked nothing at all like the designed product pages. Sometimes this comes from a designer’s lack of real-world experience.
Yet some very experienced designers do this. I think that the main reason is that most people are “visual”, and somehow they don’t connect visual designs with actual content display – text, photos, videos, and much more. Visuals are clearly very important on a site, but if you ignore all the rest, fifty or sixty percent isn’t a very good grade, at least where I went to school.
Can You Paint Over My Vermeer So It Looks Like A Mondrian?
I explained the problem to my client, but they were insistent on using the design exactly as it was. As a web developer (the person who builds out the designs), I can tell you that this is nightmarish. Essentially, you need to un-do and re-do everything in the eCommerce system to shoehorn it into another “look”. So I shook my head and said, OK. The project ending up taking 5 times as long as it should have, and of course I passed the cost along to the client. So we got that “look”, but not without huge cost and big headaches.
Does It Hurt When You Overdesign That? Then Don’t Do That.
Usually this boils down to 3rd party software. When building a website, some components are best purchased from a 3rd party who specializes in a particular thing. Examples include components for eCommerce, forms, photo and video galleries, fancy event calendars, and membership. In the WordPress world, where I do my thing, these are called plugins, and they are plentiful. Using 3rd party components saves time and money, because you’re not inventing things from scratch. Not only that, but when you pay for a component, you’ll generally get help, if needed, from people who have the most expertise with that app.
So if you’re planning to design, say, for Woo Commerce, take a look at some of their demos and screenshots to see what the product pages look like. Then begin designing for it. Find out what 3rd party things will be used, and get familiar with how they look and function.
What If You Don’t Know What Plugins Will Be Used?
Be vague with the client. 🙂 For areas in your design where these things will happen, explain that the exact look of these parts will be determined soon. For instance, make a form that has little or no styling and label it “Product Order Form” or whatever it is. You can be super specific on other parts of the site. If they complain and you can’t talk them out of it, warn them that this may cost extra. Then speak with a developer to find out how big a deal a particular look will be. I’ve found that even very experienced designers may think that something hard is easy, and vice versa.
But this violates my design freedom!
It does, a little. Idealism vs. Reality is always an ongoing thing. I find that the people who get the most upset about this are the “Pixel Perfect People” – those who proudly announce that they insist on absolute visual perfection on their websites. They mean well, and it’s impressive, up to a point. Perfection is nearly obtainable – I can see 1-pixel variances in things myself, as well as very small variations in color, shape, text size, and texture. But here’s a dirty little secret: it’s always more expensive to be perfect, and sometimes not practical at all for certain types of content. HTML code itself was meant to be flexible, not an immutable thing. Besides, in today’s world where the web is being viewed on phones, tablets, iPads, etc., it’s not feasible nor useful to try to use one exact page layout everywhere.
Some of the least flexible design ideas I’ve seen stem from the fact that a designer is designing only for their giant 30-inch monitor. When they see how strange the design looks on a tablet, laptop, or phone, they may be very surprised. It’s also a good example of how Photoshop isn’t reality.
So the pixel-perfect thing is both good and bad. It will persist, of course. Its proponents may take refuge in activities where it still has high value, such as printing, or even painting and digital art.
I’ve worked with Pixel Perfect People on projects. That purist approach works if you only really care about the visuals, and don’t mind paying top dollar. I would argue that there are other crucial site features that must be considered:
- Business needs
- Functionality of features
- Page loading speed
- Content presentation
- Project length and cost
And more! When I mention these issues to people, sometimes there is suddenly an eerie silence, and I realize, wow, they don’t know what I’m talking about. Worst of all, even if I explain, sometimes they still don’t get it, or just ignore it. Dirtiest little secret: some of these people are web professionals, not newbies!
The good news is that even on a canned system or plugin, you can personalize it quite a bit. Background colors, fonts, text colors, spacing of things, these can usually be modified via CSS to match the feel of your design if the plugin is any good. I can handle that for you. That being said, there are some systems that lag behind in having modern features, and they’d be a lot harder to style. OSCommerce comes to mind, although they must have some responsive stuff available by now! Also, some plugin programmers pump out code that’s very difficult to style, but this is rarer now. In sum, you can modify the look within reason, but usually not the entire layout and structure of 3rd party stuff.
Step Away From Those WordPress Components, Now!
So by all means, be creative, beautiful, original, and all those other cool things that you are. But go easy when designing these parts, and things like them:
- Any eCommerce display, whether summaries or individual products
- Forms of all types. Yes, this does include short sign-up forms and search boxes, not just the big long ones.
- Forums – these have SO much data and moving parts that you will only go crazy if you try to carefully design every bit. And your developer may go on strike.
- Photo Galleries and Sliders – there’s actually a bit more flexibility here than with the others, but doing a lot will be expensive.
- Maps – not map drawings, but maps that are generated by data, such as Google maps.
- Dropdown Menus, and I’m talking mainly about the actual dropdown portions, not the top menu items. Sure, background colors and font sizes are usually fine to play with. But putting a lot of design energy into something that should be used sparingly anyway isn’t really advisable, will cost you extra, and will be tough to handle at responsive size.
- Ad systems
- Huge Portal Systems – think Yahoo or the like, very large amounts of searchable data.
I’ve probably left out a whole bunch but that covers many. I’ll bet you can come up with some more. Remember – even if that list seems long, no site has all of them, and even if you don’t do frou frou designs for those parts, you still have a huge amount of space you can make gorgeous!
Bigger Is Always Better!
At least in the mysterious emails I get encouraging me to buy something to increase the size of a certain thing. Except when it isn’t! Another problem I see isn’t really design per se, but with the use of Very Large Images. The first mistake people make, of course, is that they have poor quality giant photos, which will make your site look horrible, and as a bonus, load very slowly, annoying your visitors and Google.
But there’s another subtler problem that you may be unaware of – a huge, gorgeous image may not work at responsive size. You can actually make images “shrink” pretty gracefully, but if it starts out too wide, the image will look super teeny by the time you look at it on a smartphone (or on a stupid one). Here’s a site that looks great and has a nice solution to this. You see a wide image at the top, as well as quality smaller images. If you view the site on a narrower screen, the wide image vanishes, while the small images are still there looking great. Of course, this may be a hard sell on someone who has fallen in love with some large image.
On a recent project my designer colleague made a lovely infographic. The problem was that there was so much small text on it that when the image shrunk to fit phone size, it was unreadable. I solved the problem by using the image at desktop size, but at smaller sizes, I had the image carved up into narrow slices and stacked them, so that the text was still readable at narrow screen size, and I kept much of the large graphic’s feel. This took extra time and $$. A way around that would be to make the original infographic somewhat narrower to begin with, OR change from an infographic to actual text at small device sizes and style that just a bit.
It’s also worth remembering that Very Large Background Images may work poorly (or not at all) at small device sizes, and if you’re using those hipster parallax effects with them, that also adds complications.
Wondering what other things may cause cost and time overruns? Seen any time sinks yourself? Please let me know in the comments!