Preformance of multiple designs in if...else statement

[ialsoagree]

He never stated that he wanted the users themselves to be able to choose, only that he wanted 3 different layouts (for three different medias).

 

I've already pointed out why this is wrong:

 

I am currently redesigning a site and am looking at introducing a style switcher to offer two or three varieties.

 

Say for example I want 3 designs...

 

1. Desktop version which contains the title and content for 10 news items.

2. Desktop version which has a slideshow at the top and the title only for 5 news items

 

Please <mod censor>.

 

PHP is the over complication. You're trying to do a server-side change of front end content that javascript is entirely able to handle itself.

 

By the way, if cookies are disabled, unless there's a login feature or the OP wants to save the selection via IP, there's no way to save the selection anyway.

[Jessica]

So, when you save it in a cookie, are you then saying that on the next page load, you would load the page then use JS to change the sheet, or have PHP access the cookie to change the sheet?

 

Neither.

 

When the user makes a selection: update the HTML/CSS and save that selection in a cookie using javascript.

 

If the user changes pages, reloads, whatever, it's saved in the cookie, you're all set.

 

How. When they load the page, HOW does the page know which style to use, based on a cookie?

[ialsoagree]

How. When they load the page, HOW does the page know which style to use, based on a cookie?

 

Do you mean, if there's no cookie at all? The same way PHP would: by having a default.

 

Do you mean, how will javascript know?

 

http://www.quirksmode.org/js/cookies.html

[Jessica]

So what you're saying is on every page load, javascript will have to check for a cookie, and then change the sheet.

 

 

[ialsoagree]

So what you're saying is on every page load, javascript will have to check for a cookie, and then change the sheet.

 

Just like PHP would, yes.

 

In fact, javascript can make that change arguably faster than PHP can once the file is cached (and it will be cached once you load it for the first time, which if that involves a switch, will favor javascript by a second or more depending on how long it would take the server to process the request using PHP).

[Jessica]

Can you show an example of how that would work that wouldn't cause the "flash of unstyled content"

[ialsoagree]

Can you show an example of how that would work that wouldn't cause the "flash of unstyled content"

 

Seriously? Are you kidding me?

 

http://lmgtfy.com?q=javascript preload a file

[Jessica]

*eyeroll* yeah the first couple of links are talking about something completely different. Whatever.

 

If the default style is X and then every time a page is loaded javascript has to run to change it to Y, that isn't "preloading" content. If you use PHP it's much faster.

[ialsoagree]

*eyeroll* yeah the first couple of links are talking about something completely different. Whatever.

 

Actually no, the *very* first link talks about loading a css file:

 

http://stackoverflow.com/questions/6806849/preload-javascript-and-css-files

[ialsoagree]

If the default style is X and then every time a page is loaded javascript has to run to change it to Y, that isn't "preloading" content. If you use PHP it's much faster.

 

Sure, except the browser has a cache, therefor defeating the need to "preload" a CSS file you've already loaded.

 

Actually, that's entirely besides the point. Why can't your PHP file check for a cookie on it's own?

 

Even if you do that, it's still faster to have the switch of the CSS file done by javascript.

 

At this point, you're just nit picking, and you're not even doing a good job of it.

 

Edit 2: Actually, now that I think about it, you could even have Javascript choose which file to load by first checking the cookie, and if there is none, loading the default. There's really a lot of solutions to this "problem."

[Psycho]

@ialsoagree,

 

No one here is going to agree with you. I think I can speak for everyone that what you are suggesting is a hack solution. Just because you can do something doesn't mean you should. The primary purpose of PHP is the ability to build dynamically driven websites. A typical page can perform hundreds, even thousands, of operations to display a single page. Having a simple piece of logic to include a link for the style sheet as per the HTML standards is trivial.

 

When someone points out a potential problem you go off and find some workaround that would solve it. That's great. But here's the thing. The PHP solution is simple and does not require any workarounds or added complexity to work. Simply set the style sheet link in the header using an if/else or switch statement. No need to preload files and it will have vastly wider support on all devices and browsers.

 

Maybe there is a break in how we are all understanding the issue. For me, giving the user the ability to switch the stylesheet is something the user will do one time and then should propagate to all subsequent page loads. Having that change happen instantaneously on the page which they select it is not something that adds a lot of value in my opinion.

 

But, if you still feel your proposal is best I would post the following challenge to you. Find an existing site that uses JavaScript for such a thing. A real site mind you, not some proof of concept that shows it can be done. I know I can find many that set the style sheet on the server-side.

[ialsoagree]

@ialsoagree,

 

No one here is going to agree with you. I think I can speak for everyone that what you are suggesting is a hack solution. Just because you can do something doesn't mean you should. The primary purpose of PHP is the ability to build dynamically driven websites. A typical page can perform hundreds, even thousands, of operations to display a single page. Having a simple piece of logic to include a link for the style sheet as per the HTML standards is trivial.

 

I don't disagree, you obviously don't understand what the OP was asking.

 

Allow me to explain the problem, and why javascript IS the correct solution:

 

You have a webpage that lets the user change the way the page is displayed. There are buttons to make that change.

 

Is it better to:

 

A) Form a new HTTP request, have PHP requery the database, perform all it's if/thens, write a new page, and then send that to the browser.

B) Have javascript update the page, and save the change to a cookie.

 

If you don't choose B, you are doing it inefficiently.

 

Sorry, but it's you who are doing a "hack" solution.

 

Maybe there is a break in how we are all understanding the issue. For me, giving the user the ability to switch the stylesheet is something the user will do one time and then should propagate to all subsequent page loads. Having that change happen instantaneously on the page which they select it is not something that adds a lot of value in my opinion.

 

Then your opinion and mine vary GREATLY.

 

I cannot, under any circumstances, imagine a scenario in which it's better to create 2 HTTP requests for something that only needs 1, query the database twice for a situation that only needs 1 query, and create 2 history files in a browser (1 correct, 1 wrong) for a task that only needs 1.

 

Mean while, my solution has no down side. Because, as I pointed out, you can still load the correct page using PHP on the first try.

 

You are welcome to disagree with me, but please don't tell me javascript is not used to change front end content, or that using it to do so is a "hack" solution.

 

If that's what you think, you need to learn more about javascript.

[.josh]

So I'm sort of responding to different people here, pick and choose what part is relevant to you...

 

I think the "most efficient" method would be a hybrid approach.  If the user changes style on a page, use javascript to change it and set a cookie.  But also have php look for the cookie and output the correct style whenever there is a request for a new page. 

 

But overall, I would not have all 3 (or more) styles output on a given page and have one "visible" based on selection.  That's a terrible way to do it.  So much unnecessary bloat and bandwidth consumption.  sidenote: bandwidth consumption: oh come on now, how often do you think people are going to be changing their style? "Less stress on the server" is not a major selling point, it's a "well technically..." point. 

 

But even more overall/general...on the note of "over-complicating things"...how useful is an "on-the-fly" style change feature, really?  How important is that, really? How often do you think people are really going to access this?  Does your site have a registration/login/membership? If so, seems to me the simplest thing would be to have on a "profile" or "settings" screen, an option to change it.  Make a dropdown selection, make a request to the server, update a database with the preference.  Store in a more permanent cookie and read it.  have some login logic look for it or in db and store in session or set same cookie and look for it on given request.    Output relevant stylesheet accordingly.  On that note...

 

IMO do not try to couple your style sheets for the sake of "less overall code".  This seemingly makes sense if you are going the "dump ALL of it on the user, show relevant stuff" route - but you should avoid that.  Since you are going to avoid that tactic (right?), it will be easier to maintain and expand an individual "theme" without having to worry about other themes, if you keep them separate.

[ialsoagree]

.josh, I mostly agree with your sentiments. I strongly agree the hybrid approach is best.

 

My statement about preloading was really just to counter that the split second lack of style is some how a bigger inconvenience than reloading the entire page.  Without it, you only have the overhead of writing the javascript along with the rest of the page on each page load.

 

To me, that's a worthwhile thing to program for user friendliness, but that's certainly up to everyone's own opinion.

[Jessica]

I think the "most efficient" method would be a hybrid approach.  If the user changes style on a page, use javascript to change it and set a cookie.  But also have php look for the cookie and output the correct style whenever there is a request for a new page. 

Agreed, that's what I was going for

[MargateSteve]

Well, that opened an unexpectedly large can of worms!! When posting, I thought the response would be a unanimous 'this is the correct way to do it....'!

 

I have read through and although a lot of it has gone over my head, it has given me food for thought for the future and different ways of doing things.

 

However, for this moment I just wanted to clarify what I am trying to achieve as I think the actual purpose of the post has got lost or mis-understood at times, why I am trying to do it as one of the responses appeared question why I would offer 3 styles and finally, what I have done so far. I haven't changed anything to my original code so everything is what I had before my original post. So.........

 

The suggestion of 3 styles isn't the definite number that I will offer. I just used that as it would give an idea to the complexity (in my head) of offering 3. Having said that, I do not think it would be unusual to offer 3.

 

A survey of site users has suggested that some would like a feature-rich and graphically-enhanced landing page, featuring snippets of as much of the different parts of the site as possible, much like a portal page. This could include a slide show at the top or a section with scrolling content. It may also be that the navigation used on this version is more advanced.

On the flip side, some people would want the landing page to be no more than a list of the latest news, leaving them to navigate to the other pages if they want to see any other content. The people who preferred this, also prefer a simpler looking page with clear content and no frills. Also, this version would be more suitable for anyone accessing the site on the move.

This is no different to the HI-FI and LO-FI versions seen on many forums and CMS's.

The 3rd version is one designed to be viewed on mobile devices and may have vastly stripped down versions of the content.

 

The actual switching between styles is not a problem and I already have that working. Basically I have an xxx/styles folder. In that, currently is 3 more folders, 'V1', 'V2' and 'V3'. In each of these there are 4 different files....

base.css - the main css file for that style

head.php - this is to hold and scripts or other <head> elements that are specific to that style only. I do have a separate shared head file for code that is common for all versions.

top.php and bottom.php - these are to wrap the style around the content and will mean that any changes to the template will only need one file changed and uploaded rather than every page.

 

A dumbed down version of the page code is...

<?php ob_start();session_start();
require_once('xxxxx/constants.php');
$title = "MySite | Welcome"; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<?php include($style.'/shared/sharedhead.php'); include($style.$this_style."/head.php");?>
</head>

<body><?php include($top); ?>

<div class="page_title">Welcome to My Page</div>

<!--START CONTENT-->
CONTENT GOES HERE
<!--END CONTENT-->
    
<?php include($bottom); ?></body>

</html>
<? ob_flush(); ?>	

This means that the only code edited in the actual page is the code relevant to that page.

 

In the constants.php file I have

$style = path.to.'styles/';

#CHECK FOR STYLE COOKIES
if (isset($_COOKIE["style"]))
{$this_style = ''.$_COOKIE["style"].'';}
else
{$this_style = 'v1';}

#FIND THE CORRECT TOP AND BOTTOM PAGES
$top = $style.$this_style."/top.php";
$bottom = $style.$this_style."/bottom.php";

 

In the pages (not shown in my code above) I have a style chooser which on submits accesses a page with the following code

<?php 
$goback=$_GET['ref']; //$_GET['ref'] is sent with the form as $_SERVER['PHP_SELF']
$choice=$_POST['stylechoice'];
$yr =31536000 + time();
setcookie ('style', $choice, $yr, '/');
header("Location: ".$_GET['ref']."");
?>

 

This is where I am up to and at this point everything works as well as I had hoped. The switch is literally a split second (albeit with no content on the page) even on my phone's mobile network and as far as the styles are concerned, my css is adequate enough to make something that appears on the left in one style appear on the right in another and manipulate the way everything looks in each different one.

 

The actual switching of styles was not part of my original question but as that is where a lot of the discussion has been focused I thought I would include it now. However, I am happy with the way it is working and unless anyone can convince me that there is a more efficient way using php and css, I am more than happy to leave this part as it is.

 

My question is how to handle the fact that there would be both shared and unique content in each style and I want to know how best to do that.

 

For example (and these are unlikely but just using as examples) there may be a twitter feed showing on the first two but not on the mobile one, a featured content slider that only features on the first one and a latest news section that appears on all three. Similarly, if I am pulling data into a html table with 10 columns, I might want to show all columns on the desktop version but only 5 on the mobile one.

 

The approaches I thought of were (in psuedo code)...

 

PUT THE ENTIRE CODE FOR EACH VERSION IN AN IF...ELSEIF STATEMENT

if ($style=V1)
{SHOW CONTENT SLIDER
SHOW LATEST NEWS
SHOW TWITTER FEED}
else if ($style=V2)
{SHOW LATEST NEWS
SHOW TWITTER FEED}
else if ($style=V3)
{SHOW LATEST NEWS}
//and so on

The downside I see with this is that the code for the Twitter feed is shown twice and the latest news is shown 3 times. However someone did mention using functions for the duplicated code.

 

USE SEPARATE IF STATEMENTS IN THE PAGE

<?php if($style=V1){SHOW CONTENT SLIDER} ?>
SHOW LATEST NEWS
<?php if($style=V1 or V2){SHOW TWITTER FEED} ?>

this would mean all the code is included in the page once and only called if it is the correct style

 

USE CSS TO SHOW HIDE CONTENT

Once again, this has all the code in there once but instead if using if statements to decide whether or not to show it, it will be decided by using the relevant style sheet to show or hide a particular container.

 

In my head they all seem adequate solutions, although I think the CSS only one might be harder for me to implement. What I would like to know is which of these methods would be the best option. Or if there is a better option using php/css/html feel free to point me in the right direction.

 

That was a mission and time for bed!! Thanks for all the thought that has been put in to the discussion so far. I have got this thread bookmarked so when, in the future, I find time to learn Javascript (I would love to be at a stage to be able to utilise Ajax/jQuery but that is a long way off) I have got an interesting starting point for the pro's and cons.

 

Thanks again

Steve

[Christian F.]

OK, that's a bit different than what the opening post was hinting towards, but not a whole lot more complex.

 

What I would do in this case, is to make each of the shared functionality into their own functions/classes. Then I'd use a single test to figure out what level of functionality the user wanted, and then call the functions based upon the results. The use of a template engine is highly recommended as well, as it'll allow you to manage the output a lot easier.

 

A quick example, of the principle:

/**
* First we set up the functions
*/
function getNews ($num, $full) {
    return $news;
}

function getSlider () {
    return $slider;
}

function getTweets ($num) {
    return $tweets;
}

/**
* Then we set up the controlling stuff.
*/
$output = new Template ();
$output->setStyle ($style);

/**
* Fetch and set the content for the given style.
*/
switch ($style) {
    case "simple":
        $output->news = getNews (5, false);
        break;
    case 'full':
        $output->news = getNews (10, true);
        $output->tweets = getTweets ();
        break;
    case 'mobile':
        $output->tweets = getTweets ();
        break;
    default:
        $output->content = 'Invalid style';
}

// Write the output to the browser.
echo $output->parse ();

[Psycho]

EDIT: ChristianF beat me too it with basically the same idea, but I had included some additional details that might be of value.

 

What you are really talking about is different content not really styles (but styles would be one potential way to achieve that results). Without knowing how the multiple options will display the content it is really impossible if stylesheets would even work. It most likely can, but would require a LOT of pre-planning and detailed design. It would be very easy to create output into say a list that you can easily format for one output, but then find that it doesn't work for a different output. But, I have seen this done. allmusic.com is one that I know of. At the bottom of an artist or album page there is typically a list of albums, tracks, etc. The content is set up so you can switch from a condensed to list view and it all appears to be driven by styles that are hidden/unhidden. That works well for that type of application because they are both lists, just displayed a little different.

 

But, if the way you will display some data will be functionally different that will be harder to do. Plus, if the mobile will be a stripped down version why make that user wait for all the content to download if it is only going to be hidden? A good approach would be to simply separate the logic into three parts

 

1. Create the templates that will contain the output. These would be just wire-frames with placeholders for the content where you will include() the necessary content file. So, the mobile template might only have one or two content placeholders while the high-def may have many.

 

2. Create the scripts to create the different contents you need. If you have multiple output modes that will use the same "basic" content for one of the sections just create that script to make the changes while it is generating the content. Ex:

$query = "SELECT name, email, phone, address FROM user";
$result = mysql_query($query);
while($row=mysql_fetch_assoc($result))
{
    echo "<div>\n";
    //Show name and email for all versions
    echo "Name: {$row['name']}<br>\n";
    echo "Email: {$row['email']}<br>\n";
    if($display_mode == 'low_def' || $display_mode == 'high_def')
    {
        echo "Phone: {$row['phone']}<br>\n";
    }
    if($display_mode == 'high_def')
    {
        echo "Address: {$row['address']}<br>\n";
    }
    echo "</div>\n";
}

 

That's probably an oversimplification. Of course you could just create three different scripts for each display option for the same data. But, this would be easier to maintain. If you were to ever change database schema you would only have to change the data access in one place.

[MargateSteve]

Thanks guys. That is exactly the sort of thing I was after.

[Christian F.]

You're welcome, and I'm glad we could be of help.