Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jaime Rios
Courses Plus Student 21,100 PointsIs this a best practice or cowboy coding?
I am creating my personal website in http://riosjaime.com but, in order to enhance UX, I want it to have a three column layout on desktop and a single column in mobile devices.
I understand that I can use flexbox and Bootstrap to accomplish this. But I want some specific stylesheets and images to be loaded only on tablets and desktops.
To accomplish it, my solution is to write a conditional statement in php that, will load the images, scripts and css (or not), depending to the width of the window.
So my question again is: Is the solution a best practice or cowboy coding?
Thanks in advance.
4 Answers
Codin - Codesmite
8,600 PointsThere is no reason you can not do this, I do this very often and on massive scale websites where security is essential.
I don't use many frameworks in my code, find them bloating and a lazy shortcut in most cases, so I avoid things such as bootstrap, etc.
What I normally do is split my header into two php files.
The idea is that I will include both headers on my page, but throw some variabiles inbetween the includes to load into the header.
The reason for splitting the header and not just placing all the variables before my head section is because it is good practice for SEO to declare your character set in the first 1024 bytes downloaded by the client.
So for example:
header1.php contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Declares the doctype, charset, language, browser mode for IE upscaling, and the initial zoom value for mobile/tablet devices. This gets my charset in the first 1024 bytes and lets any client know the basic structure of the page before my PHP variables.
header2.php contents:
<title><?php echo $pageTitle; ?></title>
<meta name="author" content="Author">
<meta name="description" content="<?php echo $pageDescription; ?>">
<?php foreach($styles as $x){ ?>
<link rel="stylesheet" type="text/css" href="/styles/<?php echo $x; ?>.css">
<?php } ?>
</head>
This contains the rest of the header, but as you can see I have some PHP variables for the title, description and my css stylesheets.
This allows me to generate a different title, description and required stylesheet per page on my website.
For example my landing page:
index.php contents:
<?php
require_once('./includes/header1.php');
$pageTitle = 'Welcome to website';
$pageDescription = 'This is a website about things';
$styles = ['global', 'landing'];
require_once('./includes/header2.php');
?>
<body>
Bla bla bla content
</body>
Withen global.css I will have styles that relate to all pages, for example header and footer styles, ill include this on nearly every page of the website, landing.css may contain the styles for my landing page that I wont need anywhere else, so no point in putting them in the global.css because it will bloat my css files with styles that aren't required for the page being displayed.
Then for example say I have a page for articles.
articles.php contents:
<?php
require_once('./includes/header1.php');
$articleTitle = "How to build a pure CSS parallax website"
$pageTitle = $articleTitle . ' :: Website.com';
$pageDescription = "In this course you will learn how to create a pure CSS parallax website in 10 easy steps";
$styles = ['global', 'articles'];
require_once('./includes/header2.php');
?>
<body>
Bla bla bla content
</body>
Same as before this time I have loaded the stylesheet for my articles page and the global. At the same time I have included a new Title and description based on the page content (Nice bit of SEO especially with mass generated PHP content).
The above method can be used for loading different stylesheets based on dimensions of the clients display. The only issue you will find is because PHP is server side you cant directly get the client display size using PHP, but you can use CSS media queries or javascript to detect this. What I normally do is first detect javascript using javascript, so if javascript does not exist it will not detect itself. If javascript is availible on the clients device I will detect the screensize and load the resources required. If javascript is not detected I will load a seperate stylesheet with media queries to determine page resources/size. (This file will be fairly bloated in comparison, but the percentage of users not using javascript is usually so low that it will rarely come into use, but always good to have as a fallback).
Same can be done inside the content, for example loading a different image with a PHP conditional statement in your code.
Nothing cowboy about it, if anything I would say in comparison to all these bloated frameworks this is one of the most practical, secure, SEO and effeciant ways of responsively loading resources.
Rasbin Rijal
Courses Plus Student 10,864 PointsHi Jaime Madrigal Rios , one of my suggestion in your webpage is to a display message indicating something like 'Your message has been sent' after the contact form is submitted by the user. I should learn more in order to evaluate a website.
Keep it up!
Jaime Rios
Courses Plus Student 21,100 PointsThanks for the feedback.
James Gill
Courses Plus Student 34,936 PointsJaime,
What you're describing is essentially responsive design. In short, you can use Bootstrap, media queries, breakpoints and some thoughtful CSS to accomplish it. Also, I highly recommend checking out the Responsive Layouts course by @nickrp.
Jaime Rios
Courses Plus Student 21,100 PointsYeah, I checked it out and I'm aware of media queries and Responsive Layouts. I built the website with a mobile first approach.
When scaling it up, I enhance the UX with CSS animations and other images. However, in a mobile device, it makes the website heavier, and might download images that won't be displayed. So I want to know if the backend-php-solution I propose is a valid one or just cowboy coding.
James Gill
Courses Plus Student 34,936 PointsI've never heard of doing it that way, and based on your description, I'm not sure you understand responsive.
Jaime Rios
Courses Plus Student 21,100 PointsJaime Rios
Courses Plus Student 21,100 PointsThanks so much. I'll implement that solution. I have been asking a lot and the answer I got is that there is no right answer in this moment.
What I want to do is to display three drinks in tablets and bigger viewports, instead of one. You may have one at http://riosjaime.com