Go Back   Technibble Forums > Advertising & Marketing > Website Development & SEO

  Technibble Sponsor

Reply
 
Thread Tools Display Modes
  #1  
Old 08-15-2011, 11:04 PM
Xander's Avatar
Xander Xander is online now
 
Join Date: Oct 2008
Location: Niagara region, Ontario
Posts: 6,730
Xander is a jewel in the roughXander is a jewel in the roughXander is a jewel in the roughXander is a jewel in the rough
Question Mobile browser page - help

I'm making up a landing page for when someone scans my QR code. I have an iphone and ipad to test with but they're not showing the page in nice, easy-to-read lettering.

For those that want to see it on their own phone, this is the page.


Most of the code in here I've gleaned from several sites but the end result still isn't pretty.


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1" />>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prompt Care</title>
<style type="text/css" media="screen">

    body {
        border: medium dashed #7979ff;
        background-color: #fff;
        margin: 0 auto;
    }

    body p{
        font: 1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        padding-left: 0px;
    }


    @media only screen and (max-device-width: 480px) {
        ul {
            max-width:480px;
        }
    }
    @media only screen and (max-device-width: 240px) {
        ul {
            max-width:240px;
        }
    }

.large {
    font-size: large;
}
</style>
</head>

<body>
<h1><font color=#116611>Prompt Care</font></h1>
<span class="large">Thanks for scanning! You can ask for 
10% off your first repair*</span><br />

<h2><strong><font color=#116611><u>Niagara's Smallest PC Shop
  with the Biggest Service!</u></font></strong><br />
</h2>
<p>Email: <a href="mailto:Tech@PromptCare.ca">Tech@PromptCare.ca</a></p>
<p>Phone:<strong> (289) 213-2208</strong></p>
<p>Website: <a href="http://www.PromptCare.ca">PromptCare.ca</a></p>
<p>
  <img src="tw-25px.png" width="25" height="25" alt="twitter" /> <a href="http://twitter.com/prompt_care" target="_blank">@Prompt_Care</a><br />
  <img src="fb-25px.png" width="25" height="25" alt="facebook" /> <a href="http://facebook.com/promptcare" target="_blank">Like us on Facebook!</a><br />
  <img src="vcard.png" width="25" height="25" alt="vcard" /> Download VCard
</p>
<h3>Serving the Niagara region 
  since <br />
2001. On-site, in-shop, or via the <br />
web -- Prompt Care will get the <br />
job done.</h3>

<p>* Labour only. Valid for one computer per housecall. </p>
</body>
</html>
Suggestions on formatting, etc. are also welcome.

Edit: I'd like to keep any CSS within the page, for simplicity.

Last edited by Xander; 08-15-2011 at 11:07 PM.
Reply With Quote
  #2  
Old 08-15-2011, 11:12 PM
Vicenarian's Avatar
Vicenarian Vicenarian is offline
 
Join Date: Jan 2010
Posts: 1,936
Vicenarian has a spectacular aura aboutVicenarian has a spectacular aura about
Default

Just a random suggestion, I did this exact thing last month (QR code leading to a coupon page), and I made my coupon into a jpeg using Paint.NET (free). Then, I embedded that jpeg coupon into a webpage. Really easy, and easier for people to print as well. Just a thought.


Edit: Also, a PDF export of the coupon might be another idea?

Regarding formatting/HTML/CSS, it's all latin to me hahaha.
__________________
2 Corinthians 5:21 "For God made Christ, who never sinned, to be the offering for our sin (by dying in our place), so that we could be made right with God through Christ."
Reply With Quote
  #3  
Old 08-15-2011, 11:25 PM
Xander's Avatar
Xander Xander is online now
 
Join Date: Oct 2008
Location: Niagara region, Ontario
Posts: 6,730
Xander is a jewel in the roughXander is a jewel in the roughXander is a jewel in the roughXander is a jewel in the rough
Default

Not a bad idea; might be a good fall-back plan. Thanks.

I'd like to see if I can get this working, though. I'd learn a little more about CSS/etc and it should be versatile enough to show on the ipad, too.
Reply With Quote
  #4  
Old 08-16-2011, 12:24 AM
SmithFamilyDesigns's Avatar
SmithFamilyDesigns SmithFamilyDesigns is offline
 
Join Date: Apr 2011
Location: Phoenix
Posts: 289
SmithFamilyDesigns is an unknown quantity at this point
Default

From what I see, you're only specifying that a "ul" element should be 480px or 240px, but your content isn't wrapped in a ul. Perhaps try changing the CSS to

Code:
<style type="text/css" media="screen">

    body {
        border: medium dashed #7979ff;
        background-color: #fff;
        margin: 0 auto;
    }

    body p{
        font: 1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        padding-left: 0px;
    }


    @media only screen and (max-device-width: 480px) {
        body {
            max-width:480px;
        }
    }
    @media only screen and (max-device-width: 240px) {
        body {
            max-width:240px;
        }
    }

.large {
	font-size: large;
}
</style>
__________________
"Never argue with a fool; onlookers may not be able to tell the difference."

http://www.SmithFamilyDesigns.com
Reply With Quote
  #5  
Old 08-16-2011, 05:59 AM
Xander's Avatar
Xander Xander is online now
 
Join Date: Oct 2008
Location: Niagara region, Ontario
Posts: 6,730
Xander is a jewel in the roughXander is a jewel in the roughXander is a jewel in the roughXander is a jewel in the rough
Default

The <ul> was a leftover from the page I'd gleaned it from where a fellow was trying to get his ToDo list to show up right. Changing that does format it better on the iphone, at least in terms of width of the frame... however, it centers it on a wider page so it starts off showing just the left half of it.

It does show up just fine on the iPad but that was less of a concern.

/added some colour to it. Prettied up the info with a table
Reply With Quote
  #6  
Old 08-16-2011, 12:46 PM
sassenach sassenach is offline
 
Join Date: Jul 2011
Location: Inverclyde, Scotland
Posts: 207
sassenach is an unknown quantity at this point
Default

What is the "@media only screen and" meant to be? Have a look at this page from w3schools for the recommended syntax. http://www.w3schools.com/css/css_mediatypes.asp
Reply With Quote
  #7  
Old 08-16-2011, 05:00 PM
Xander's Avatar
Xander Xander is online now
 
Join Date: Oct 2008
Location: Niagara region, Ontario
Posts: 6,730
Xander is a jewel in the roughXander is a jewel in the roughXander is a jewel in the roughXander is a jewel in the rough
Default

From what I've gathered, the "and" is Boolean to make sure that both conditions are met. The use of a comma would be an "or".

@media screen,print <-- screen OR print
@media screen and (min-width: 800px) and (max-width: 1200px) { <--screen AND specific dimensions

(The greyed out section, I can find 74K results on that exact phrase so I'm giving it credit that it's legit)

I found some info here; much of which is over my head, web-wise.


Actually, I changed 'screen' to 'handheld' and that helped some. Fits it to the width of the screen and looks adequate in landscape but I'm aiming for portrait viewing.

Google found me http://www.iphonetester.com/ which displays the page pretty much like I want but that is definitely not what's coming up on my iphone.
Reply With Quote
  #8  
Old 08-16-2011, 07:37 PM
Elemdee's Avatar
Elemdee Elemdee is offline
 
Join Date: Mar 2010
Posts: 773
Elemdee is on a distinguished road
Default

Are you trying to set it up as a landscape view or vertical or both? Using my android phone I scanned the QR code and the information completely fills in the screen as I think its supposed to when held in landscape view. When I turn it vertical it fills in the top 40% portion of the screen only, leaving the rest below the dotted line blank. Can't take screenshots for you because my phone isn't rooted and I've not really got the time today to do it the long way. =/
Reply With Quote
  #9  
Old 08-16-2011, 08:58 PM
Xander's Avatar
Xander Xander is online now
 
Join Date: Oct 2008
Location: Niagara region, Ontario
Posts: 6,730
Xander is a jewel in the roughXander is a jewel in the roughXander is a jewel in the roughXander is a jewel in the rough
Default

I figure most people would be holding their phone upright (portrait), I'm preferring it look 'perfect' that way but, of course, not look like total crap when in landscape.
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:46 PM.


Powered by vBulletin®
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Technibble.com is based out of MELBOURNE, AUSTRALIA.