9 Replies - 486 Views - Last Post: 05 January 2014 - 04:48 PM

#1 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 62
  • Joined: 18-August 13

Navigation question>SEO+UI+separation+easier dev

Posted 29 December 2013 - 02:51 PM

Hello. Happy holidays to all. :)/>

I am thinking of re-designing my website. The navigation system is my main concern. I want it to be user & SEO friendly. Also, I haven't done any major changes in a long time and since than I have learned new techniques. Particularly in code separation and to make changes easier and developing new portions easier. This is acuatually a contunation of this post here.

In that thread I created a new folder for experimental purposes and created a mock of my site where each internal link opened a page in an iframe. I know~BAD, *slaps hand* I was promptly corrected to do it another way. Since then I made kind of the same thing happen but with PHP and no iframe. Because most the pages on my site are the same in most of the sections like header, footer and nav., why not do this to save time. This way, most of my pages, I only have to worry about the content and not the layout. My main concern was the pages title showing up in the browsers tab and when a user goes to add it to their favorites. I fixed this with my new way and also have total separation of codes. YAY!

However, I wonder if this new way is detrimental to good SEO and UI in the long run. For example: I used to get to my site pages like this>example.com/about/faqs but now it's like this>example.com/index.php?page=faqs. Will this matter much to a web spider or user?

I've heard you can open new pages in part of a page without reloading the page with AJAX &/or JQuery. But, I'n not too familiar with either of those yet.

Anywho, here is a link to my experimental nav system>myohio.net/test4.

You will be able to view source on all pages except index.php, so I am including the code for that here>
<?php
if (isset($_GET['page'])) {    
    $page = $_GET['page'];			
}
else {
	$page = 'home';
}
$output = file_get_contents("frame.html");
$replace = array("PAGE_TITLE", "HEADER", "MENU", "BODY_TITLE", "PAGE", "FOOTER", "CSS", "JS");
$with = array();
switch ($page) {
case "about":
	$pagen = 1;
	break;
case "contact":
	$pagen = 2;
	break;
default:
	$pagen = 0;	
}
// titles array:
$title = file("page_titles.txt");
$with[0] = $title[$pagen];
// header:
$with[1] = file_get_contents("head.html");
// menu:
$with[2] = file_get_contents("menu.html");
// body titles array:
$b_title = file("body_titles.txt");
$with[3] = $b_title[$pagen];
// pages:
$with[4] = file_get_contents($page.".html");
// footer:
$with[5] = file_get_contents("foot.html");
// css file:
$with[6] = "style.css";
// javascript.
$with[7] = "test.js";
// put it all together:
$output = str_replace($replace, $with, $output);
echo $output;
?>


Thank you for reading, etc. Any info, advice or criticism will be handled by the management(appreciated:P). LOL

Is This A Good Question/Topic? 0
  • +

Replies To: Navigation question>SEO+UI+separation+easier dev

#2 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 62
  • Joined: 18-August 13

Re: Navigation question>SEO+UI+separation+easier dev

Posted 01 January 2014 - 12:01 PM

I've checked out the source of my live example and it seems the only page you can view is frame.html(again this is at>myohio.net/test4) and it only shows it with the other pages loaded into it so I will include it here along with a couple of the individual pages for clarity.
Here is frame.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PAGE_TITLE</title>
<link rel="stylesheet" type="text/css" href="CSS">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="JS"></script>
</head>
<body>
<div id="container">
	<p>container</p>
	<div id="header">		
		HEADER
	</div>
	<div id="main">
		<p>main</p>
		<div id="side_nav">
			<p>side nav</p>
			MENU
		</div>
		<div id="page">
			<p>page</p>
			<h2>BODY_TITLE</h2>
			PAGE
		</div>		
	</div>	
	<div id="footer">
		<p>footer</p>
		FOOTER				
	</div>
</div>
</body>
</html>

Here is home.html
<div class="page">
    <p>Home page info.</p>
</div>

Here is page_titles.txt>
[code] My Ohio Home
About My Ohio
Contact My Ohio[code]
Here is head.html>
[code]<p>header</p>
<h1>Site Title</h1>[code]

Eh, screw it, here is the whole thing in zip to download>"in attached file"
test4.zip
Was This Post Helpful? 0
  • +
  • -

#3 astonecipher  Icon User is offline

  • Major DIC Head
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,516
  • Joined: 03-December 12

Re: Navigation question>SEO+UI+separation+easier dev

Posted 01 January 2014 - 03:10 PM

What issue are you having? I have built several index pages like this and looked at yours. It looks to be operating as it should; but I coming off of a NyQuil induced comma.
Was This Post Helpful? 1
  • +
  • -

#4 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 62
  • Joined: 18-August 13

Re: Navigation question>SEO+UI+separation+easier dev

Posted 04 January 2014 - 12:44 PM

View Postastonecipher, on 01 January 2014 - 10:10 PM, said:

What issue are you having? I have built several index pages like this and looked at yours. It looks to be operating as it should; but I coming off of a NyQuil induced comma.


Ha, I'm sorry to hear that you are sick. I had the flu myself a month ago. I want to upload and attach the whole project as a zip but I don't think I can upload a file or attach them because I don't have enough posts yet.

Anyway, I made a newer version and it's at myohio.net/test5 and there is link to download the whole project as a zip to see all my files. Remember this test project is just to test a new navigation system. My main question is this: Is this a viable solution for good SEO and user interface? And if so, what is the easiest way to implement this system throughout my website?

I have changed the links from index.php?something=some variable to linking to actual pages with name IDs. For example test5/about is the link and the actual page is about/index.php. Unfortunately, I have to include the whole frame folder for each link and each link I add, I must edit the menu and foot.html files.

Thanks :)/>
Was This Post Helpful? 0
  • +
  • -

#5 astonecipher  Icon User is offline

  • Major DIC Head
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,516
  • Joined: 03-December 12

Re: Navigation question>SEO+UI+separation+easier dev

Posted 04 January 2014 - 01:08 PM

You just need to use mod_rewrite. Do you have a custom .htaccess file already setup for the page?
Was This Post Helpful? 1
  • +
  • -

#6 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 62
  • Joined: 18-August 13

Re: Navigation question>SEO+UI+separation+easier dev

Posted 04 January 2014 - 04:22 PM

View Postastonecipher, on 04 January 2014 - 08:08 PM, said:

You just need to use mod_rewrite. Do you have a custom .htaccess file already setup for the page?


No, I've never worked with that before.
Was This Post Helpful? 0
  • +
  • -

#7 astonecipher  Icon User is offline

  • Major DIC Head
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,516
  • Joined: 03-December 12

Re: Navigation question>SEO+UI+separation+easier dev

Posted 04 January 2014 - 04:52 PM

create a txt file named ".htaccess" and put this in the file,

<IfModule mod_rewrite.c>

RewriteEngine on

RewriteBase /

RewriteRule ^(Home|Contact|About)/?$ index.php?page=$1

</IfModule>


Here is a page that goes a little more in depth if you need to look at htaccess files.
Was This Post Helpful? 1
  • +
  • -

#8 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 62
  • Joined: 18-August 13

Re: Navigation question>SEO+UI+separation+easier dev

Posted 05 January 2014 - 11:09 AM

View Postastonecipher, on 04 January 2014 - 11:52 PM, said:

create a txt file named ".htaccess" and put this in the file,

<IfModule mod_rewrite.c>

RewriteEngine on

RewriteBase /

RewriteRule ^(Home|Contact|About)/?$ index.php?page=$1

</IfModule>


Here is a page that goes a little more in depth if you need to look at htaccess files.


Ok, so I just place that file in each of the folders: about, contact & the main folder and I won't need the whole frame folder in the other folders?
Was This Post Helpful? 0
  • +
  • -

#9 astonecipher  Icon User is offline

  • Major DIC Head
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,516
  • Joined: 03-December 12

Re: Navigation question>SEO+UI+separation+easier dev

Posted 05 January 2014 - 11:14 AM

If you place it in your root directory it works for everything in that directory.
Was This Post Helpful? 1
  • +
  • -

#10 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 62
  • Joined: 18-August 13

Re: Navigation question>SEO+UI+separation+easier dev

Posted 05 January 2014 - 04:48 PM

View Postastonecipher, on 05 January 2014 - 06:14 PM, said:

If you place it in your root directory it works for everything in that directory.


Oh, ok. Thank you. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1