I have looked a bit here, but could only find solution for wordpress or similar.
I have a rather minimal website that features two entirely different approaches for mobile and desktop users.
Ideally, I would like to serve two completely different websites to these two categories of users. Less ideally, I would settle for serving two different landing pages to the two users.
How can I achieve this? Either php, or javascript, or any other solution would do, as long as it is fully working (i.e. I can reproduce it from here without going too crazy with learning new things). The simpler the better as I am not the most skilled in web development (and that's fine, this is a minor artsy project that I'm doing for fun).
EDIT:
An attempt using jquery and the code suggested
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyPage</title>
<style type="text/css">
html,body {height:100%;width:100%;margin:0;padding:0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="mobile-container">
mobile
</div>
<div id="desktop-container">
desktop
</div>
<!-- This script switches based on the detected screen-->
<script>
$(document).ready(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
jQuery('#mobile-container').show();
}else{
jQuery('#desktop-container').show();
}
});
</script>
</body>
</html>
You should use two different container with different html according to desktop or mobile view. By default make both container display:none
Then use jquery for change the view.
jQuery(document).ready(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ) {
jQuery('#mobile-conatiner').show();
}else{
jQuery('#desktop-conatiner').show();
}
});
Related
I want to print my styles inline in head tag using php. I am almost finished, but I discovered that my styles are gone on IE8 (I assume that on earlier versions too). What I've found is that, the problem appears when 3 stylesheets are printed (no matter what order) - bootstrap.min.css, font-awesome.min.css and theme-style.css. Last one is from my template. When I comment one, or two of those, no matter which, then everything is working great (I mean the three selection above). Another fact is that if I link them, everything works great again.
Why do i need that? For increase my page speed.
Above I pasted my source from index.php. Example I published on my testing website where you can see how it is displayed.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<?php
$styles = '';
$styles .= file_get_contents('bootstrap.min.css');
$styles .= file_get_contents('theme-style.css');
$styles .= file_get_contents('font-awesome.min.css');
?>
<style type="text/css">
<?php echo $styles; ?>
.test1{color: #F00; background: #ccc;}.test2{color: #0F0;}.test3{color: #00F;}
</style>
<!--[if lt IE 9]>
<script src="/html5shiv/dist/html5shiv.js"></script>
<script src="/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="test1">
testing something
</div>
<div class="test2">
Lorem ipsum
</div>
<div class="test3">
John Doe
</div>
</body>
</html>
I dread answering this... But here goes...
Page Speed by Google is only an idea. It is a concept. It is not the reality of the internet. You can very much hurt your site by including the files into the index page. Why? Because in doing so you are increasing the size of the index page. It will be increased into so large a size that it requires multiple retrievals. In doing so you will introduce a problem instead of solving one.
When a browser asks your website for information several things happen. I am going to break them down into simple concepts.
Browser: Give me http://www.example.com
Server: Here is the index page:
Browser: I see I need to grab the page and it is 200K because the style sheets are part of the page. Give me the index page.
Server: Here you go:
Hops between the server and the index page: We see this data is big. We are going to break it into chunks. Three of them to be exact.
Browser: Oh, jeez! Wait.. wait... wait.. Okay, now I have all three chunks. Lets render what I have!
This is why Page Speed is NOT the end all to getting good results in Google. For an example look at your competition who have the results you are trying to achieve. They might have scores of 64, 78, 82, 90... And all of them, even the 64 in RED is beating you in the results of a search.
What you could achieve is user experience that gets them to keep coming back which is probably why your competition with a 64 score is beating you.
What he is doing:
Browser: Give me index page.
Server: Here you go, but it has the style sheets linked and same with javascript.
Browser: No problem! Since they are all separate I will request them all at the same time: index.php, file1.css, file2.css, file3.css, javascript.js
Hops between them: Cool, you want a bunch of small chunks. We can route those through various open gateways between the user and the server and get them all there in less time than it would take if you included them all into the index page.
User: Ahh... everything loaded in like .8 seconds which is lighting fast!
I apologize of this question has been asked before. I tried searching around, but was unable to find a relevant answer (probably due to my relatively small "web-design vocabulary").
I've noticed that the majority of websites have at least one--if not more--standard "objects" (or whatever the actually name is for them) on almost all of their pages. For instance, Stack Overflow has the same logo and tabs (Questions, Tags, Users...) on every page. I'm assuming that there's a less painstaking way to set this up other than simply copying and pasting the same code over and over, especially when ease of modification becomes a factor. As far as I know, CSS can't do accomplish this level of style generalization, so I'm assuming a server-sided language like PHP is part of the equation.
I'm not really looking for a very specific answer. What language--or type or language--as well as a brief synopsis of at least one way to achieve some sort of "object pasting" will be sufficient.
Like others said, this is a major reason why people go from HTML to something like PHP, at first just to split up parts of your page.
Yes, you can do exactly that. What I usually do (if I'm not using a framework) is create a folder in my directory like this:
inc/header.php
inc/footer.php
inc/menu.php
index.php
Then in index.php you'd need an include like:
<? include('inc/header.php'); ?>
<h2>Welcome to my site</h2>
<p>We're happy to have you</p>
<? include('inc/footer.php'); ?>
And in inc/header.php:
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
</head>
<body>
And in inc/footer.php:
<div id="footer">
<h2>Thanks for visiting</h2>
</div>
</body>
</html>
And so on for inc/menu.php
Then for other pages on your site, do the same includes for header, footer, and menu, and just write your page-specific content between the includes
Just an alternative to PHP:
Use Javascript or jQuery.
$( "#footer" ).load( "includes/footer.html" );
Another alternative is to use SHTML, which is basically HTML with inserts.
An easy way to do this is to create separate files for different sections of your page then instead of pasting the same code on each page use
include ('yourfilename.php');
to add the code in yourfilename.php at that point in the php file. This also makes it easy to modify that section and have your changes be reflected on all the pages that use yourfilename.php
For example, you can make one file called page_top.php and another called page_bottom.php. Then on each of your various php pages you can include('page_top.php'); near the top and include('page_bottom.php'); near the bottom. The code within these files will then be executed on each of your content pages.
There are of course other methods but this is a super easy way and you should look into this first.
An example of include would be:
header.php
<!DOCTYPE html>
<html>
<head>
<stuff><stuff>
</head>
<body>
<div id="mybanner">Design and logo that is common on all pages</div>
content/contact.php
<div id="bulk_of_the_html">
The rest of your stuff goes here
</div>
foot.php
<div id="footer_common_to_all">This is your footer content that is common to all pages</div>
</body>
</html>
To use would be something like:
contact.php
// This is your common to all pages header
include("header.php");
// This can be changed up as content switches
include("content/contact.php");
// This is your common to all pages footer
include("foot.php");
HTML imports or Webcomponents is a new way to do this completely at client side using HTML, JS and CSS. Write a component and reuse it in every page. But it uses ShadowDom, means not search indexable yet.
<link rel="import" href="header-banner.html">
<!-- use this in body -->
<header-banner></header-banner>
You have two solutions
Use include('....php') or require('....php') or include_once('....php') or require_once('....php') php functions to add external sections/modules into your web page(php).
You can call this functions at the position where you want the extremal module/part to be appeared.
include("Header.php"); // call to external module
// your body goes here
<h1>.......</h1>
<p>........</p>
.....................
include("Footer.php"); // again to another module
Or its better if you can go for a MVC framework where you can combine multiple modules and views into one output page...(ex Codeignitor/Cakephp...)
so... Is this a safe way to use internal links on your site.. By doing this i have the index page generating the usual php content section and handing it to the div element.
THE MAIN QUESTION: Will google still index the pages using this method? Common sense tells me it does.. But just double checking and leaving this here as a base example as well if it is. As in.
EXAMPLE ONLY PEOPLE
The Server Side
if (isset($_REQUEST['page'])) {$pageID=$_REQUEST['page'];} else {$pageID="home";}
if (isset($_REQUEST['pageMode']) && $_REQUEST['pageMode']=="js") {
require "content/".$pageID.".php";
exit;
} // ELSE - REST OF WEBSITE WILL BE GENERATED USING THE page VARIABLE
The Links
<a class='btnMenu' href='?page=home'>Home Page</a>
<a class='btnMenu' href='?page=about'>About</a>
<a class='btnMenu' href='?page=Services'>Services</a>
<a class='btnMenu' href='?page=contact'>Contact</a>
The Javascript
$(function() {
$(".btnMenu").click(function(){return doNav(this);});
});
function doNav(objCaller) {
var sPage = $(objCaller).attr("href").substring(6,255);
$.get("index.php", { page: sPage, pageMode: 'js'}, function(data) {
("#siteContent").html(data).scrollTop(0);
});
return false;
}
Forgive me if there are any errors, as just copied and pasted from my script then removed a bunch of junk to simplify it as still prototyping/white boarding the project its in. So yes it does look a little nasty at the moment.
REASONS WHY:
The main reason is bandwidth and speed, This will allow other scripts to run and control the site/application a little better and yes it will need to be locked down with some coding. --
FURTHER EXAMPLE-- INSERT PHP AT TOP
<?php
// PHP CODE HERE
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class='siteBody'>
<div class='siteHeader'>
<?php
foreach ($pageList as $key => $value) {
if ($pageID == $key) {$btnClass="btnMenuSel";} else {$btnClass="btnMenu";}
echo "<a class='$btnClass' href='?page=".$key."'>".$pageList[$key]."</a>";
}
?>
</div><div id="siteContent" style='margin-top:10px;'>
<?php require "content/".$pageID.".php"; ?>
</div><div class='siteFooter'>
</div>
</div>
</body>
</html>
No, this is not search engine friendly. You're using JavaScript to get content from the server and display it on the page. Although search engines are getting better with handling JavaScript generated content they still can't handle this (unless you follow Google's crawlable Ajax standard but sites have been moving away from that most notably Twitter this past month).
So this is bad for SEO. Plus you're not saving as much bandwidth as you think. The savings are minimal and with bandwidth being so cheap this is completely unnecessary. In fact, you spent more money making your site inaccessible by taking a normal action (page load) and made it convoluted by using JavaScript to do it then you would have saved in bandwidth costs.
Yes, this is search engine friendly and a good example of progressive enhancement. Because the links are still crawlable and load the same content as with JavaScript so Google, and any user without JavaScript enabled, can still find the content just fine. Your users with JavaScript will get the added benefit of a faster page load since they don't need to wait for the whole page to load when they click the link.
It is unclear what the SEO impact is. Google now interprets some javascript. So it is possible - but not guaranteed - that Google can still read these links. Usually people want to hide the links to pages like "About". So if Google can't read these links you may actually get an SEO advantage. That is more pagerank gets concentrated on pages you care about. Some big sites actually generate links to such pages using javascript for this reason.
Once live you can check if Google found the links by looking at links to the about us page in Webmaster tools.
i think the anchors are okay, but you should improve the server-side script as it outputs just the main content, not the whole page.
by checking $_SERVER['HTTP_X_REQUESTED_WITH'] you can distinguish between an ajax-call and a "normal" request. this is a header set automatically by jquery.
if an ajax-call is made, output the main content, otherwise output everything: the doctype, the html-tags and all the fun stuff that's between them. so everybody gets the content, even crawler and other visitors without javascript.
further info: http://davidwalsh.name/detect-ajax
example:
<?php
$pageID = isset($_POST['page'])
? $_POST['page']
: "home";
if ( !$_SERVER['HTTP_X_REQUESTED_WITH'] ) {
require('content/components/header.php');
}
require "content/" . $pageID . ".php";
if ( !$_SERVER['HTTP_X_REQUESTED_WITH'] ) {
require('content/components/footer.php');
}
?>
with content/components/header.php:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class='siteBody'>
<div class='siteHeader'>
<?php
foreach ($pageList as $key => $value) {
if ($pageID == $key) {$btnClass="btnMenuSel";} else {$btnClass="btnMenu";}
echo "<a class='$btnClass' href='?page=".$key."'>".$pageList[$key]."</a>";
}
?>
</div>
<div id="siteContent" style='margin-top:10px;'>
and content/components/footer.php:
</div>
<div class='siteFooter'></div>
</div>
</body>
</html>
I have just launched a site (using Joomla and a custom template), which doesn't display that well in IE7 (and I guess below too). I have looked around and have found out that you can link to different style sheets from my index.php, however, instead of linking to a different style sheet, I want it to link to the older site which is still live (under www.mydomain.com/old).
Is that at all possible?
As stated in the title, I have looked around and found out that you could use an if statement like this -
<!-- [if lte IE 7]><"LINK TO OLD SITE"/><![endif]-->
is what I'm trying even possible? I haven't got anywhere with it so far, trying the usual html tags of href="http://www.mydomain.com/old"
Any help would be great on this. I'm just getting stuck at the moment!
Conditional comments are used in the client-side part of your page, and so are not useful for PHP. You can use a conditional comment with JavaScript like this:
<!— [if lte IE 7]>
<script type="text/javascript">
top.location.href = "http://www.mydomain.com/old";
</script>
<![endif]-->
The disadvantage of this is that you are performing this task on the client machine, which is slower than if you performed the redirect on the server and sent to user to a different page instead. You can do this using PHP by checking the browser version and redirecting with header:
$browser = get_browser();
if($browser->browser == 'IE' && $browser->majorver <= 7) {
header('Location: http://www.mydomain.com/old');
}
Bear in mind that for this to work you must call header before any data is sent to the client.
Well, much reasonable would be to catch IE7 users before they started to render the page.
So it could be done with server-side script either with some mod_rewrite. Would be easier and faster.
I used Google to find this.
The objective of this technique is to enable redirects on the client side without confusing the user.
...
In HTML and XHTML, one can use the meta element with the value of the http-equiv attribute set to "Refresh" and the value of the content attribute set to "0" (meaning zero seconds), followed by the URI that the browser should request.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Tudors</title>
<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />
</head>
<body>
<p>This page has moved to a <a href="http://thetudors.example.com/">
theTudors.example.com</a>.</p>
</body>
</html>
I would like to apologize at first instant for asking some stupid question(well not the case for me), but i cannot help it out. i must admit i do not know jQuery but i do have the basic understanding of Javascript and i am a dedicated PHP developer. i don't have any problem understanding the HTML or css. when it comes to jquery i lag it and i dont have enough time to learn it because of the deadline i have to meet.
to start with i developed an application using php and purchased a template from themeforest, now it has some nice and beautiful javascript code the problem is i do not know how to make it work. even though it lies right infront of me. here is my code in the login page. where i want to use this jquery
<link rel="stylesheet" type="text/css" href="css/basicblack.css" title="styles5" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/supersleight.js"></script>
<script type="text/javascript" src="js/jquery.example.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/styleswitch.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$(".block").fadeIn(1000);
$(".msg-error").fadeIn(1000);
$(".msg-warning").fadeIn(1000);
$('.msg-error').supersleight();
$('#username').example('Username');
$('#password').example('Password');
});
/* ]]> */
</script>
and now i want to use the fadein effects for the class msg-error and msg-warning in my code, it is not working, here is the combined code with PHP logic which i have used.
although with this i am able to get the desired result like it will show the error if the field is empty or invlalid username and password. but i am unable to use that fadein effect. how do i do that?
<div id="wrap">
<?php if(isset($_POST['login'])) { if( empty($_POST['username']) || empty($_POST['password'])) { ?>
<div class="msg-error">
<img src="images/icons/22/messagebox_warning.png" alt=""/>
<p>Please fill in all of the fields!</p>
</div>
<?php } }?>
<?php
if( isset($_POST['login'])) {
if( !empty($_POST['username']) || $_POST['password']) {
if( !check_login($_POST['username'], $_POST['password'])) {
?>
<div class="msg-error">
<img src="images/icons/22/remove.png" alt=""/>
<p>Wrong username or password!</p>
</div>
<?php } } } ?>
As grossvogel suggests, it is likely that the elements are not hidden to begin with. Bear in mind that if you hide them with CSS, they will be less accessible to users without JavaScript. You could do something like this instead:
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$(".block").hide().fadeIn(1000);
$(".msg-error").hide().fadeIn(1000);
$(".msg-warning").hide().fadeIn(1000);
$('.msg-error').supersleight();
$('#username').example('Username');
$('#password').example('Password');
});
/* ]]> */
</script>
This type of approach is known as progressive enhancement.
My guess is that these items are not fading-in because they're visible to start with. Use simple CSS (display:none) to hide them, then the jquery fadeIn calls should display them once the page is loaded.
update
As others have pointed out, it's probably better to hide the messages with js instead of css, to allow users withough javascript to see the messages.
I'm just guessing here, but the problem might be that, given what I can see here, your "msg-error" divs are already displayed, so they can't be faded in. Try modifying your jQuery like so:
$(document).ready(function(){
$(".block").hide().fadeIn(1000);
$(".msg-error").hide().fadeIn(1000);
$(".msg-warning").hide().fadeIn(1000);
$('.msg-error').supersleight();
$('#username').example('Username');
$('#password').example('Password');
});
You can change these three calls:
$(".block").fadeIn(1000);
$(".msg-error").fadeIn(1000);
$(".msg-warning").fadeIn(1000);
To just this:
$(".block, .msg-error, .msg-warning").hide().fadeIn(1000);
This uses the multiple selector to get all 3 at once, and does a .hide() to hide them just before fading them in. The benefit of this is that if a user has JS disabled, they'll still get the errors, just without a fade.