Images in mobile websites - isn't text safer?...

abo28 · 12th Oct 2011, 02:32 AM

Here's the issue I want to raise... I noticed that some mobile website designers use images (buttons) in the navigation section. Those buttons are good looking, but as far as I know a lot of mobile surfers turn off the image loading. I know I do - I only have 300 megs per month in my basic subscription, so if I navigated with the images "on", the phone bill would kill me. :-)

So a visitor who turned off the images cannot see any navigation options at all.

Given that, isn't it safer to use text (embellished with some css, of course) in the navigation menu? If the company logo does not show, that's not a tragedy, but if the navigation buttons don't show, the visitor is lost.

Thoughts?

WillR · 12th Oct 2011, 05:38 AM

Good point, I agree. You should always try and use CSS instead of images where possible. Not only is it going to load faster but as you mentioned, there are still a lot of people who browse with images turned off due to the speed and download limits of their mobile connection. I don't think many mobile website developers realize this. Sometimes the user experience loses out due to the ego of the person designing the site.

JToneyUK · 12th Oct 2011, 06:31 AM

This may be more of an issue for certain countries and regions. I know that now in the UK, unlimited bandwith options are common and cheap. I see the OP is from Romania, so in these countries with the less established infrastructures this issues are more prevalent. That's not to say people in countries such as the UK should be filling their mobile sites with images. A mobile site is ultimate supposed to be simple but quick in order for the user to get what they want easily.

rlhurst · 12th Oct 2011, 06:33 AM

If images are used for buttons...... would placing an <alt> tag with them with, "click here to go to.....", work? That way if the user does have images turned off, the link would still show (via text)?

WillR · 12th Oct 2011, 06:37 AM

Originally Posted by rlhurst

If images are used for buttons...... would placing an <alt> tag with them with, "click here to go to.....", work? That way if the user does have images turned off, the link would still show (via text)?

I'm not sure this would work because if you were using images for the menu, I would assume they would be CSS images. This means the images are called via the styles sheet so you don't have an opportunity to give those images an alt image tag.

I might be wrong but I know through my own designs if ever images are used in the actual design of the site, the best practice is to call them in the css file rather than the standard html.

JToneyUK · 12th Oct 2011, 07:03 AM

Originally Posted by WillR

I'm not sure this would work because if you were using images for the menu, I would assume they would be CSS images. This means the images are called via the styles sheet so you don't have an opportunity to give those images an alt image tag.

I might be wrong but I know through my own designs if ever images are used in the actual design of the site, the best practice is to call them in the css file rather than the standard html.

Images for buttons would have to be used within the HTML rather than the stylesheet. Just specify the div dimensions in the CSS, but the linked image/button in the HTML, apply alt tags for non graphic users and SEO purposes. The only time I use images in CSS is for background images.

WillR · 12th Oct 2011, 06:44 PM

Originally Posted by JToneyUK

Images for buttons would have to be used within the HTML rather than the stylesheet. Just specify the div dimensions in the CSS, but the linked image/button in the HTML, apply alt tags for non graphic users and SEO purposes. The only time I use images in CSS is for background images.

That's what I mean though. If I use background images for the buttons/menu they are called through the style sheet and should be. I don't use different images for each button. I have the button background and then the text on those buttons is real text. This is how it should be done. You don't want the whole button to be an image.

markjob · 13th Oct 2011, 03:45 AM

This is an interesting point. I mainly use images as buttons because i like to put a little bit of a gradient in there and i don't know how to do a gradient with css3. I know it can be done but i don't know how to do it. WillR im not sure if i have asked you this before but in you WSO do you go into any detail on how to do gradients with css3?

WillR · 13th Oct 2011, 04:08 AM

Originally Posted by markjob

This is an interesting point. I mainly use images as buttons because i like to put a little bit of a gradient in there and i don't know how to do a gradient with css3. I know it can be done but i don't know how to do it. WillR im not sure if i have asked you this before but in you WSO do you go into any detail on how to do gradients with css3?

No I don't since I wanted to keep things simple for people. If you search Google though you can find plenty of tutorials on CSS3 gradients. The important thing to remember is not all phones support them so you need to make sure the site still looks good and readable without the gradients.

512 Designs · 13th Oct 2011, 09:06 AM

Originally Posted by rlhurst

If images are used for buttons...... would placing an <alt> tag with them with, "click here to go to.....", work? That way if the user does have images turned off, the link would still show (via text)?

Just as a test, I turned my images off on my phone's browser and nothing shows up where an image is supposed to be, not even what's in the <alt> tag.

I'm using an Android phone with the default browser, so maybe a different browser would work....but I wouldn't trust it.

Mike

Nail Yener · 13th Oct 2011, 11:49 AM

Most designers design mobile sites as if they are designing for the desktop. That's because they have no idea about what is good and what is bad in mobile design. There are lots of resources about mobile best practices out there and all of them recommend using minimal images. CSS is more than enough for creating nice buttons.

Jay Moreno · 13th Oct 2011, 02:04 PM

perfect example of why i use user agent detection for more than just detect and redirect

i never use a full button as a graphical image but will style it using css and i will use a graphical icon as part of the button using css or css sprites, i may choose to use gradients too however dependent on the useragent i will choose to display or not display the icons, or the gradients by using dynamic css style sheets

i am a big believer that user agent detection should be used for more than just detect and redirect, if used properly it can be very powerful and can vastly improve the end user experience... and isn't that what mobile is all about?

I know some people are knocking out simple and quick mobile sites and the budget doesn't allow for those type of features but that's why if you look at the bigger picture you can get much higher $$$ for what you do, its also what separates you from the rest of the crowd too

MoneyMagnetMagnate · 13th Oct 2011, 02:21 PM

This is a great and seemingly overlooked point about mobile GUI - how much is too much?

It has to look "flashy" without using flash -and images to attract the viewer...

but would there be a way to program a "default to text" in the event the phone has image turned off?...the way a mobile phone recognizes a mobile site from a regular one?

Btw: as always, thanks for the above Jay & Will -
is there a good site I can study up on agent detectection more? and what options I have when building? Androids sold twice as many iphones in recent months...but a catch all is always the way to go...

Mobileico · 13th Oct 2011, 02:55 PM

With people jumping on 4G these days and phones with double processors, I really can't see where you would need to worry about images or not. However, I understand that people are still either on or purchasing mobiles with 3G. I firmly believe if you keep 'minimal' in mind and just get to the point, it'll be more than just fast enough. At least with a good minimal design, you'll be faster than what they already have. I have a client that I called last week and asked how everything was, and she said great. She mentioned that her mobile was faster than it use to be as if she was on 4G.

markjob · 15th Oct 2011, 03:09 AM

Originally Posted by Jay Moreno

perfect example of why i use user agent detection for more than just detect and redirect

i never use a full button as a graphical image but will style it using css and i will use a graphical icon as part of the button using css or css sprites, i may choose to use gradients too however dependent on the useragent i will choose to display or not display the icons, or the gradients by using dynamic css style sheets

i am a big believer that user agent detection should be used for more than just detect and redirect, if used properly it can be very powerful and can vastly improve the end user experience... and isn't that what mobile is all about?

I know some people are knocking out simple and quick mobile sites and the budget doesn't allow for those type of features but that's why if you look at the bigger picture you can get much higher $$$ for what you do, its also what separates you from the rest of the crowd too

Hi Jay,

I don't suppose you teach how you build your mobile sites? Sure sounds like something i would like to learn.

12th Oct 2011, 02:32 AM	#1
abo28 Bogdan Anastasiei War Room Member Join Date: 2008 Location: Romania Posts: 375 Thanks: 430 Thanked 181 Times in 33 Posts	Images in mobile websites - isn't text safer?... Share on: Here's the issue I want to raise... I noticed that some mobile website designers use images (buttons) in the navigation section. Those buttons are good looking, but as far as I know a lot of mobile surfers turn off the image loading. I know I do - I only have 300 megs per month in my basic subscription, so if I navigated with the images "on", the phone bill would kill me. :-) So a visitor who turned off the images cannot see any navigation options at all. Given that, isn't it safer to use text (embellished with some css, of course) in the navigation menu? If the company logo does not show, that's not a tragedy, but if the navigation buttons don't show, the visitor is lost. Thoughts?

12th Oct 2011, 05:38 AM	#2
WillR Digital Marketer War Room Member Join Date: 2010 Location: Australia Posts: 12,475 Thanks: 1,984 Thanked 8,187 Times in 4,079 Posts	Re: Images in mobile websites - isn't text safer?... Share on: Good point, I agree. You should always try and use CSS instead of images where possible. Not only is it going to load faster but as you mentioned, there are still a lot of people who browse with images turned off due to the speed and download limits of their mobile connection. I don't think many mobile website developers realize this. Sometimes the user experience loses out due to the ego of the person designing the site.
	. ➨ Here's How to Make Your First $177 Online This Week Using the Piggyback Method... .

12th Oct 2011, 06:31 AM	#3
JToneyUK HyperActive Warrior Join Date: 2011 Location: North West, England Posts: 267 Thanks: 97 Thanked 41 Times in 34 Posts	Re: Images in mobile websites - isn't text safer?... Share on: This may be more of an issue for certain countries and regions. I know that now in the UK, unlimited bandwith options are common and cheap. I see the OP is from Romania, so in these countries with the less established infrastructures this issues are more prevalent. That's not to say people in countries such as the UK should be filling their mobile sites with images. A mobile site is ultimate supposed to be simple but quick in order for the user to get what they want easily.

12th Oct 2011, 06:33 AM	#4
rlhurst I Do Voice Over Work War Room Member Join Date: 2011 Location: Oregon Posts: 581 Thanks: 34 Thanked 129 Times in 96 Posts	Re: Images in mobile websites - isn't text safer?... Share on: If images are used for buttons...... would placing an <alt> tag with them with, "click here to go to.....", work? That way if the user does have images turned off, the link would still show (via text)?
	I do voice over work... here's a SAMPLE

13th Oct 2011, 03:45 AM	#8
markjob Active Warrior Join Date: 2010 Location: UK, Hampshire Posts: 91 Thanks: 28 Thanked 8 Times in 7 Posts	Re: Images in mobile websites - isn't text safer?... Share on: This is an interesting point. I mainly use images as buttons because i like to put a little bit of a gradient in there and i don't know how to do a gradient with css3. I know it can be done but i don't know how to do it. WillR im not sure if i have asked you this before but in you WSO do you go into any detail on how to do gradients with css3?

13th Oct 2011, 11:49 AM	#11
Nail Yener You reap what you sow. War Room Member Join Date: 2008 Location: Sometimes you don't. Posts: 1,078 Thanks: 196 Thanked 411 Times in 243 Posts	Re: Images in mobile websites - isn't text safer?... Share on: Most designers design mobile sites as if they are designing for the desktop. That's because they have no idea about what is good and what is bad in mobile design. There are lots of resources about mobile best practices out there and all of them recommend using minimal images. CSS is more than enough for creating nice buttons.

13th Oct 2011, 02:04 PM	#12
Jay Moreno Mobile+WP = JumpMobi.com War Room Member Join Date: 2009 Location: San Antonio, Tx Posts: 1,270 Thanks: 301 Thanked 449 Times in 309 Posts	Re: Images in mobile websites - isn't text safer?... Share on: perfect example of why i use user agent detection for more than just detect and redirect i never use a full button as a graphical image but will style it using css and i will use a graphical icon as part of the button using css or css sprites, i may choose to use gradients too however dependent on the useragent i will choose to display or not display the icons, or the gradients by using dynamic css style sheets i am a big believer that user agent detection should be used for more than just detect and redirect, if used properly it can be very powerful and can vastly improve the end user experience... and isn't that what mobile is all about? I know some people are knocking out simple and quick mobile sites and the budget doesn't allow for those type of features but that's why if you look at the bigger picture you can get much higher $$$ for what you do, its also what separates you from the rest of the crowd too
	Sorry, I am too busy helping people to think of a cool signature!

13th Oct 2011, 02:21 PM	#13
MoneyMagnetMagnate Stay Hungry-Stay Foolish War Room Member Join Date: 2010 Location: Location, Location... Posts: 564 Thanks: 464 Thanked 1,722 Times in 1,250 Posts	Re: Images in mobile websites - isn't text safer?... Share on: This is a great and seemingly overlooked point about mobile GUI - how much is too much? It has to look "flashy" without using flash -and images to attract the viewer... but would there be a way to program a "default to text" in the event the phone has image turned off?...the way a mobile phone recognizes a mobile site from a regular one? Btw: as always, thanks for the above Jay & Will - is there a good site I can study up on agent detectection more? and what options I have when building? Androids sold twice as many iphones in recent months...but a catch all is always the way to go...

13th Oct 2011, 02:55 PM	#14
Mobileico Mobile design and creator Join Date: 2011 Location: Greeneville, Tennessee. Posts: 135 Thanks: 9 Thanked 48 Times in 21 Posts	Re: Images in mobile websites - isn't text safer?... Share on: With people jumping on 4G these days and phones with double processors, I really can't see where you would need to worry about images or not. However, I understand that people are still either on or purchasing mobiles with 3G. I firmly believe if you keep 'minimal' in mind and just get to the point, it'll be more than just fast enough. At least with a good minimal design, you'll be faster than what they already have. I have a client that I called last week and asked how everything was, and she said great. She mentioned that her mobile was faster than it use to be as if she was on 4G.
	"My aim in design and UX is elegance, intelligence, functionality, and fun." - Wallace Morrison. Desktop - Mobileico.com / Mobile - m.mobileico.com Featured in Google's video about mobilizing, Mobile 1:35 http://www.youtube.com/watch?feature...&v=Rzs5Iud20bk