Using a different template for mobile version of site

PHP
61

I don’t think you even need any width set, leave it at auto.
Max-width on main containers is only really needed for the big screen view, to stop it going super wide on big monitors. On small screens, you need to use all the space you have, so keep main containers full width.

With max-width: 100% on the image, the image won’t shrink until its container gets down to its size. While there is free space it won’t shrink, unless you also give it a proportional width:- width: #%
Though you may need to assign widths on an individual basis, Eg.

.prodphoto=920-2 img {width: 60%}
62

Thread has gotten just a tiny bit off topic so forgive me if someone has already mentioned these two approaches.

The first approach is to try and sniff out browser information based on the user agent header. http://www.w3schools.com/php/func_misc_get_browser.asp

echo $_SERVER['HTTP_USER_AGENT'];
$browser = get_browser();
print_r($browser);

This may or may not work for you. There are so many different browser agents that you may get wrong information. But as long as you give the user the ability to switch templates then it is often good enough to make an initial guess.

The second approach is a bit more interesting. I don’t have a good link for it but I have seen it described. Use media queries to set classes on a hidden html element based on whatever viewport or device information you need. Then use a bit of javascript to read these classes. At this point you can use javascript to trigger a new request with the device information. And of course your controller would then determine the stylesheet to use.

63

Media queries can be used to overwrite previously defined styles (or add new ones, I suppose) but a media query will not work in the controller (index.php) to select a different template. Correct me if I’m wrong. I may not have understood what you were explaining here.

64

I didn’t know I could set it to “auto.” I’ll try it and see what happens.

65

The idea is that once javascript knows the device width it would do a redirect with something like:

whatever.com/app?device_width=240px

And then your controller could work off of the device width parameter.

66

Auto is just the default for a block element, if the element has not previously been set to any other width, no need to set anything. Auto is basically, just fill the width of the container. Note it is not the same as width: 100% because if the element has padding and/or borders, it will be bigger than its parent by that much, unless you use box-sizing: border-box, that will make 100% and auto the same.

A media query will only affect css, not html or php for that matter.

But the point being, in accordance with the principles of semantics and separation of concerns, HTML defines content, not layout*. CSS defines layout. So to change layout all you need to change is the css. Unless the mobile version has drastically different content to the big screen version, there should be no need for a different html template.

*Granted, we all add the odd extra div or span here and there to construct our layouts, but that should all be built into a global template and the css deal with them accordingly.

67

True, and understood. But I’m thinking that if I want to insert different content into the right or left column for mobile, I still need to tell the controller if it’s a different device. Something like: if ($device=mobile) {require_once (‘./includes/templates/indextmpl2.php’);
else{require_once (‘./includes/templates/indextmpl.php’);} You get the idea.

68

Yes. Scott gave a couple of suggestions way back in the thread. One PHP class I have used in the past is Mobile_Detect.

69

If you are changing a lot of content, then separate pages do make sense.
But if it’s just the odd little bit of content, it can be dealt with in media queries by showing/hiding various elements. Eg.

.mobile-content { display: none }

@media screen and (max-width: 600px) {
   .mobile-content { display: block }
   .desktop-content { display: none }
}

That’s maybe not something you want to do too much of though. You have to draw a line where a quantity of content is different enough to warrant a whole different page.
If it’s a case of swapping pictures, there are other options like the picture element and srcset attribute.

For example, you could use picture to swap one of the images for a single group shot of products, then hide all the others.

70

Have you tried making the collage a background image and overlaying your content?

During testing please amend the following incorrect spelling, Indudstrial in the heading title because it is detrimental to SEO.

71

Holy cow! Wow. Why didn’t I think of that! A class! I think that will work for what I have in mind! Thank you so much!

1 Like
72

I’ve downloaded it. Haven’t had a chance to play with it yet. I think Sam may have given me an easier solution for what I want to do using CSS classes. I had never thought of it. At a glance, when I looked at his example, I’m pretty sure that’s all I’ll need.

1 Like
73

Basically, that’s what I do. For different content on different pages, I assign PHP variables ($leftContent) and then for each page, I define $leftContent in the index.php file for that page: $leftContent= ‘includes/path to appropriate html or php file’;

74

Thanks. Fixed. The reason why we should have someone else check. It’s so easy to jump right over ones own errors (such as my bad line break tag mentioned earlier - I never caught it till someone pointed it out).

1 Like
75

I think I would have to make the photos much lighter (transparent) in order for the text to be readable. Not what the designer wants in this site, and it’s not really good design from an advertising standpoint, unless they were REALLY light. You don’t want anything interfering with the visibility/readability of the copy.

76

I think everyone else has been assuming that as the ‘correct’ way to make minor changes to templates and didn’t realise that you didn’t know about it. At least that explains why you were not prepared to listen to the earlier suggestions.

77

If you can do it with CSS, it will be a lot easier in the long run. It took me some while to wean myself off Mobile_Detect and I still have one site to convert.

78

Not so much not prepared to listen, but I didn’t think I was being understood as to what I wanted to do. But also, I didn’t think it could be done using CSS classes. Once Sam posted some code examples, it was like “Duh!” The light went on.

Anyway, I’ve learned a whole bunch with this particular site. Now I’m prepared to convert my other sites.

5 Likes
79

For those who consider the “little story” is TL;DR

There is a more generic version that goes like this:

The three faults are compared with a vessel or cup.

  1. The first fault is being inattentive, compared with a cup turned upside down that cannot have anything poured into it.
  2. The second fault is being inconsiderate of the contents, compared with a cup with holes in the bottom.
  3. The third fault is being distracted by disturbing emotions while receiving the teachings, compared with a cup filled with poison that contaminates anything poured into it.
2 Likes
80

This worked. Eliminated three photos for mobile, giving much better layout motif when viewed on mobile.

Still have a bit more work to do for some screen widths to place the copy below all photos. Almost done with this … at least for now.

1 Like