Support for mobile?

For technical support for all editions of CSS HTML Validator. Includes bug reports.
User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for mobile?

Post by RSteinwand » Thu Apr 11, 2013 9:06 pm

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

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.
Rick

User avatar
Lou
Rank V - Professional
Rank V - Professional
Posts: 276
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: Support for mobile?

Post by Lou » Fri Apr 12, 2013 11:10 pm

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.
Lou
Say what you will about Sisyphus. He always has work.

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for mobile?

Post by RSteinwand » Sat Apr 13, 2013 9:56 am

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.
Rick

User avatar
Lou
Rank V - Professional
Rank V - Professional
Posts: 276
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: Support for mobile?

Post by Lou » Sat Apr 13, 2013 12:41 pm

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.
Lou
Say what you will about Sisyphus. He always has work.

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for mobile?

Post by RSteinwand » Tue Apr 30, 2013 9:10 am

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. :D

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....
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for mobile?

Post by RSteinwand » Sun May 05, 2013 8:53 am

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

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for mobile?

Post by Albert Wiersch » Thu May 09, 2013 3:51 pm

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.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for mobile?

Post by RSteinwand » Fri May 17, 2013 1:28 pm

Having acquired a Surface RT for web development, I'm seeing some issues that are unique to Microsoft. :?

The viewport meta tag works great until you have a Microsoft device, then you need to use @-ms-viewport in your CSS, like this:

Code: Select all

@media screen and (max-width:880px){@-ms-viewport{width:device-width}}
To complicate things more, if you have zoom set to anything higher than 100% in Internet Options, it'll force you to scroll left-right.

The problem with CSE is it doesn't recognize either @-ms-viewport or @viewport and these errors appear under "Styles".
The "@-ms-viewport{" rule is not a recognized at-rule. Is it misspelled? This at-rule will be ignored.

The "@viewport{" rule is not a recognized at-rule. Is it misspelled? This at-rule will be ignored.
More on @ viewport here: http://www.w3.org/TR/css-device-adapt/# ... wport-rule

... and the MS version here: http://msdn.microsoft.com/en-gb/library ... 85%29.aspx

You have to be careful using @-ms-viewport since the desktop version of IE 10 also respects it. :mrgreen:
Last edited by RSteinwand on Fri May 17, 2013 1:59 pm, edited 1 time in total.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for mobile?

Post by Albert Wiersch » Fri May 17, 2013 1:51 pm

Thanks Rick. I'll see if I can get this into the next v12 update. I wasn't planning on releasing more v12 updates but there are a few issues I'd like to address in another (and hopefully final) v12 update.
Image
Albert Wiersch

Post Reply