Hi, I continue in my post-nap reflections: is a responsive website the best option? Let me explain: sometimes what we want to show on mobile is so different from medium-large breakpoints that it becomes terribly boring to systematically use alternative boxes. Is it penalizing to have a site only for mobile if its pages are on the same hosting as the medium-large displays site?
Another post-nap question: how to detect for sure that it’s a mobile phone accessing the site? Java, PHP, Htaccess: a preference for the redirection method to use? Yes I know I should stop taking naps
You may want to go down the route of a link for a Progressive Web App (PWA). I am doing this for a university right now. On the student login page add a link called mobile.
We are doing this as we are not showing the whole site to the students on Mobile app for a couple of reasons.
There is actually a theme or two out there for this for Rapidweaver.
The reason we did not develop an app is that there are changes now and then that we dont want delays on getting them to the App Store approval process and it also works with android.
@scottsteven Hi, good suggestion. I don’t know much about PWA because I’m having trouble taking them seriously until now. I’m going to watch some videos on the subject (that way no need to ask me what to watch this evening to relax, my wife will surely be happy with the TV program, but don’t worry I will denounce you as solely responsible for the choice ) and I will come back to you to tell you what I think. Thanks a lot for your answer.
Don’t forget the time Apple “almost” disabled PWAs for EU users:
They could always reverse their reversed decision…
Usually it’s done using CSS Media Queries
Yes but my goal is to redirect towards the mobile site when it is a mobile and the classic site in all other cases. My question mainly concerns whether or not it is appropriate to build a site (subdomain or other) alongside the “classic” site only for mobile when this requires too much “show-hide” between the medium-large display and the mobile display.
Detecting a web browser in PHP can be done using the $_SERVER['HTTP_USER_AGENT']
variable, which contains information about the user’s browser. You can use this information to adjust your website accordingly. Here’s a simple example:
-
Detecting the Browser: Create a function to check the user agent and determine the browser type.
-
Adjusting the Website: Based on the detected browser, you can adjust your website by including different stylesheets, scripts, or content.
Here’s an example:
Step 1: Detecting the Browser
function getBrowser() {
$userAgent = $_SERVER['HTTP_USER_AGENT'];
$browser = "Unknown Browser";
$browserArray = array(
'/msie/i' => 'Internet Explorer',
'/firefox/i' => 'Firefox',
'/safari/i' => 'Safari',
'/chrome/i' => 'Chrome',
'/edge/i' => 'Edge',
'/opera/i' => 'Opera',
'/netscape/i' => 'Netscape',
'/maxthon/i' => 'Maxthon',
'/konqueror/i' => 'Konqueror',
'/mobile/i' => 'Handheld Browser'
);
foreach ($browserArray as $regex => $value) {
if (preg_match($regex, $userAgent)) {
$browser = $value;
}
}
return $browser;
}
Step 2: Adjusting the Website
You can use this function to conditionally include different resources or modify the content of your website.
$browser = getBrowser();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Browser Detection Example</title>
<?php if ($browser == 'Internet Explorer'): ?>
<link rel="stylesheet" href="ie-styles.css">
<?php elseif ($browser == 'Firefox'): ?>
<link rel="stylesheet" href="firefox-styles.css">
<?php else: ?>
<link rel="stylesheet" href="default-styles.css">
<?php endif; ?>
</head>
<body>
<h1>Welcome to my website</h1>
<?php if ($browser == 'Internet Explorer'): ?>
<p>You are using Internet Explorer. Some features might not work as expected.</p>
<?php elseif ($browser == 'Firefox'): ?>
<p>Welcome, Firefox user! Enjoy your stay.</p>
<?php else: ?>
<p>Welcome to my website. Your browser is detected as <?php echo $browser; ?>.</p>
<?php endif; ?>
</body>
</html>
Explanation:
-
Browser Detection Function:
- The
getBrowser
function uses regular expressions to match the$_SERVER['HTTP_USER_AGENT']
string against known browser signatures. - It returns the name of the detected browser.
- The
-
Adjusting the Website:
- In the HTML part, we use the
$browser
variable to conditionally include different stylesheets or display different messages based on the detected browser.
- In the HTML part, we use the
You can expand the browserArray
with more user agents if needed and adjust the conditional logic to suit your website’s requirements.
If the question is “should I build a separate version of my website for mobile devices?”, I agree with this StackOverflow comment:
The poster states “Redirecting to a mobile area is the old approach…”, and that comment is from 2012, so people were already calling that an old approach 12 years ago.
Personal opinion is responsive design is the better approach, other opinions might differ.
ok if you are building something that you want to look like an app instead of your website do PWA if you want basically your website for the most part the same I would do everything responsive.
@dang @scottsteven Hi, Thank you for your detailed answers. The 2012 article is interesting and the PWA approach attractive. However, because there is one thing, when you display something completely different on mobile than on other media it doesn’t seem so uninteresting to ask yourself a question again even if it was already “dated” in 2012. I am obviously in favor of the responsive approach but it has its limits. I’ll take a concrete example: a page designed for at least a medium screen (a map with many clickable points of interest) is simply not usable on mobile. The Mobile design first approach doesn’t seem to me to be of much support in this case. This is the type of concern that my question comes from. I know that I am old, I accept it cheerfully, the fact remains that building pages with all their parts presenting display conditions to be tested all the time does not seem to me the most economical, nor the safest for the operating a website.
For the PWA I took a quick look at the most important thing: security. It seems to me that you really have to be sure of your programmer, sorry developer (I’m really very, very old) and of his interest in choosing CSRF first, XSS and cache control. To make a long story short, I don’t really see a stack that I can be so sure of when I already see some people’s Java concerns. As I indicated at the beginning of my interventions on this forum, I switched to RW/Stacks because as time went by I decided to no longer take direct responsibility for the maintenance of my web server (I now go through a webhost , I discover some amusing surprises on the PHP and Apache modules side, and yet it is the most renowned “quality”…) and move on to no code. Therefore the PWA approach unfortunately cannot suit me.
I will therefore continue with the responsive approach but for the reasons mentioned above it seems to me that a debate would be necessary, it has not escaped me that Elements leads to designing the site for mobile on the one hand and on the other leaves for the rest…
Thank you very much again for your response, it allows me to progress.
@joeworkman has a PWA Stack Pro head over to weaver space and look for it
Ok Thank you
Another one is here: PWA
If you need a sure-fire way of detecting browsers, have a look at the Agent stack over at Weaver’s Space. It can show or hide stacks based on several aspects that is read from the visitor’s device (such as browser, language, geograpical location etc.).
You could swap out the interactive map on mobile screens with something more useful using this stack.
Alternatively, you could code your own way to do that using the examples that @scottsteven mentioned earlier.
Cheers,
Erwin
Hi, thank you for your advice. I am thinking about the path to take. It’s not so obvious to me: PWA or Agent or both or code or something else… I know that it’s obviously very (too?) old to say that but I can’t not repeat it: when displaying a site on mobile is totally different from displaying medium-large media, should we not consider a site dedicated to mobile? The answer I’ve been told apparently since 2012 is: it’s too old to think like that. I repeat myself again (probably an effect of age ): when I said that Sudo was a sieve for security and that mixing administration and use of a Linux system was a mistake (all this supposedly to improve user experience , I think rather out of laziness of having to type your identifiers too often…), I was taken for an imbecile (especially since I am not a developer, so obviously I have nothing to say about the administration network and system…
). Result: Debian disabled Sudo (default conf) in its latest iteration.
No one to remind us that it is a little late that we recognize the obvious.
I’m telling this again because I think it’s the same thing here: responsive is the future (already here), a site dedicated to mobile is a shameful past that we shouldn’t even remember.
I’m trying to convince myself of this because there are several of you who tell me or politely try to make me understand it but I can’t do anything about it (probably Breton genes, my origins) I resist because what seems to me to resist is the obvious: a completely different mobile site (apart from the logo and the graphic charter) it is a site in its own right. Hence my current reflection, do I side by laziness, er by ease, er sorry by intelligence to what seems obvious to everyone except me or do I consider that what resists is not that stupid?
To be continued.