This is way off topic but it is the direction this thread has taken...
I’m currently working in a theme for Zen Cart using Bootstrap. Building a responsive theme is a little more tedious than I expected. Building it in what I consider to be the proper way. I have built Bootstrap themes in the past following the Bootstrap guidelines which is “hide this from this device, show it on this other device” as in the example shown below:
HTML Code:
<div class=“hidden-lg hidden-md col-sm-6 col-xs-12”>
<p>Content Goes here</p>
</div>
The html shown above basically says hide it from desktops, display it using half the screen on tablets, display it using the full screen on smartphones. The problem is when it comes to hiding portions from mobile devices using for example the html shown below:
HTML Code:
<div class=“col-lg-6 col-md-6 hidden-sm hidden-xs”>
<p>Content Goes here</p>
</div>
The code shown above says display it using half the screen on desktops but hide it from tablets and smartphones. If we are to hide it, why load it to begin with? For that reason a mobile detection script is much better.
Using Google Code’s mobile detect, I can write the following:
PHP Code:
<?php if (if (!$detect -> isMobile()) { ?>
<div class=“col-lg-6 col-md-6”>
<p>Content Goes here</p>
</div>
<?php } ?>
The code shown above, displays the content on the desktop and keeps it from loading on mobile devices. This makes it convenient when we don’t need large portions of code, javascript or css files that don’t do any good loading on mobile devices.
As I was thinking about the theme that I’m working on. It is getting a little complicated because of all the bells and whistles that I’m adding to make it themeforest worthy. It seems that adding a truck load of sliders and extra pretty CSS for commerce websites sells... at least there
The essence of building responsive websites is building sites that basically have not one but three templates, at least. One for desktops, one for tablets and one for smartphones. With that in mind, I realize that there is no need to make things so complicated and here is how.
Let’s just say that I need to build the product info page. I need to build three designs, I’ll use three conditionals inside my /My_TEMPLATE/templates/tpl_product_info_display.php
PHP Code:
<?php if (!$detect -> isMobile()) { ?>
Content for desktops goes here
<?php } ?>
PHP Code:
<?php if ($detect -> isTablet()) { ?>
Content for tablets goes here
<?php } ?>
PHP Code:
<?php if (($detect -> isMobile()) && (!$detect -> isTablet())) { ?>
Content for smartphones goes here
<?php } ?>
I could either add the content accordingly or perhaps, call for three different files maybe named tpl_product_info_desktop.php, tpl_product_info_tablet.php and tpl_product_info_phone.php.
On that same note, I could add new statements into the sql for additional image sizes. Instead of MEDIUM_IMAGE_WIDTH and MEDIUM_IMAGE_HEIGHT, why not DESKTOP_IMAGE, TABLET_IMAGE and PHONE_IMAGE etc. This could be a good idea to use with something like an image handler. There is no use on creating this new sizes if the intent is to serve the same large image. The point is to load a smaller image on mobile devices to make it load faster…
Bookmarks