CSE HTML Validator

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

Yes, I guess you are...

Your other site uses <table>s for layout. That doesn't translate well to a mobile site which needs to be "responsive". You'll need to have div containers set to be position:relative and float:left to have things flow when page width changes. To keep the same look you'll want a fluid/responsive one column + header and footer template, then start moving your content over and play with the width. You can set a max width of a certain size and a min width of 320px or so. Get the layout to work, then start styling it. You could easily use the same for desktop and mobile.

Even easier would be to download this layout (play with the demo) and do a redesign of your site, moving trivial items to the sidebar, which flows under with narrow widths. My layout is similar in that my sidebar undergoes a width change before it drops to the bottom.

The one thing that CSE doesn't help me with is the Artistic Director. Now if I could make "that" standard compliant...

I have built 2 show-and-tell designs that were "not quite" acceptable. In the mean time I've taken the inherited WYSIWYG tool output, making it maintainable, adding capability. You know how that goes, the right-brained "client" wants an online donation capability, when we don't accept cards. The next year it was online reservations. Someday I will get rid of those tables ~ without changing the look which is good enough. It is getting easier now that the site works on the 5 current browsers. yada, yada, yada we all have our issues.

As for mobile, the users I'm interested in are the tourists walking down the street in town. Silverton, San Juan County, is the only county in Colorado that does not have fiber. During peak tourist season when all the stores are ringing up charges, the internet slows to a crawl. Seems all phone and internet leaves the county on a single Microwave link. So I am thinking I should keep the bandwidth down so people don't just put the phone back in their pocket, 4G we ain't got. Really want to get that reservation package on the mobile, linked from posters with a QR of course. On the brighter side, I am starting from scratch and I already have the content.

The content for a website is often the hardest part. You have that done, but just have to figure out where to put things.

A mobile site can easily range from 800/1024px (tablet) to 320px wide (iPhone, cheap phones) so it's easy to eventually use that for your new desktop site as well, when it matures. BTW, nothing worse than being on a mobile site with a tablet and fast connection and not having the option of the full desktop experience.

RE tableless and keeping track of all those td/tr with nested elements: You won't miss that a bit. Just keep your page structured with your indents so you can match up the divs and you'll be good.

RE accepting CC's: That's what we do for a business (provide ach/cc services) and it requires the highest security. Kind of a pain for me with all the security scans/audits. Let me know if you want to revisit that.

With no 4G and a graphics-heavy site, you should see if Smush.it/ySlow/PageSpeed can improve your page load speeds. More here.

RSteinwand wrote:BTW, nothing worse than being on a mobile site with a tablet and fast connection and not having the option of the full desktop experience.

Which is why the two are cross linked.

RSteinwand wrote:RE accepting CC's: requires the highest security.

So true and why I chose using PayPal for our CC interface. In addition to the security issues it is also the most cost effective banking approach given our volume.

I use PayPal's Payment Data Transfer, PDT, return to build an itemized donation thank-you screen and if they have opt-in to our mailing list, build the cookies for the double-opt-in process, etc.

Using the fuller PP Instant Payment Notification, IPN interface, I send an itemized thank-you email and maybe an email with a link to finish the double opt-in to the email-list. The IPN listener script also updates our Donor db and creates a CSV file to import the transaction into the accounting package.

The link in the opt-in email with the cookies left in donor's browser are used by a different script to update the emailing list.

I just dropped an image sprite from my mobile style sheet and substituted css3 gradients.

Mobile support for linear gradients is pretty good: http://caniuse.com/css-gradients

I simply took each section from my sprite (composed of all my horizontal gradients) and uploaded it to here: http://www.colorzilla.com/gradient-editor/ and copied the css into my style sheet. I used a default color to fall back on, followed by the gradient, like this:

Code: Select all

background:#fafafa;background:linear-gradient(to bottom,#ffffff 0%,#ffffff 42%,#bebebe 47%,#e9e9e9 100%)

I ignored all the -moz, -webkit, etc versions since these are often small screens. If an old, small device doesn't support gradients, I'm not going to sweat it.

Obviously, if you're using separate images, then all you need to do is just upload them, one at a time.

UPDATE: I dropped 3 sprite images (8k total) from my mobile style sheet. Pagespeed insights gives me a score of 99 now.

If it wasn't for IE, I'd do this for my desktop style sheet too....

I just blogged about my "Mobile site" experience: http://www.intercepteft.com/blog/blog.html

RSteinwand wrote:I just blogged about my "Mobile site" experience: http://www.intercepteft.com/blog/blog.html

Thanks Rick. It sounds like great starter info. I need to take a deeper look into this myself and see what I can do to make CSE HTML Validator more helpful for mobile developers.