How to make a link appear as a normal link in one screen size, as a button in another?

Question 1

Annoyingnewbie’s Question:

I’m programming a website with three different sizes for desktop, netbook and mobile phone systems.

On the main page I have a click-thru html link of the

<a href="more.html">Find out more</a>

variety.

What I want is to change this to a button for mobile screens, like a conditional statement or something.

Any ideas?

Thanks

Answer

Starx

Use media queries. They can help you target type of screen and based on its width. For example

@media only screen and (min-device-width: 300px) and (max-device-width: 480px) {

    /* Now you can write a different style of elements on a screen with maximum 300px as width */

   a {
      color: #f00; /* Make link appear red on mobile screen */

      /* make it should like a button */
      border: 1px #c00 solid;
      background: #ddd; 
   }
}

Note: Media Queries are CSS3 features, and will not work in earlier version of IE.

Question 2

Question by MEM

MEM

On this website:

.php
.jquery
.yii based

We need to have two or more different infographic pictures, depending on the viewport width.

The client is picky about w3c validation
picturefill solution doesn’t validate
different images and not only different image version, should be served
for a lot of reasons background images are not a solution*
IE8 and up support

I can use either a server or client side version, no problem.

Reasons:

Background image technique does work, but those infographics are NOT background.
They should arrive server side.
Obviously, they need to adapt. (and background size… well…)
Even worst, we do have responsive tooltips image maps associated with those infographics.

Answer

Answer by Starx

Starx

If media queries is not what you want then use response.js, if done properly you can load <img>s too. Here is a example:

<-- Load lo-fi.png  when viewport is 0–480px wide or no-js. 
    Load medium.png when viewport is 481–1024px wide. 
    Load hi-fi.png  when viewport is 1025px+ wide. --> 

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />

Question 3

Question by Soumya Mohanan

Soumya Mohanan

I am using codeigniter framework for my site and I have done two site one for accessing through mobile and another for accessing through pcs. both are in same domain . My site url is like this http://mydomain.comAnd my mobile is http://mydomain.com/celphone. I need to write htaccess rule which redirect to site url http://mydomain.com/celphone when i am accessing site from mobile and i need to rewrite to http://mydomain.com/ when i am accessing the site from pc.

How can i write rewrite rule in such case ,please help any help will be appreciated.

Answer

Answer by Starx

Starx

~~As scessor, said, it cannot be done with .htaccess.~~ You need to analyse the browser’s user agent for this.

Check out this mobile detection in php.

Usage is as easy as this

if ($detect->isMobile()) {
    header("location: mobile.yourdomain.com");
    exit;
}

Question 4

Question by user1483487

user1483487

I am developing a mobile site and trying to use very simple markups.

Below is my code which is giving me problem :

<div class="abc">
  <div>&nbsp;</div>
  <table>

  </table>
</div>

CSS

.abc {height:some-dynamic-value-in-px}

.abc div {height:5%;}
.abc table {height:95%;}

Problem is this code worked on all the latest phones.But when I checked on sony ericson (500i)
the table height was coming out of the parent div abc and the UI was distorted.
I checked this site http://www.apptools.com/examples/tableheight.php
and gave height {100%} to body but still no success.
Please let me know where I am going wrong.

Also, when I gave the height in px it worked for all handsets.But I want to know the reason why percentage was not working.

Thanks.

Answer

Answer by Starx

Starx

If you already know the height of the div, then its better to use fixed dimensions in px.

Try to avoid the complexity, if its not necessary.

And for some browsers, giving body { height: 100%; } might not be enough.

html, body { height: 100%; }

.abc { height:100%; }
.abc div { height:5%; }
.abc table { height:95%; }

Also, dont forget to include the DOCTYPE on your webpage.

Question 5

Question by Jorge Ortega

Jorge Ortega

It might use a cronjob in PHP. What I need is to display something at the same time, at a specific hour, in all devices that are accessing a determined url at that time (i.e. 12:00:00).

Answer

Answer by Starx

Starx

You might have to use SERVER TIME for this, since client time cannot be trusted. So, send a POST request to page, regularly to check for the time and get the output if the time is correct and then show.

Example:

JS:

setInterval(checkRegular, 60000);
function checkRegular() {
    $.post('check.php', function(data) {
         if(data.length) {
              //show the message
         }
    }
}

PHP:

<?php 
if($time==$requiredTime) {
   echo "the message";
}
?>

Question 6

Question by pcharb

pcharb

Can I use jQuery mobile library with HTML 4.01 transitional or do I have to use HTML5 to use it?

Answer

Answer by Starx

Starx

Yes, you can use both with jQuery Mobile. Just choose the one appropriate on your case.

For that you might need to know some of the differences among mobile technology regarding web and versions of different html.

I suggest reading these articles.

Question 7

Question by Simon Scarfe

Simon Scarfe

I’m looking to optimise the mobile browser experience in a small webapp, using the awesome jQuery mobile to do so.

It goes without saying that a user doesn’t want to DL 200k of data, I’m just trying to draw the line between using external and internal URLs. Is there any existing guideline of what sort of page sizes / loading times I should be shooting for? I’d prefer to stick to internal URLs (keep the mobile interface effectively in one place from a maintenance point of view), but am weary of bogging the user down with lots of information that they have no intention of viewing.

Answer

Answer by galambalazs

galambalazs

One thing to note is that e.g. iPhone won’t cache components bigger than 25K.

Also consider minifing and gzipping your code. And @jfar got one thing right. HTTP requests can be a huge performance hit, so you may also want to reduce them as much as possible.

Answer

Answer by Starx

Starx

I would say try to lower your page as much to 100kb, because if u manage to do so loading different pages as per user request might be negligible.

However, loading the big pile of content at a time and using simple javascript show and hide, to display the content in almost realtime manner might impress the viewer too.

Tag: mobile

How to make a link appear as a normal link in one screen size, as a button in another?

Annoyingnewbie’s Question:

How to deliver different Responsive Images?

Question by MEM

Answer by Starx

Rewrite rule in htaccess for mobile version

Question by Soumya Mohanan

Answer by Starx

table height in percentage not working

Question by user1483487

Answer by Starx

How to synchronize all mobile devices accesing a web page?

Question by Jorge Ortega

Answer by Starx

Can I use jquery Mobile with HTML 4.01?

Question by pcharb

Answer by Starx

What sort of page weight / size should I be aiming for when optimising for mobile?

Question by Simon Scarfe

Answer by galambalazs

Answer by Starx

Please fill the form - I will response as fast as I can!