...

View Full Version : Mobile phone websites



alan82
06-05-2012, 10:31 PM
I am interested in putting together a web site that suits the size of most mobile phones. I wondered if anyone could point me to any tutorials to get me started.

I have been building my own (normal sized) sites for some time, coding them with html and external style sheets.

I am guessing that you start of with a narrow width and take it form there. However there might be a bunch of stuff I don't know about.

I also reckon I would need a meta tag to direct mobile phones to the mobile version of the site but ad an option to redirect back to the main site if the searcher wishes to. (giving them the option)

any help appreciated.

thanks

VIPStephan
06-06-2012, 12:07 AM
The latest approach to this is called “responsive web design (http://en.wikipedia.org/wiki/Responsive_Web_Design)”. Using this key phrase in a search engine of your choice will bring you many examples and tutorials.

alan82
06-06-2012, 09:56 PM
Ok will have a look

waxdoc
06-07-2012, 02:20 AM
See Major Payne's list at http://www.webdeveloper.com/forum/showthread.php?t=258054

I started off using "responsive" percentage % widths with min-width and max-width, which looked OK in Mobile Device Simulator. But on real-world cell phone the download time was too long for multiple-image sites. Thus, resorted to mobile-device version using animated GIF and inserted a switcher JavaScript from CSS Tricks


<meta name="viewport" content="width=device-width, user-scalable=yes">

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "indexmobile.html";
}
//-->
</script>

Used at http://www.josephdenaro.com/ to switch to http://www.josephdenaro.com/indexmobile.html and
at http://www.jacquimorgan.com to switch to
http://www.jacquimorgan.com/indexmobile.html

alan82
06-11-2012, 02:37 PM
<meta name="viewport" content="width=device-width, user-scalable=yes">

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "indexmobile.html";
}
//-->
</script>

Yep it works well. I was thinking if there was a way to give a mobile visitor a further option to go to the main website if for any reason they want to.

So at the top of the mobile page. I could put "click here to go to main website".
The only way I can think of this working is if I direct them to a "index2.html" page that doesn't contain the code above.

If anyone knows of a neater way of doing it with some code.....much appreciated.

I don't really want to go down the RWD route just now as my main aim is to get a very quick download time with the information the visitor is looking for.

waxdoc
06-11-2012, 10:23 PM
Somewhere else, there was a post about using cookies etc. But that seemed to complicated for me,

So, I too, would just create separate main page without JavaScript switching to small screen. I did include <noscript>and general link</noscript> to indexmobile.html version (mainly for myself to check it).

A lot depends upon your main content. The sites I'm dealing with do not have complicated content so I just linked the indexmobile.html's navigation to various categories together.

It's all still evolving so better solutions may turn up,



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum