Posted by datarazor on December 23, 2014 at 5:18pm
Hi folks,
On a new site I am building we are using the same theme for mobile and desktop, but for the homepage I want to disable, server-side, some aspects of the homepage when a mobile client appears on our site. The desktop version of the homepage is a very fancy parallax and the mobile version will be function-over-form.
I'm considering using:
https://www.drupal.org/project/mobile_detect
And using PHP to enable/disable various aspects of the homepage when it triggers.
But I wanted to check first around to see if someone else had a different solution suggestion. I don't want to maintain a new theme for just the homepage.
If you think mobile_detect is the way to go, hearing that is also helpful.
Thank you!
Seb.
Comments
Mobile Home Page Options
I don't have specific experience here, but will next year. I am interested in how you eventually resolve this.
I would also consider creating a separate "home" page for mobile users and using either this module or perhaps something you can detect in .htaccess to redirect mobile users to the mobile home page. It does seem to be common practice to allow mobile users to get to the regular desktop page, so you may need to allow for that.
Thoughts on device detection
I'd highly discourage you from taking a device detection approach if you don't have to. It will likely cause some maintenance headaches in the future. Can you take a screen size approach? Say, if the screen width is less than 800px wide, then trigger the more complicated behavior with javascript. You can use Modernizr.mq() method to test a media query. A responsive approach is probably best. You'd probably also want to retrigger the complicated behavior if the page is loaded at less than 800px, and then is resized to 800px or higher.
With that being said, if you have to take a device detection approach, you may want to look at a custom solution. We currently use the mobile detect library to trigger the mobile theme on Economist.com, but it was never meant to be a long term solution. We implemented a custom solution because of performance. If you don't cache the results of your device detection in a cookie, then on each page load, the mobile detect library will run, which will add quite a bit of overhead to each page load. We also moved device detection to the Varnish layer (not sure if that is a use case for you). We have a drush command that uses the mobile detect library to output a mobile_detect.vcl file that can be used by Varnish.
mobile detect doesnt work if you have cached pages
if you have to cache the pages the mobile detect will only work on the first cache version. so its not a good choice. better to use css and media queries
use css and media queries
I agreed with diana, use css and media queries. You can also try to use another theme, like AT, which is responsive and it will allows you to specify mobile settings via the backend.
Hi there, thanks for all the
Hi there, thanks for all the input. My concern with using only media queries and CSS is that it will still load many assets I don't need and the desktop version is far from light. If I went down that road I would want to not load all images/scripts unless the width of the page was over X width.
This would mean having to load conditional images, perhaps using something like data-image:___ and then JS to replace the data-image to be the image when larger? But I'm not sure.
Any pointers on how to only load JS and images and other assets when the media is > X would be helpful if I am going to go down that road instead. Thank you!
--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech
My suggestion would be to
My suggestion would be to check what browsers you really want to support. Most of the newer mobile and desktop browsers won't load an image if it is set to not display through CSS, so the actual issue of background loading a bunch of unneeded content is become less relevant today than it was a couple of years ago.
HollyIT - Grab the Netbeans Drupal Development Tool at GitHub.
That's good to know! That's a
That's good to know! That's a good development in the browser world. Do you have a resource you use to check which browsers/devices will load display:none images and which will not? Thanks!
--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech
Not over all, mostly just
Not over all, mostly just testing in emulator or device, but the W3 does keep a test up on browsers that don't load them if set to display:none:
http://www.w3.org/2009/03/image-display-none/test.php
It is one of those things that the manufacturers have caught on to with the rise of responsive design and are starting to incorporate pretty quickly.
HollyIT - Grab the Netbeans Drupal Development Tool at GitHub.
I'd also suggest using the
I'd also suggest using the picture module to use the html5 picture element when supported. You can set media queries to determine which image style of an image to load to minimize requests. This requires the use of javascript to swap out the image. Some newer browsers support the element natively so there's no additional load at all; just make sure you're building mobile-first and setting a mobile fallback image.
https://www.drupal.org/project/picture
http://caniuse.com/#feat=picture
Regarding conditionally loading js Modernizr.mq and require.js would be my recommendation.
Themekey
Hi,
The themekey module may help with aspects of this problem. I suspect that mobile detect may be more what you need, but themekey will allow you to choose different themes for different pages (or browsers, or dates or...lots of other options). There is an is_front_page choice you can make under themekey settings which should let you at least choose a specific theme for your front page.
HTH, Jeff
Okay after further discussion
Okay after further discussion with another themer I will go with the Modernizr.mq() approach. This will mean that my home page's HTML will be longer than I would like it to be, so it is not ideal from a code-clarity perspective. If anyone has any back-end suggestions to compliment Modernizr.mq and still cache the page server-side, let me know! Thanks and happy holidays!
--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech
Media query to trigger JS
Or you can use jQuery to load additional content based on the media queries as outlined here: http://www.fourfront.us/blog/jquery-window-width-and-media-queries
I build websites, push pixels, move type, make media, plan camps, tap mana, roll for initiative, eat like a boss, chase food trucks and like an #eggoneverything. Sponsor my travel and I will record and post your camp sessions!
Thanks @kthull Just an FYI
Thanks @kthull
Just an FYI that the final solution uses mainly media tests and I didn't need modernizr because I already have all the tools I need as part of Zen+SASS.
I did just one core change to the background (big) paralax images to put all the data inside of the attribute: "data-image" and then I use jquery with CSS display:none; check to determine if I should set the elements background image to the data-image property.
This solution is JS dependent but eliminates all risk that the browser is potentially loading images I didn't want it to.
the resulting mobile-only non-parallax simple home page loads extremely fast and was in the end a lot easier to build than expected.
Thanks to everyone!
--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech
Thanks @kthull Just an FYI
Thanks @kthull
Just an FYI that the final solution uses mainly media tests and I didn't need modernizr because I already have all the tools I need as part of Zen+SASS.
I did just one core change to the background (big) parallax images to put all the data inside of the attribute: "data-image" and then I use jquery with CSS display:none; check to determine if I should set the elements background image to the data-image property.
This solution is JS dependent but eliminates all risk that the browser is potentially loading images I didn't want it to.
the resulting mobile-only non-parallax simple home page loads extremely fast and was in the end a lot easier to build than expected.
Thanks to everyone!
--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech
Panels + mobile detection
Panels + mobile detection (there is good integration with it).
Caching, there is a good solution for this too, I've been using Memcached to speed up and Varnish has good integration if it is setup correctly and making to listen to Drupal. The recipe it's pretty complex, but it shows best results.
If you are on cheap hosting or don't have a web developer with strong system administrator skills, then you should take on the other approaches suggested, using CSS with media queries.
Panels?
@imadalin - could you say more about what mobile detection you're using with Panels? I've been a little frustrated by this...
two options with
two options with plugins/support for Panels:
https://www.drupal.org/project/mobile_switch_panels
and
https://www.drupal.org/project/mobile_tools