I want to use a different template for my mobile version of a site. I use PHP and a controller (index.php) to load a template require_once (‘./includes/templates/indextmpl.php’); So, I need to detect the viewport or device width to select the mobile template (which I haven’t created yet). How would I go about coding my controller script to detect the viewing device and select my mobile template?
I know I can use a @media to apply different styles but I need a much simpler template for the mobile version, something strictly linear instead of the two columns of the PC version. This is the site (still under construction) http://metalfabcorp.com
Is the page going to be offering the same exact content? If yes, then the template should be responsive itself, meaning, your HTML and JS should work in a way indicative to the device viewing the page. Here are some articles on the subject.
(Note: the articles are a bit outdated, so just take the overall gist).
If you are going to offer different functionality for a mobile device, that is when you’d possibly need different controllers. To do that, you could filter for the device’s attributes with something like this, and go to the “mobile” controller(s).
Your current design is very fragile, and will break easily.
The images and text overlap at a width of around 960px, which is a very common desktop window size. Using <br> tags (which are currently mistyped as </br>) to control layout like this is a misuse of them, and will cause the layout to break for any visitor whose browser settings are different to yours. For example, just a slight increase in font size changes this:
to this:
You might want to rethink the design a little before you proceed, to avoid more problems further down the road.
If it was going to have the exact same content, I wouldn’t be asking. No. We are going to trim it down a bit for mobile, because the design of the site does not lend itself well to shrinking it down for mobile. We will use a different layout, fewer images, and will probably have to re-do the menu.
Some designs are not easily converted to “responsive,” and I refuse to follow the pack with the fat horizontal bars, one following another (which is no design at all) that look horrid and positively boring on PC screen (oh, and don’t forget the requisite 3 circles in a row containing photo or small amount of text).
But thanks for your reply. I have spent the last several months learning about “responsive” design, and have implemented it to some degree (not on this site). But it has limitations that cannot be overcome. Therefore, we thought it best to use a different template for mobile on a couple of the sites we’re working on, which have some beautiful graphics and design features that cannot be made “responsive.” So, my artist is making special artwork for the narrow screen that will work very well, and looks just as good.
Not going to have different functionality, just entirely different layout.
It doesn’t break, and it was designed on a 1050px width, which is common today. Hardly anyone uses 960px anymore since wide screen monitors came out. Why would anyone re-size it to less than full screen? That’s their problem. 1050px on desktop PC is standard. Some sites display the entire width of a wide screen. If someone want a narrower view, they can zoom out, and everything stays in place. Trust me. I’ve done it.
I know the photos overlap. The page was designed that way. I took my artists design and coded it for the Website. That is what he wanted, and so far the client is happy also.
I think we are losing the creativity that Web designing once enjoyed. We seem to be going backward, not forward. I don’t like to be constrained. I like the freedom to be creative. Many developments in CSS and HTML allow us to do things we didn’t used to be able to do, and I like that. Mobile brings new challenges, but I refuse to let it limit me. Therefore, in order to achieve a design as pleasing on mobile as on PC, we decided to use a different template and graphics designed for the mobile device. I think it should be possible (I know it’s possible) and I’m trying to find the best way to do it (I don’t like the m.mysite.com solution as it has some drawbacks too).
Since when are < br > and not < /br > (self closing tag) allowed again? (Edit: My error. Should be < br/ >
Those breaks are there for a reason, because we wanted the text to conform to the available space around the photos, not a rectangular block of text).
If you can tell me a better way to make the text conform to an irregular left margin, I’m open to hear it. If I had my way, I would not allow for font size to increase larger than the way it was designed.
Not going to re-think the design. We like it as is. It works, and I’m not the artist on this particular site. The artist is a design studio/ad agency with many years experience in advertising and design. This is what he wants. it was my job to code it.
Well actually it’s your problem and one that you engineered (not to put too fine a point on it) . Surely you want to accommodate as many people as you can (especially when you are selling something) rather than alienating them? That doesn’t sound like a good business model from any standpoint.
I never have my browser window maximised and often have my open applications taking up a quarter of the screen as that is the way I like to work. I expect sites to fit in with me and not the other way around. If sites don’t adapt properly then I just go to a better site instead. I looked up metal storage containers on Google and the first site that came up was responsive and adapted to my browser nicely.
Of course you are free to code how you think best and what best fits your design intentions but it is always worth listening to the advice you have received on these forums as it comes from good reliable sources.
Web design is full of compromises one way or another as not all things are possible or feasible but that doesn’t prohibit creativity and a good designer will still create a good accessible design. It’s all about being professional and doing the best job for yourself, your client and your customers. By all means bend the rules a bit but your basics must be sound.
I still use a 1280px wide monitor with the window maximised, but I know from very many discussions here that other people with wide screen monitors prefer two windows side by side, and 960 px is therefore quite a common size among such users. I was simply drawing that point to your attention; what you do with the information is, of course, entirely up to you.
The <br> tag should be used only when the line break adds meaning to the text - as in, for example, song lyrics, poetry or an address. Like all HTML tags, it should be used to denote structure and meaning. https://www.w3.org/wiki/HTML/Elements/br
As I demonstrated, using them to force line breaks to fit your design is not only incorrect, but makes the layout very fragile when viewed under different conditions than those on your own machine.
Then I sincerely hope that neither you, your client nor your customers ever suffer any form of visual impairment - temporary or permanent.
I’m glad you think so. It doesn’t work as I understand the meaning of that term, but my purpose here was to draw potential problems to your attention at an early stage, so you can rectify them before spending too much time on a poor design. However, if the brokenness of your current design doesn’t bother you, then I’ll waste no more time trying to convince you to care about it.
Wide screen monitors are too wide to display a web page so splitting the screen in half to display two things side by side is very common - that makes 960 a very common browser width including the browser chrome.
I never display web pages wider than 950 (half the width of the screen less the scrollbar) and many other people do the same.It is one sie you MUST check your page displays correctly at if you don’t want lots of people thinking your site is broken.
With all due respect, Paul, you are a tech, not some guy sitting in a office looking at a vendor’s Website, a vendor from which they have purchased before (or not) but someone in a buying office who does not typically have multiple programs running at the same time.
Neither is this for the “impulse buyer” (someone on Etsy for example). Those people don’t read anything (experience has shown this - my wife is a consultant on Etsy) Many sellers complain that people do not read their descriptions and then are unhappy with their purchase, and leave a bad review. People do not scroll when using mobile devices, so they do not read the product descriptions. That raises another issue about mobile; you cannot provide sufficient information, and can not display photos larger than the ‘toy’ screen of the mobile device.
I doubt you are a “businessman” and know what business people want. Sorry, but I came here to ask a simple question, “how can I detect the viewing device in a way that allows the controller to load a different template”. All I get is criticism of my site, and ridicule.
I know Web design has some limitations (which I can deal with) but it has far fewer limitations than those we place on it ourselves. I believe my basics are sound. But I don’t build sites that look like everyone elses, and I don’t plan to start. I can spot a Wordpress site the minute I see it. It looks like every other Wordpress site. And those few people who are left that hand code only know how to make horizontal bars of a solid color, one following the other, with the three circles centered in one of them containing a few words or a picture of someone, There are very few people who can blend a photograph into a background, merge a headline into it, and really make an attractive site. Most Websites today are just plain garbage, in terms of design, Headlines have become nothing more than “Welcome to our site!” My God, that is certainly awe inspiring! Is anyone going to read beyond that? Probably not. We have lost the art, and we have forgotten that the purpose of a business site is to advertise and hopefully increase business.
Now, does anybody here have the answer to my question? Or shall I move on. I didn’t come her to be bashed.
If you are writing something for a closed group of users rather than a public website you can code according to the known without worrying about web best practice.
For example, if everyone in the office is using IE11 with 1800x900 monitors or the same model and version of Android mobile, you can take a lot of “short cuts”.
You also will not need to consider the folly of trying to detect devices as you already know them.
Ever consider zooming out? I can shrink metalfabcorp.com down to almost half the screen before seeing any over lap. Zooming out takes care of that.
One thing that is true about Web designing is that it is impossible to satisfy everyone. I know how to use my browser, and I can zoom in and out as I please. I can’t design for the dummy that doesn’t know how to do this.
I used to make all my sites no wider than 960px. It is a rather narrow format. Then I realized that few sites were still being built to that dimention, but to 1050px, and contrary to what you said above, I have even run into sites that fill the entire screen!
Somebody pointed out (on another design blog) that their are so many different devices, all with different widths, that we can’t possibly hope to please everyone. I agree with this. But we can deal with most of them. That is why I would like to be able to use a different template on some sites for the mobile user. I didn’t think this was unreasonable, but apparently according to Site Point, it is.
By the way, I do check that my pages display correctly, and they do. I have been building sites since about 2010. I’m not exactly a newbe. But I am getting tired of the arrogance that I find on this forum.
Don’t you mean WIDE rather than narrow? People are used to reading pages that are tall and thin not short and fat.With the browser viewport set to 950 wide it is barely higher than it is wide making it a very wide page for its height.
. Surely you want to accommodate as many people as you can (especially when you are selling something) rather than alienating them? That doesn’t sound like a good business model from any standpoint.