Smartphone/PDA layout compatibility 4

[Sleidia]

Hi guys,

I have a full CSS design, tabless non-liquid, created for a 1024 pixels wide website.

What is the easiest way to make a version that can be easily browsable from both Smartphones and PDAs?

Thanks for the help!

 

[BillyRayPreachersSon]

If it's a fluid layout, it should work automatically, I'd have thought.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[CliveC]

Find an emulator on the web for the device that you wish to target. Here is an example of a Nokia emulator:

http://mtld.mobi/emulator.php?emulator=nokiaN70&webaddress=mysite.com

Clive

http://tubularity.com

 

[Sleidia]

Thanks guys.

I'm a smartphone owner myself and I've already noticed that smartphones can display web pages like a PC.

My question is more about how to easily edit the layout so that the website can be seen on a smartphone without the need for the visitor to extensively use horizontal scrolling.

How about simply avoid calling the css file?
I don't think the resulting content would be easily readable though.

 

[johnwm]

You can use CSS to provide different styles and layouts depending on where they are viewed. See

http://www.w3schools.com/css/css_mediatypes.asp

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[BillyRayPreachersSon]

Having a fluid layout with percentages instead of widths is one good way. However, this is not always practical, and so a lot of PDA browsers will shrink things accordingly.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Sleidia]

So guys, I bet that the safest route would be to design a CSS dedicated to mobile devices, right?

 

[ca8msm]

I would say so, yes. This way you can specifically target the devices and make any necessary changes you need whilst not affecting other users of the site. The browsers on the devices will be smart enough to automatically know which style sheet to apply according to their capabilities.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Sleidia]

The browsers on the devices will be smart enough to automatically know which style sheet to apply according to their capabilities. "

How can this be possible?

I thought I would have to find a method to specify the right CSS for the right plateform.

 

[ca8msm]

The browsers themselves know which media attribute to apply. Say, for example, you click the print button on the browser you are using now, the browser will apply the style sheet which has a media="print" attribute (if one exists). The same approach is used by small hand held devices (as is described in the link provided by johnwm above) and the browsers designed for these devices will (hopefully) be set to use this media type.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Sleidia]

OK, thanks for the info!

 

[jstreich]

created for a 1024 pixels wide website."

"You must be this tall to ride this ride!"

At least carnival rides do it for safety reasons. You, on the other hand, are cutting out everyone with 800x600 which is still a large number of people, cutting out anyone who has 1024x768 but happen to not maximize their windows, and waste the valuable screen real estate of people who went and did something silly like getting a monitor and video card that is running a resolution way larger than 1024x768.

Please, stop telling me what my resolution should be, and just give me the content... or else I'll go somewhere else that has better content anyway (because the internet is seemingly infinite and there is no doubt someone else selling the same thing your selling).

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[Sleidia]

Please give me a break.

http://www.apple.com

: 1024 pixels wide

http://www.microsoft.com

: 1024 pixels wide

http://www.w3schools.com/browsers/browsers_display.asp

 

[BillyRayPreachersSon]

I agree. Designing sites to fit into 800x600 is just old-hat.

If we as developers don't start pushing the boundaries, and designing & building for the most common specification out there (which 800x600 is no longer), then nothing new will get done, and things in the web world will become stale.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ca8msm]

Maybe it is old hat, but there are still brand new machines coming out that only support up to 800x600 (e.g. the ASUS Eee). Obviously these people will be in the minority, and in fact from my own sites I only have about 1.6% of people using this resolution, so it's really a choice as to whether you want to consider these people or not.

Personally, I consider them, but they don't have much bearing on the choices I make as I'd rather cater more towards the other 98.4%.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[jstreich]

I'm saying that we shouldn't design for a specific resolution, because people who use 600x800 get horizontal scroll, people who browse with the browser windowed instead of maximized get horizontal scroll and people with higher resolutions waste screen real estate. Just because Microsoft and Apple do it, doesn't make it right. Moreover, do like the Apple or MS sites? Both welcome sites are all splash no substance.

designing & building for the most common specification out there (which 800x600 is no longer)

First, I didn't say "design for 800x600" I said that designing to a resolution is shooting yourself in the foot.

Second, that's like saying that because most people can see we shouldn't care about how screen readers handle our sites either. And because most people have brad-band, we should load all of our pages chalked full of video, images and audio files, which we'll force to pre-load, so that users will download them regardless of if they watch them because most people have broad-band.

Lastly, Google's awesome Ajax applications are still pushing the envelope and they are not dependent on screen resolution. How is MS doing in web search in comparison to Google again? Granted some of them have a minimum width of 800, but if I have a higher resolution the content expands to fit the page. So, that is proof that innovation can occur even on variable width displays. Claiming that trying to accommodate the largest audience possible prevents innovation is just a cop out, saying that you either don't care enough about being accessible and usable or you're too lazy to do anything about it.

By all means, push the envelope on what technology can do, but realize that the more accessible and usable your site is, the visitors you'll get -- or rather the more you'll not drive away.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[BabyJeffy]

...How is MS doing in web search in comparison to Google again?...

Google's primary concern is Web Search.
Microsoft's primary concern is not Web Search.

Comparing the two shows little understanding of the business of either. May I suggest you stick to more relevant examples?

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[jstreich]

Comparing the two shows little understanding of the business of either. May I suggest you stick to more relevant examples?

Primary or not, Microsoft is in the search engine business and the CEO of Microsoft has taken aim at Google.

http://www.smh.com.au/news/technolo...ing-kill-google/2005/09/03/1125302772214.html

http://news.softpedia.com/news/Ballmer-Google-might-dissapear-in-the-next-five-years-1948.shtml

Moreover, I do accept your terms that Google is in the online advertising business, while MS's primary focus is selling Operating Systems. Who do you look at when your trying to see what's working in web. MSN's search or Google's. Then why not follow Google's lead on the issue.

My site has:

#  Resolution   %      Effect of set width design at 1024
1. 1024x768  43.96% - Hunky dory
2. 1280x1024 15.75% - an extra 200 pixels wasted 
3. 1280x800  12.94% - an extra 200 pixels wasted
4. 1440x900   5.74% - an extra 420 pixels wasted
5. 800x600    5.37% - Horizontal Scroll
6. 1680x1050  3.30% - an extra 680 pixels wasted
7. 1152x864   3.05% - an extra 130 pixels wasted
8. 1280x768   1.95% - an extra 240 pixels wasted
9. 1400x1050  1.22% - an extra 400 pixels wasted
...

Assume, for a moment, that everyone in the world did surd with their browsers maximized (if they don't setting the width at 1024 has even more draw backs). First, only 44% has the exact resolution we designed to meet. Then, the 130 extra pixels to 200 extra pixels split between two sides isn't too bad looking, but 400 to 600 extra pixels of room that wasted would annoy most users. Why punish people who buy the latest toys, especially when you don't have to. That's 15% of my visitors that I could see being really annoyed if I pigeon holed my site into 1024x768.

You are free to disagree, but I always thought the idea behind standards, usability and accessibility was to cast the largest net, to get the largest audience, and to sell the most product (content in most cases). The only arguments in this thread against fluid layout was "designing to 800x600 limits innovation," and "Apple and MicroSoft design to 1024x768." To which I say "innovation isn't limited by resolution, and innovation for innovation sake without regard to the user base is fool hearted" and "who cares if MS and Apple did it that way? It still doesn't make it right."

Sorry I'm really hitting this stance hard, but it's exactly like embedding everything in flash -- which most here would agree is a bad idea, I hope. It's been a long day and fixed width designs are a pet hate of mine. Take the points in the post to be just my 2*10^-2 USD and the tone with a grain of salt.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[Sleidia]

Huh? Who cares about the "wasted pixels"?
Do the visitors get a bonus for every extra pixel?
Do the visitors have to pay for their pixels?

Let's take, for example, the site in your signature.
It takes the whole screen width which makes very long lines of text. Tell me about readability!

Plus, sorry to tell you so but, liquid designs usually are ugly designs. Everytime I look at the websites done by "accessibility extremists" I just have to see how wrong they are.