[jtj]

I did a web site for a company recently and all is well, except that now that its been up a couple of months, they gotten some negative feedback about how it loads on mobile devices (mobile functionality was never part of the original intent/job, but a reality in todays world I suppose).

The whole site doesn't have to work flawlessly on a phone/pda, but the big concern is thier home page and company contacts page, since they are a "services" based buisness, no inventory/products to worry about customers viewing..

Making mobile style sheets is a completely new thing to me and I am going from scratch on this one, the site was done with a liquid layout, floating divs but all in css/xhtml (no tables or frames like thier original site was completely designed in! ack!), so I was wondering if any of you who do this sort of stuff in thier sleep can point me to some good tutorials/references? I have already scoured over the w3c specifications, but its not exactly what I need since its mostly just definitions and not directions in laymans terms..

Should I just make a css sheet that lays it all in one div instead of a header, footer, side bar and main containers, and tag it as the mobile style sheet? If this is acceptable (i really dont want to spend a month trying to make it validate) Is there a way to strip images from loading in the page within a div using that same css sheet (i dont want to make a "second" contacts page), also what page max width do you recommend to work best with majority of mobile devices? the entire navigation menu for the site is javascripted for rollover images and I assume stripping this scripting off for mobile friendly-ness will be necessary too.

Google hasnt been much of a friend in this area, unlike css for desktop display, so any direction advice will be greatly appreciated, especially some tutorial stuff to learn from for overall improvement, as I have a feeling this wont be the last time I need to make a site mobile friendly.

 

[charliex]

its really tough to do it for all the devices, there are so many and each of them has their own rendering issues, i'd look at a couple of sites designed specifically for mobile instead.

we just make ours as plain and simple as possible, no css etc.

symbian tends to have one of the better html engines, windows ce is ok, brew not so good, then it just falls out into a massive disarray of failure.

pulled some links off google

Mobile CSS is a Reality - HTML Dog Blog - HTML Dog
A List Apart: Articles: Pocket-Sized Design: Taking Your Website to the Small Screen
CollyLogic: 7 steps to better handheld browsing
Vitamin Features » Make your site mobile friendly

 

[Tracktimeplz]

Could we have a link to said site? Id like to look at the code, just curious

 

[Tracktimeplz]

Oh, and like oldschool pages, people would have an alt link to the same page designed for people without Flash. Maybe that could be an option?

 

[Zippy_Slug]

You might have to go ahead and make a "mobile" friendly site and redirect to that one when a mobile device is detected.. You could probably do some tricks with css as some people do with a "print friendly" type page.. If you google "print friendly css" you should get a starting place..

You'd probably have to re-do your links as well to being plain <a href> tags.. I don't think most mobile devices will run javascript out of the box.

Not sure about widths.. you'd have to test it with a device to see how it comes out.. 320px maybe?

 

[jtj]

thanks for the help... charlie, thanks for those links, those really got me going in the right direction, plus the "a list apart" site is now bookmarked just for all the other good stuff in it..

The goto guy at this company stated that most of the people he talked to are running windows mobile/ce of somesort. He has no idea if any iphone users are having trouble or other platforms. However I implement it will probably be fine with them, I just want to make it as best possible, the big hurdle was already overcome whith the original site design.. the owners brother and sister in law made the site a few years ago on a whim with MS frontpage and insisted thier content and layout style remain unchanged but needed it to load faster and look better/more modern (after they crashed the thing trying to make all kinds of changes). an entire almost 30 page site was done COMPLETELY in tables and all the buttons etc were seperate images done in 600 dpi (no kidding) jpg, I could only imagine how slow that loaded on a dialup, because it was horrible on the fastest dsl I can get in my area!Plus front page made so many duplicates of everything (for no reason I can figure) that the site ended up being about 8 times the size it should have been... For a novice/green person like me It was no fun, I can only imagine some of the messes you guys who do this day in and out have to clean up/replace. I imagine it would have ben easier to do with dreamweaver or something like that, unless they all code like that version of frontpage did (the original index page code printed out onto 9 pages thru notepad, after I cleaned it up it only took 4 to print the code including the css file!! ).... good thing I billed accordingly..


I feel alot better now, knowing that even good/proficient web designers are struggling with this due to all the phones and pdas doing thier own thing, and its not just me behind the curve again! Now if I could just somehow force everyone to upgrade from IE6 to 7 (or do the right thing and get mozilla or opera!) things would really be going good!

 

[john2496]

I feel alot better now, knowing that even good/proficient web designers are struggling with this due to all the phones and pdas doing thier own thing, and its not just me behind the curve again! Now if I could just somehow force everyone to upgrade from IE6 to 7 (or do the right thing and get mozilla or opera!) things would really be going good!

Yea don't worry about it d00d, as web developers we're constantly jumping hurtles or trying to find ways around them xD. For quick fixes, I'll use a bit of php to determine the user's browser, and then load a stylesheet or insert a block of code. Its the lazy mans way of doing it, but when you're on the clock, and your client is on a tight budget, its the only way :S!

its been up a couple of months, they gotten some negative feedback about how it loads on mobile devices

how many users does the site get? I can't imagine a frontpage site getting more than 30 hits a month, so how many peops were complaining?

 

[jtj]

well its not a front page site (if you mean ms front page designed) anymore. they did it that way originally. I took thier site, thier content and basic layout and just hand coded everything myself but got rid of all the tables, frames etc and made it a multi column liquid layout with css. Basically they didnt give me alot of creative freedom with the content and layout, just keep the same look and such, but make it actually work and load before the user goes to sleep. It was unbelievable how much useless and redundant code there was in there, and at least 2 pages of code were removed when I just went thru and deleted all the generated comments that made sure anyone looking knew that ms front page designed that site!

I honestly dont think they get alot of public traffic either but thier employees are always going on there to get phone numbers etc (dont ask me why they cant use thier phone's contacts to store that stuff) and I think the bulk of the complaining is from a couple of people within. I only know a handful of people with real true mobile devices that are made for this, not just a phone, and the best I can see on those is that the mobile devices are shifting the divs on top of each other due to the narrow screen width in order to display it. The site then becomes a 150 pixel wide by 400,000 pixel long display that takes an hour tio scroll down to the bottom. Not great, but still accessible. Im not going to argue though, its paying gig and it will be a good experience because I really do need to start considering this more, as mobile devices arent going away.

Any of you that read a couple of my previous posts on this stuff already know my situation etc, but Im really new to this (web site design and layout) and right now Im just self taught and trying to work into more and more complex stuff. almost everything I have done to this point has been strictly xhtml and css. Im just getting my feet wet with java script and some VERY basic php stuff that you guys could probably do with a BAC of .30 while blindfolded. Its a little frustrating with some of the web tutorials I find becasue alot of those involve very complex coding, languages and other stuff I have no idea about and if I just cut and paste code, I cant fix any bugs, and dont learn anything either, so when it needs changing etc i will just screw it up. Plus, nothing worse than cutting the same code that everyone will see on every other website that has the same cut and paste code/design.. not very original. So thanks for all the help that has been given to me here thru public and PM's...