Website and photo outsourcing solutions

Frm what I understand, @import is the browsers preferred command which is why I try to implement it as much as possible in my pages. Upon further research, I found this: 'www.css-discuss.incutio.com' Topic: Handheld Stylesheets

Seems what I have said previous about style sheets in a SiteExperts post is now a bunch of malarkie... This will serve as a copy of the post sent to the SE Team of Experts since I will write no white PINK paper "before it's time."

Here is the question/discussion (notes to the solution) re:

[My quest for the appropraite PDA/MOBILE content]

I recently acquired a mobile phone / PDA solution. I have been thinking about coding to include the mobile crowd (for a while now actually) and well - I spose now is just as fine a time as any! Upon my humble beginning, I delved into...OMG - yes, CSS fir the solution. BAH! HUMBUG!

The text below was a very valid (and quite possibly the most relevant for these purposes) post to this VERY COOL MOBILE TEST PAGE from this article. Altho' this MOBILE TEST PAGE, which is from another post on that page (same link)) is also a great addition for this (our) topic here :)!

Patrick, really great test you have there and I think you have found a gold nugget there, despite the poor support by a number of people. You need to build another article around it and see if you can use it to build a universal mobile device system (like I have) that seems to deliver a good xhtml mobile style layout that works on the majority of agents, despite the crazy support we are all experiencing. I will tell you how.... I hate browser sniffing and all forms of scripted tricks to figure out which versions of a web page and style sheets a given mobile device supports. Yet, we obviously have all these people with various states of agents and style support, even if it is pretty bad. However, your style tests proved, as occured on my mobile phone, that as long as you include, in your web page, BOTH handheld style sheet "link types" (link with media="handheld" and @import url (...) handheld;) with urls to a very robust mobile style sheet that includes cascading rules covering every aspect of your screen-based sheets, you can design a pretty powerful mobile sheet strategy that works for all the people listed above, except ONE TYPE....and thats those that only support screen media and NO handheld version of your test (ie. some pocket PC people). Thats a troublesome group as they cant get to your handheld sheets which reformat your content for all the other agents. As is the case with that group, those devices seem to be designed around support of the full desktop browser version anyway! I proved this scenario after I discovered your test this summer, and though my phone supported all the screen versions BUT also one handheld version, it was all I needed to create a decent mobile solution using XHTML and CSS in which that handheld sheet was used to cascade over my screen sheets, and deliver a great version to my tiny phone browser, while retaining the fully layout for desktop users. In other words, by first designing your main web site in compliant XHTML and CSS, then adding in the two handheld url links to the same mobile sheet, and then designing that mobile sheet carefully so that it hides and reveals (cascades over) all the things needed for most mobile screens and devices, you stand a decent change of designing something that works well on a number of agents. Those agents that support ANY version of the handheld media test can get something redesigned, as can those that support no style sheets of any type. Because MANY devices seem to support one of the handheld sheet rules, and MOST are supporting or moving to support XHTML (basic) despite the movements worldwide, doing the above, a talented CSS developer could build a pretty good universal mobile test site and sheet system, that works pretty good in a number of devices, not to mention still delivers the screen sheets that look great on desktop browsers. Even if the device has NO style support at all, they still get fairly good linear content listing using clean xhtml markup without any sheets. Thats been my experience. So I say, your 8 point test proves there is a hope! Again, for those of you not supporting any handheld sheet, if the designer has designed their markup and menus correctly using the new xhtml standards, such as unordered link lists, and content is contained simple divs in xhtml rather than tables, and added mobile headers are used with display:none applied, when the non-styling agent reads that, its pretty accessible content when it gets to this broad range of devices. Again, its the people that only support "screen" that may be a problem, but it seems most of those stand behind some of the larger pocket pc devices. -Mitchell

Although quite old, I also found this article very useful.

Now after all that somewhat useless banter (don't get me wrong, I'm sure it can be done in CSS... painstakingly) I have decided that maybe javascript is the answer since my wonderful browser in my phone seems to support that - which also worries me terribly - but none of that for now. I have now figured my answer lies with a simple script that detects the screen size and if under 600x800 (or whatever) the script will redirect to the pda site... brilliant! I hope I can come up with something in this new google search...

<span>time</span>

Here is a very appropriate script which I modified:

// AUTHOR: ROBIN-ANN.COM
// URL: WWW.ROBIN-ANN.COM
// CO-AUTHOR: Google
// CO-AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( cgiscript.net/scripts )

if (screen.width <= 600) {document.location = "pda/";}
if (screen.width > 600) {self.document.location;}

Look at my dev RA page on your computer... then if you have a handheld device - check there.

I think I have solved my conundrum. Anyone care to comment? Please go to SiteExperts.com until I can figure out how to add comments to these pages!

Labels: communities, CSS, google, html, javascript, mobile, technology, web, Web Development, white-paper