desktop & tablet website programming...

User 106872 Photo


Registered User
92 posts

I was wondering how to program a website to accommodate folks browsing on different tablets. Does HTML5 &CSS3 allow for detecting which tablet browser is viewing?
This brings me also to a suggestion for CC. This might be a good time for a cc program to read and assign current HTML code or VSD (which is HTML afterwords) into whatever browser is calling.
Now I don't know if just a snippet of code is needed or a big rewrite but CC could lead the way in this before Adobe becomes the elephant in the room
I did a goggle search but either did not put the correct search in or there is very little info out there.
I'm hoping to start a discussion that might evolve into some interesting ideas.
Wyndham
User 184085 Photo


Ambassador
1,707 posts

Website Access Manager does exactly that (and more) :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 106872 Photo


Registered User
92 posts

Thanks David. I read the info but how does WAM change my 800x600 desktop to an IPAD Mobil Safari or a Androin Zoom screen that is smaller and can have different orientations.
Sorry if I'm slow on the uptake here. Wyndham
User 38401 Photo


Senior Advisor
10,951 posts

Hiya Wyndham,

I'm pretty sure what David is getting at is that the Website Access Manager program has redirect systems that you can use to setup redirects when detected from different sources. In other words, instead of the HTML Editor or VSD doing it (which would be cumbersome at most to add all that in there), it's already built into the WAM program. This allows you to setup specific redirects to specific mobile pages or whatever you are wanting to do according to rules that WAM writes for each page or folder etc. Pretty slick little program with all the little things it does.

Give it a whirl with the Trial version and see if it does what you need for the redirects for mobile pages.

This does of course mean that what you do is create separate pages for your site for those redirects to go to, it doesn't make the pages for you, it redirects your visitors to the correct pages according to what source they are coming from (PC, Phone, iPad, etc.).

Hope that helps. :)
User 184085 Photo


Ambassador
1,707 posts

the WAM helps you set up your website to "detect" mobile browsers and then direct them to a website you created specially for mobile browsers, you design a website that has both regular and mobile versions.

So essentially you create 2 websites and WAM helps you set up the traffic cop to direct the traffic to which site the user needs. Regarding orientation, I believe that is handled by the device it's self but can be helped by you using percentage sizing of your website design, rather than exact measurements.

So your main site is 800X600 and all sizes within that are percentages.

My plan to attack this (I'm working on this now) is to create the site with no CSS on the pages, just raw HTML and then have different CSS pages load depend on the device to reformat the site to the device needs.

If my plan works then the long term management of the site will be simpler, (albeit the initial codeing more labor intensive).

Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 106872 Photo


Registered User
92 posts

That sounds like a good idea. One blog I read said to develop the CSS so as to reorient into one column for narrow vertical scrolling by touch. There maybe a CSS3 for touch or it may be java., I'm just getting started in this area.

Wyndham
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

david wilson wrote:

My plan to attack this (I'm working on this now) is to create the site with no CSS on the pages, just raw HTML and then have different CSS pages load depend on the device to reformat the site to the device needs.
If my plan works then the long term management of the site will be simpler, (albeit the initial codeing more labor intensive).


David, I'd be very interested in the result of this. Do keep us posted!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 104702 Photo


Registered User
293 posts

Some time ago I made a website for a Dutch singer/songwriter ( http://www.harryniehof.com ) that detects what system you use (a PC, a tablet, a smartphone, an Apple Ipad or Iphone) and after detecting it, switches to the appropriate website, which means:

- a 'normal' fixed-width design for a PC or a Linux system with Flash support (made with the Visual Site Designer), this is the main website
- a 'fluid' or 'liquid' design for Android tablets and Smartphones and other Smartphones (Nokia, Windows Mobile) and tablets with Flash support (made with the HTML Editor), it switches to http://www.harryniehof.com/mobile
- a 'fluid' or 'liquid' design for the Iphone and Ipad without Flash (made with the HTML Editor), it switches to http://www.harryniehof.com/apple

To detect this I use freeware Javascript code that you can get here:

http://kramerican.dk/detectmyphone/

After registration, you can setup this script to switch to a subset of your website filling in some details. The javascript code of course goes into the header of the main page.

It works like a charm....

The 'mobile' and 'apple' subsets are fluid (or liquid) as I said, which means that the content of the site adapts automatically to the given browser space. I use CSS for this. You could try this out by loading one of the subsets using a 'normal' PC and then make the browser space smaller by dragging the right or left border. In this way any modern tablet or smartphone is supported whatever screen resolution. The Fluid design CSS code I use is freeware, but you could of course use one of the Fluid templates of the HTML Editor too.

I did use a normal fixed with design for the main site because it gives me better layout possibilities.

I hope I gave you some useful information!

Have fun, John
John van Hulst

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.