CSE HTML Validator

Hi Albert,

Is there currently any support specific to mobile devices?

Hi Rick,

No, there's not much support for anything specific to mobile, but this is an area where I'm definitely open to suggestions.

What did you have in mind? How can CSE HTML Validator be improved to help you with your mobile development?

I just finished an update on our public side. I use JavaScript to detect the browser string (looking for common devices, android, apple, etc) along with screen.width and serve a mobile (responsive) style sheet or a responsive desktop style that is set to fixed width (4 lines of css) for now. For mobile use I limit the eye candy and graphics and the graphics I do use are different. For example, I have a rotating banner on certain pages consisting of 10 images that I don't use for mobile. I also use lots of sprite images and optimized images.

Here's some links I found useful for my redesign. Maybe you can find some tips and pointers there:

http://www.quirksmode.org/blog/archives ... g_the.html
http://csswizardry.com/2010/01/iphone-c ... -websites/
http://website-engineering.blogspot.com ... -when.html
http://blog.karlribas.com/2012/05/how-t ... -your.html

Opera's mobile emulator helps a lot, but it's Android: http://www.opera.com/developer/tools/mobile/

I used a Mac Mini with the iOS Simulator (part of xcode) to test iPhone, iPad, etc.

Thanks Rick. I've made a note of the URLs to add new tips, checking, and suggestions to the next major version which I plan to begin working on next month.

Right now I'm putting the 'final touches' on the last release of v12. If there is anything specific you want, then please let me know. If I can add it easily then I'll try to get it into the final v12 release, but for now I'm going to use those links you provided for the next major release.

The only thing I can think of right now would be support for the viewport meta tag.

Sorry, I forgot the link which will help with this: http://blog.javierusobiaga.com/stop-usi ... ou-know-ho

You could throw some warnings, especially if you see the "combo breaker".

Thanks. I've added some warnings for maximum-scale=1 and user-scalable=no in v12.0102... and may add some more for the next major release.

Cool!

Thanks.

You're welcome! I've just updated the ZIP file with the new config if you want to update (again).

http://www.htmlvalidator.com/htmlvalV120cfg.zip

Not allowing a user to zoom with maximum-scale=1 is generally a bad idea and creates a potential accessibility problem. For example, a user may not be able to zoom in order to see small text or to see details in a photo, image, or graph. Also, users expect to be able to zoom.

Nice start.

Just found this... Make phone numbers click to call. http://www.w3.org/TR/2010/REC-mwabp-201 ... ri-schemes

RSteinwand wrote:Just found this... Make phone numbers click to call. http://www.w3.org/TR/2010/REC-mwabp-201 ... ri-schemes

Thanks. Do you have any specific suggestions on what you'd like to see CSE HTML Validator check for?

I'm not sure how in depth you want to go....

Just a guess:
Absence of the link.
Lack of using the +1 (international dialing).
Invalid characters following "tel:".

RSteinwand wrote:I'm not sure how in depth you want to go....

Just a guess:
Absence of the link.
Lack of using the +1 (international dialing).
Invalid characters following "tel:".

I should be able to implement #2 and #3. Are you suggesting in #1 that it try to detect phone numbers in text so it could suggest linking it with the "tel" protocol? That's an interesting idea but could be prone to a number of issues... but I will think about it for the next major release.

I may add a new "Mobile" options page in the Validator Engine Options to go along with the improved mobility checks planned for the next major release. It would probably be a good idea to do so as it's so important these days.

Albert,

Just want to add my voice to Rick's for support of mobile syntactic. I'm just getting a stumbling start so any suggestions in the mobile area, similar to those for SEO or accessibility would be good in addition to standards.

Maybe because I'm cheap or old, I don't fully grasp how mobile capability is used "in the wild."
How it looks in the Android SDK emulators or an old Blackberry simulator is about where I am. I do wish apple had something for iphone development that didn't require their hardware to run.

Rick thinks for your references. I am using the following book:

Programming the Mobile Web, Maximiliano Firtman, O'Reilly, 2010 - - this has the most post-its. Remembering I started at zero.
Mobile Design and Development, Brian Fling, O'Reilly, 2009 -- Kind of a "In the beginning there was dark on the water, and then god..." book.
Designing Mobile Interfaces, Steven Hoober & Eric Berkman, O'Reilly, 2012 -- a nice book haven't found much use yet.

Learning Android, Marko Gargenta, O'Reilly, 2011 -- Find print "Building Applications for the Android Market"
Programming Android, Medneks, Dornin, Meike & Nakamura, O'Reilly, 2011 -- "Java Programming for the New generation of Mobile Devices"

Given the market the last two books sounded right but are to focused for what I need at this point (or ever). "Designing Mobile Interfaces", may come next after I get some basic information available online for this summer season.

As I say I'm kind of at the beginning. http://m.atheatregroup.org

Hi Lou,

You're cheap? I used Google rather than the book route.

I'm no mobile expert, so had to stumble thru it myself. My website link is in my profile. You might want to view source and view it thru a mobile emulator like Opera's and check portrait and landscape with a phone or smaller tablet.

There are emulators for Apple devices, but they don't work as well as a real device. Several times I had what looked good in DEV only to have issues with a real device (my Android phone or a coworkers iPhone).

Unless you're creating a purely mobile website (which I wouldn't recommend), you'll want to consider converting your entire site to a "responsive" style, one that the content flows when you change the width, then you can have a mobile and desktop style sheet. Then I was able to tweak my style by changing the browser width, watching how things flowed, maybe changing the width of things at certain common widths, watching especially at 320 & 480px where the Apple and many Android devices reside. I even had to start with a new 3 column template to figure out how to have one column drop below the content on small screens. I later re-added 4 lines of css to make my desktop style a fixed width again. (I'll revisit that later when I get bored.)

For mobile you might want to use a background color instead of an image to make the page lighter. I just got done optimizing everything so everything that can be sprited or combined was already done so doing a mobile refresh seemed like the way to go.

For Apple devices, this is important... it was my first major bug on the mobile style: http://website-engineering.blogspot.com ... -when.html