Preformance of multiple designs in if...else statement

[MargateSteve]

I am currently redesigning a site and am looking at introducing a style switcher to offer two or three varieties. This in itself is not a problem and I already have a script which will call the correct css, top and bottom files depending on selection.

 

The front page is intended to vary greatly between styles and each style will have something the other doesn't. With this in mind my thought is to have all the variations coded into the one page and only show the content relevant to that style using a series of if...else's with the HTML in between each.

 

Obviously this will mean the actual code on the page is quite heavy but am I correct in thinking that only the relevant section would be pulled so it would not have any impact on speed or performance?

 

Thanks

Steve

[Barand]

Have you looked at Zen garden

[MargateSteve]

I had seen that before and had a browse through but I don't think it covers what I am trying to do.

 

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

3. Mobile version which has the title for 10 news items

 

Obviously this is not a great example but it is the best way I can explain at the moment. Each of these pages will also have shared elements.

 

The way I see it there are 3 options...

 

Have all elements for all 3 designs only once in the code and use CSS to either show or hide them depending on the style

chosen.

 

Use an if...elseif statement and have all the required code (including shared parts) at each step. This would obviously mean shared code is in the page 3 times.

 

Use individual if.. Statements in the relevant parts of the page to only show that part of the content if you are in the correct style.

 

This is only going to affect the front page so I don't have any concerns at this moment about it causing any long-term complications.

 

Thanks

[ialsoagree]

Of the PHP solutions you listed, if/elseif/else would be the best route. You could make functions for the common elements if you didn't want to copy and paste large amounts of HTML.

 

However, I think you'd be better off using javascript to be honest. What you're asking for doesn't really require any backend work at all, and javascript would give you the advantage of allowing the user to change the style without even needing to reload the page. Just have the javascript change the HTML of the page to fit the appropriate style, and then save their current selection in a cookie. When the page is first loading, it checks the cookie and makes any changes to the default it needs to.

 

The disadvantage would be that anyone with javascript disabled wouldn't be able to do that, but you could always put a notice that the feature requires javascript to be turned on - and honestly, most users are browsing the internet with javascript on anyway.

[Psycho]

JavaScript? Seems like a less than optimal solution. Just have the PHP code define the appropriate stylesheet/images to be used and let the browser handle it normally when it renders the HTML.

 

Have all elements for all 3 designs only once in the code and use CSS to either show or hide them depending on the style

chosen

 

You should rethink that approach. When generating for mobile devices you want to keep the size of the content to a bare minimum. Mobile devices do not have as high a bandwidth as a desktop would and people have caps on their data limits.

 

Here is the approach I would take.

 

1. Create "templates" for each display mode. The template is just the basic layout with placeholders for the various content.

2. Create code for each individual block of content.

3. Once you've determined the correct display, use the correct template that will then call the appropriate code to create the content.

 

If you have two blocks of content that are only slightly different between platforms, you can create one set of logic and have it create the content differently based upon the platform.

[ialsoagree]

JavaScript? Seems like a less than optimal solution. Just have the PHP code define the appropriate stylesheet/images to be used and let the browser handle it normally when it renders the HTML.

 

I guess it's a matter of opinion.

 

But the primary purpose of Javascript is to be able to change HTML and styles on the fly, meaning it's primary purpose is exactly what the OP is looking to do.

 

In my opinion, there's two major down sides to doing it server side: it's more work for the server, work that the client is entirely capable of doing on it's own.

 

And two, it's less efficient for the end user. Instead of simply clicking a button and seeing the layout change, they now have to reload the page to get the new style, and they have to avoid their back button.

 

IMHO, Javascript is the way to go when it comes to changing page layout. Even if 1 style only uses 5 elements, always calling 10 elements (incase the next 5 are needed) is more resource efficient than handling 2 requests, 1 for 10 elements and 1 for 5.

[Psycho]

But the primary purpose of Javascript is to be able to change HTML and styles on the fly, meaning it's primary purpose is exactly what the OP is looking to do.

 

Not even close. JavaScript is a programming language. It's primary purpose is to enhance the user experience with features/functionality that a static page cannot. Sometimes that involves changing HTML content or Styles.

 

If JavaScript is the main method of setting the styles for a page then CSS wouldn't exist. CSS is the primary/best method of setting the styles for a site. What you are suggesting is replacing stylesheets with JS. It takes about 1 billionth of a second to change the stylesheet on the server.

if($platform=='mobile')
{
    echo '<link rel="stylesheet" type="text/css" href="http://domain.com/styles/mobile.css" />'
}
else
{
    echo '<link rel="stylesheet" type="text/css" href="http://domain.com/styles/desktop.css" />'
}

 

Then there's the problem with maintainability. When you need to make a change to the style you can just open the stylesheet(s) and make your changes the the appropriate classes. If you do that in JavaScript it would be much harder.

 

It also goes against the philosophy of separating business logic from the content.

[ialsoagree]

Not even close. JavaScript is a programming language. It's primary purpose is to enhance the user experience with features/functionality that a static page cannot. Sometimes that involves changing HTML content or Styles.

 

If JavaScript is the main method of setting the styles for a page then CSS wouldn't exist. CSS is the primary/best method of setting the styles for a site. What you are suggesting is replacing stylesheets with JS.

 

To use your words, "not even close." I never suggested such a thing, never even came close. CSS can't be used to change CSS, which is what I stated Javascript is used for.

 

Read my statement again (emphasis added):

 

But the primary purpose of Javascript is to be able to change HTML and styles on the fly, meaning it's primary purpose is exactly what the OP is looking to do.

 

Javascript is primarily used to change HTML and page styles on the fly (at least in the context of websites), which "enhance(s) the user experience with features/functionality that a static page cannot" - your statement literally agrees with mine, mine just explains how it does that.

 

It takes about 1 billionth of a second to change the stylesheet on the server.

 

But an ENTIRE page call - which would be necessary if the page loads, then the user changes tyles - can require hundredths or even tenths of a second of server time.

 

Not to mention, it takes even more user time to process the HTTP request, so you're wasting user time, and it creates an erroneous history entry in their browser.

 

Using javascript takes the same time as the server request, but eliminates the HTTP request (well, perhaps not entirely if a new CSS file has to be loaded), eliminates all the server processing, and there's no erroneous history in the browser.

 

Then there's the problem with maintainability. When you need to make a change to the style you can just open the stylesheet(s) and make your changes the the appropriate classes. If you do that in JavaScript it would be much harder.

 

It also goes against the philosophy of separating business logic from the content.

 

Since this is a response to a misinterpretation of my position, I will acknowledge that I read it, but allow the rest of my statement to stand on it's own.

 

@MargateSteve, whatever solution you want to choose is fine. There's nothing inherently wrong with manging style changes using PHP. I'm simply trying to provide you a more effective solution using Javascript. The javascript solution will be more stream lined for the end user, and require less processing for your server. It's a win/win.

 

But it's not absolutely necessary.

 

Sorry this thread has become so derailed.

[MargateSteve]

Thanks for the responses. I will rule out the JavaScript approach for now, simply because I am still on my php learning curve and really haven't got the spare time to start learning another language. It is something I want to explore at sometime, mainly to add additional rows to tables that populate form dropdowns on the fly.

 

I think the suggestion of the multiple if....elseif using functions for the shared code will be the route I go down at this moment, unless anyone can convince me that there is a better/faster/more server friendly way using php/CSS.

 

Thanks again

Steve

[ialsoagree]

I think the suggestion of the multiple if....elseif using functions for the shared code will be the route I go down at this moment, unless anyone can convince me that there is a better/faster/more server friendly way using php/CSS.

 

That's a perfectly fine decision! In my opinion, the if, elseif is the best route to take if you're going with a PHP solution. Let us know if you need any further help with that.

 

Just to clarify, the javascript solution will still use CSS and HTML just like your page currently does, it simply handles the switching of styles on the client side rather than the server side, but your decision is fine.

 

If you ever want to get started in Javascript, I highly recommend the W3Schools page for Javascript, it taught me basically everything I know about Javascript, it only takes about an hour to go through and try some of the examples, and Javascript is an immensely powerful tool for enhancing your webpages. When you get into AJAX, you can really see how powerful Javascript and PHP can be together.

 

Best of luck to you! 

[Christian F.]

ialsoagree & MargateSteve: Please read this site.

 

As for the issue: I'd do what Psycho stated. Leave JavaScript out of it, and use CSS to define the styles. Browsers nowadays can be told to load different stylesheets for different devices and resolutions, so take advantage of it.

If you don't really care about the bandwidth usage, you don't even need any PHP to accomplish what you want. Just put display: none on the elements you don't want to show.

[ialsoagree]

If you don't really care about the bandwidth usage, you don't even need any PHP to accomplish what you want. Just put display: none on the elements you don't want to show.

 

You're incorrect.

 

You need to read what the OP asked. He specifically stated he wants to offer users the ability to switch between page layouts. Without PHP (or another backend programming language) that's not even possible. Javascript can handle that at the front end, but I agree, it is not the only solution, and not the best if MargateSteve isn't familiar with Javascript.

 

MargateSteve, your decision to use PHP is perfectly fine and will work great.

[Jessica]

When it comes to desktop vs mobile, you do that by having two separate stylesheets and using the media parameter

[ialsoagree]

When it comes to desktop vs mobile, you do that by having two separate stylesheets and using the media parameter

 

Agreed, doesn't help you when you want to switch between multiple desktop layouts, just like the OP stated, however:

 

I had seen that before and had a browse through but I don't think it covers what I am trying to do.

 

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

3. Mobile version which has the title for 10 news items

 

Which gets back to my original point: changing the layout of a webpage is most efficiently done using javascript, that's why it was made in the first place.

 

[Jessica]

You still use separate stylesheets, just like CSS Zen Garden does.

[ialsoagree]

You still use separate stylesheets, just like CSS Zen Garden does.

 

Never said you wouldn't.

[Jessica]

But they do it without javascript. You don't need to and probably shouldn't use JS for this.

[ialsoagree]

But they do it without javascript. You don't need to and probably shouldn't use JS for this.

 

 

You don't need to, no. But if you want to make client side changes to the layout of the page, you're going to have a tough time convincing someone who knows their stuff that JS is the wrong solution.

 

Please, tell me what is the benefit of calling multiple database requests instead of just 1 request, in order to change the layout of the page? That's what the PHP solution is.

 

The javascript solution is: no new pages load, no extra database queries, easier for the user.

 

If that's the wrong solution, I'll take the wrong solution as the programmer or user any day.

[Jessica]

User loads page.

User selects new style, using javascript.

User clicks on link.

User sees old style sheet.

 

Do you see the problem with using only javascript now?

[ialsoagree]

User loads page.

User selects new style, using javascript.

User clicks on link.

User sees old style sheet.

 

Do you see the problem with using only javascript now?

 

No, because I thought ahead:

 

Just have the javascript change the HTML of the page to fit the appropriate style, and then save their current selection in a cookie.

 

It helps to read the thread before commenting.

[Jessica]

You're saying change the HTML to fit the style. Do you actually mean that, or do you mean change the style sheet it refers to?

 

 

[ialsoagree]

You're saying change the HTML to fit the style. Do you actually mean that, or do you mean change the style sheet it refers to?

 

I was paraphrasing that you can change any of the HTML, including the style sheet that you've called to format the page. I would think that was intuitively obvious, but if it wasn't, I apologize for the lack of clarity.

[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?

[ialsoagree]

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.

 

If the user wants to change back, simply update the HTML/CSS again, and save the selection in a cookie using javascript.

 

You can do this as much as you want, no page loads, no queries to the database, no http requests (unless it has to load a css file).

 

This is the most efficient way to solve this particular problem, it is why javascript exists.

[Christian F.]

You're incorrect.

 

You need to read what the OP asked. He specifically stated he wants to offer users the ability to switch between page layouts.

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). Normally, this is done automatically so that the user does not have to choose.

So you should be reading more carefully yourself, before jumping to conclusions and telling others they are incorrect.

 

As for the saving of settings via cookies: You're forgetting those who block cookies, either completely or only selectively permits them. Not to mention those that have JS turned off, or either can't use it; As a lot of mobile browser doesn't have JS functionality.

Also, you're over-engineering the solution. Keep it simple, as it's less work and higher probability of it working right.