Graphic designers ruining the web?

nilhg

One you guys/gals might be interested in.


http://www.guardian.co.uk/technology/2012/feb/19/john-naughton-webpage-obesity


Good looking easy to navigate sites are a joy but on the odd occasion I have to use the web from a slower connection I sometimes feel like going looking for the browser button to block all images I had to use back in the olden days.

Giblet

Large images + overuse of scripts to do simple tasks is the problem.

smash

Kind of goes back to the thread about careers in web design. I'm still a firm believer that if you don't know front end code then I don't consider you a web designer, you're just a graphic designer. And graphic designers shouldn't be allowed near code at all. And they should stick to print unless they have a knowledge of how the web actually works and what the constraints are.

Placebo

The BBC News front page had 115 items; the online version of the Daily Mail had a whopping 344 and ITV.com had 116.

What do you expect for a media rich multimedia news site?
Is connection really an issue at this day in age? Modems are out,
and for 3G - mobile friendly sites exists, or even apps [BBC APP]

I dont think its really an issue, its only noticeable because of bad/overload of scripts.

DonkeyStyle \o/

Engineers fume at the appalling waste of bandwidth involved in shipping 679kB of data to communicate perhaps 5kB of information.

It isn't just 5kb of information though.
Images/embellishments are also a form of communication, in a marketing sense at least.
If they help to sell your product/service (even if it's only eye-candy), then they are a legitimate business need and not a waste of bandwidth.
The same applies to extra scripting for making the UI more fancy.
If people genuinely preferred fast-loading sites that look like shít, then that's what we'd already have. It's naive to think companies aren't paying attention to what people respond to and that somehow an egotistical designer is fucking everything up.

Such a troll article.

p

Wow - that was published! Tech journalism in mainstream newspapers is a pain to read. The average quality of posts here is better than that piece.

I'd like to see a 'size of webpage' vs 'average speed' to see if there's any practical difference. I see he made not attempt to figure that out, since it might contradict his completely biased opinion.

28064212

Graphic designers ruining the web?

Laying all the blame at graphic designers is incorrect. A designer's job is to design something that is user-friendly, marketable and eye-pleasing. It's a developer's job to make it as stream-lined as possible. A designer doesn't need to have any consideration of caching, AJAX, jQuery etc, it's a dev's job to implement them.

This is the stupidest line of the whole article. After complaining about designers and unnecessary UI, he goes on to bemoan:

Photographers love the way their high-resolution images are now viewable on Flickr and Picasa

The high-resolution images are the content. No matter how stripped-back you make the Picasa and Flickr UIs, the high-resolution image-sharing is the point of the website. You might as well say there's too much text on the Guardian website, lets put a word-limit on every article. This guy's column would be a good place to start

smash

28064212 wrote: »

A designer doesn't need to have any consideration of caching, AJAX, jQuery etc, it's a dev's job to implement them.

It's a designer's job to design a site in such a way that it will cater for AJAX, jQuery etc. A developer can not implement something that's just not possible.

28064212

smash wrote: »

It's a designer's job to design a site in such a way that it will cater for AJAX, jQuery etc. A developer can not implement something that's just not possible.

Should a designer say "use flash to display a slideshow of images here" or just say "display a slideshow of images here" and leave the implementation up to the dev? Designers have to know what the UI is capable of, they do not need to know how it's actually implemented.

pixeldesign

Even though I'm a web developer I have to say that I should take care of how fast the website loads not the person who draws the website.
Especially now when we have HTML5 and CSS3 some images(backgrounds, buttons) and animations made in flash or jQuery can be replaced.

Also javascript and css files should be minified and compressed, remove useless code from pages. Lets say if you need a pop up box on index page its no point to import that javascript file in all pages...I saw this kind of problem on most websites. The same with css, if you only have 5 divs in index page, its no point to import the entire css files.

Images can be optimized for web aswell and many developers still doesn't do that.
Using bad selectors will also slow down your website.

There are many things a developer should know to optimize the website, not the designer.

smash

28064212 wrote: »

Should a designer say "use flash to display a slideshow of images here" or just say "display a slideshow of images here" and leave the implementation up to the dev?

Depends where you work. Where I work, the designer codes the HTML/CSS/jQuery once a design is signed off. Then they'll integrate it into the CMS. That's why we consider them web designers and not graphic designers. The developers only get involved if there's something tricky to be done.

28064212 wrote: »

Designers have to know what the UI is capable of, they do not need to know how it's actually implemented.

Knowing what the UI is capable of is part of creating a design that will cater for AJAX, jQuery etc.

28064212

smash wrote: »

Depends where you work. Where I work, the designer codes the HTML/CSS/jQuery once a design is signed off. Then they'll integrate it into the CMS. That's why we consider them web designers and not graphic designers. The developers only get involved if there's something tricky to be done.

I never meant to imply there was anything wrong with being multi-field, nor say that one approach was better than the other. My issue was with the author saying that it's graphic designers' fault that the web is bandwidth-heavy when there are plenty of inefficient developer practices out there that need pruning.

smash wrote: »

Knowing what the UI is capable of is part of creating a design that will cater for AJAX, jQuery etc.

Tbh, I would have said the complete opposite: Knowing what AJAX, jQuery etc is capable of is part of creating the UI. A designer only needs to know that an image can slide, they don't need to know anything about

$(this).hide("slide", { direction: "down" }, 1000);

It's entirely possible to create a brilliant, user-friendly, marketable interface without ever knowing a line of code

smash

28064212 wrote: »

My issue was with the author saying that it's graphic designers' fault that the web is bandwidth-heavy when there are plenty of inefficient developer practices out there that need pruning.

To be honest, a site can be as light or heavy as you want it. It depends on your target market and what they want so he has no right to slate anyone and especially in today's age where your basic mobile phone coverage is now faster than your net was 10 years ago.

28064212 wrote: »

Tbh, I would have said the complete opposite: Knowing what AJAX, jQuery etc is capable of is part of creating the UI. A designer only needs to know that an image can slide, they don't need to know anything about

$(this).hide("slide", { direction: "down" }, 1000);

They need to know that it can slide, but they also need to know that websites are modular. I've never worked with a graphic designer who designs websites but doesn't code but I presume they know this. I have however worked with graphic designers from the print industry who have come up with concepts for websites and have been quickly slapped on the wrist for creating designs which just will not work.

28064212 wrote: »

It's entirely possible to create a brilliant, user-friendly, marketable interface without ever knowing a line of code

I know it is yea. It's also entirely possible to draw an awesome house, it's building it that's the problem.

tricky D

The line between designer and developer can have quite a bit of blur between them. There is rarely a black and white separation. I've worked with plenty of designers, some who just hand over psds to ones who can do everything including coding. Likewise, I've seen developers who have produced some fine visual designs as well as the coding which would be their main function. As long as the the limits are known, there's usually no problem, it's more a management matter. The biggest problem I've had with graphic designers is when they refuse to get the fact that the website viewing media sizes are variable, not fixed at four corners of a page or a static display screen. They insist on pixel perfection with no room for manoeuvre and the result suffers unless the project leader prevents that.

jmcc

p wrote: »

Wow - that was published! Tech journalism in mainstream newspapers is a pain to read. The average quality of posts here is better than that piece.

Yep. I still remember the review that gobsh!te gave to Gerry McGovern's New/Caring Economy book. Wonder if it will make its way to the Oirish Times technology section in the next few weeks?

Regards...jmcc

alastair

smash wrote: »

I've never worked with a graphic designer who designs websites but doesn't code but I presume they know this. I have however worked with graphic designers from the print industry who have come up with concepts for websites and have been quickly slapped on the wrist for creating designs which just will not work.

That's a different matter then. Under-informed print designers are (contributing to) ruining the web. Not graphic designers per se. There are many graphic designers working on web, interface, onscreen design etc, who have a clear understanding of the constraints of code/technology/bottlenecks, but who don't pretend to have coding/development skills.

BarackPyjama

smash wrote: »

I'm still a firm believer that if you don't know front end code then I don't consider you a web designer

Ignorant rubbish.

Cork24

Graphic designers never heard of the slice tool in photoshop large images should be sliced down into 8 or more bits cuts down on bandwidth load time

jmcc

Cork24 wrote: »

Graphic designers never heard of the slice tool in photoshop large images should be sliced down into 8 or more bits cuts down on bandwidth load time

Any chance you'd explain that? (I think it would technically increase bandwidth and load time.)

Regards...jmcc

BarackPyjama

Oh dear God.

Giblet

You get limited connections, plus the overhead of making that connection. It's best to combine assets to reduce requests if possible (if applicable), not split them up.

Cork24

Inside photoshop u have ye slice tool when you slice an image save it for web..

This will increase load time on client side since every thing is on server side it is wise to use png format while using pictures.

You can have great sites with images

Giblet

PNG is a lossless indexed colour format which should only be used on images which contains large areas of repeating colour, limited colours, or uniform shapes and colour gradients. This is because the algorithms used for compression can make big gains when compressing these types of areas. For complex images, the compression will not be optimal and will result in bigger sizes than JPG. PNG has advantages over JPG when it comes to being able to use either indexed transparent colours (ie: multiple opacity pixels defined in the index) and full 8bit channel opacity. It isn't the optimum format to use for photographs or anything with complex patterns and colouring. GIF is similar except it only allows 256 different colours in the index and only 1 transparent pixel.

jmcc

Cork24 wrote: »

This will increase load time on client side

That's a big problem. Now webdevs with tiny brochureware sites on shared hosting won't even notice the problem but any slowdown for the user is, by definition, bad.

On large sites, the aim is to minimise everything (code, images, requests and DNS lookups) where possible. (I run a large site (a few hundred million webpages) with about 275K pages in traffic per day.) When you slice an image into eight sections, you are creating eight files - that's eight downloads whereas previously you only had one. Now the additional bandwidth overhead may hardly be noticable but it is there. The advantage that you think that the user sees is the speed at which the smaller image sections render. The image slicing thing is counter-intuitive because the people advocating it often are thinking in terms of page rendering speed rather than bandwidth.

Regards...jmcc

Placebo

Cork24 wrote: »

Graphic designers never heard of the slice tool in photoshop large images should be sliced down into 8 or more bits cuts down on bandwidth load time

LOL, 1 http request is better than many. Which is why we use sprites :rolleyes:
same way they used them in older games, snes, sega

smash

BarackPyjama wrote: »

Ignorant rubbish.

Hardly. Go find me a job there that's currently on the market for a web designer without coding required.

BarackPyjama

smash wrote: »

Hardly. Go find me a job there that's currently on the market for a web designer without coding required.

What employers are looking for and what makes a good web designer are often very different. The best designers I work with don't code at all. They're aware of what's possible technically and know how to design usable and beautiful interfaces but they can't code well... if at all. Just my experience.

tramoreman

web designers should know code at least html and css because it will be handy to know

p

tramoreman wrote: »

web designers should know code at least html and css because it will be handy to know

Good point.


HyperText Markup Language (HTML) is the main markup language for web pages. HTML elements are the basic building-blocks of webpages.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages.





Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicitly presentational HTML markup.[1]

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).

BarackPyjama

Haha. Touché.

Giblet

I'd rather the designers kept well away from the code thank you very much!