• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Design vs. Function - Website Banners/Sliders. Thoughts Please :)

I'm currently working on the design for a retail website and I'm in a cycle of debate regarding the banners on the website. Functionality must be considered I know, and a well designed website will combine both functionality and visually appealing graphics.
The banners I have had signed off for the site have been designed with the product in mind. The text and product both spaced appropriately and saved out as a jpeg.
The web dev insists that we apply HTML text to the banners (for SEO) and remove the text from the jpeg. I've years of experience working on retail websites and not once supplied a banner with html text in mind. Mainly because we've had to adhere to strict brand guidelines, fonts, colours etc. And taking a look at other retail websites I find that most, if not all of the banners are jpegs.
So I'm left wondering, where do you draw the line with banners and HTML text? I mean - the design will never quite be the same if the text, designed and style in photoshop is replaced with HTML text surely? It never looks as good. At what point do you start sacrificing some visual appeal with function and vice-versa Any thoughts would be great :)


Staff member
I'm no web designer but isn't that what alt tags are for.... most spiders now scan alt tags to get 'image seo'.
Having said that without context it is a bit hard to really give a definitive answer.
Never heard of banners with html text! Now that I think about, it does make sense in terms of SEO. Modern browsers can offer consistency through platforms, but you would just ignore a chunk of users with older browsers. Not that I mind, honestly. I am among those who believe that—at this point—it's the user who needs to upgrade their devices and software.


Staff member
Just had a thought about this....
Is this banner a proper advert on a site (bit like those at the top of design forums) or is it more of a 'slideshow' that alerts people to what you sell.
In the first case my original point is valid, in the second case it could swing either way because most of the javascript based 'slideshows' work with individual div's to show each 'slide' so could use html text etc.
But again it really does depend on context so it would help to have a bit more info.
Thanks for the input - It's just a featured banner - similar to this with the text flattened on the jpeg
There was a push for HTML text instead of the text created and flattened into a jpeg in Photoshop. It got me thinking - are alt tags just not enough anymore? Because for years retail designers seem to design the whole banner (as a jpeg) without any HTML text replacement. I can see that it may add some leverage in terms of SEO but surely not an awful lot. And weighed up against visual appeal; A slight influence on SEO vs.More freedom of design and visual appeal. I'd prefer the visual appeal. I just didn't know if that was me or the way it was done :)
we have banners on our website and personally as I am our marketing manager i like to go for visual appeal but then again we do struggle on seo vs text heavy home page websites but then look naff compared to ours. We have some HTML text incorporated into our Christmas banner you can see here http://www.printedeasy.com/ . It's always hard to work out where to draw the line, it really depends on what other sites you are up against in terms of keywords.
Using text in the banner will have a better impact in search, alt tags are crawled but using header tags to signify important parts of the post are better in practice. This can be a huge pain with cross browser compatibility, responsiveness and what not, the JL banner you linked to would be very simple to reproduce in html.
Reducing the size of the image by removing unnecessary parts would also improve SEO by reducing load times. You can also use text-indent to have the best of both but this can be considered bad practice although it serves a perfectly legitimate function.