AARoads Forum

User Content => Photos, Videos, and More => Topic started by: Alex on March 19, 2015, 04:38:22 PM

Title: AARoads New Site Layout
Post by: Alex on March 19, 2015, 04:38:22 PM
With AARoads turning 15 this year, we thought it was time to finally roll out a new design for the main web site. This is not a new idea, as we've dabbled with concepts here and there since mid-2013. However turning something from concept to reality has proved difficult, and with the ever increasing number of mobile users and the desire to improve upon the mobile platform, starting over has been a common theme. However with encouragement and assistance from a number of people, CSS assistance from Kelly and a major amount of coding from Zeffy, we are finally close to having something ready for release.

We invite all forum users to take a look at the beta version of the site at http://beta.aaroads.com (http://beta.aaroads.com) - this subdomain is currently password protected. Please use the following credentials to peruse the pages - username: user and password: aaroads2015

Be advised that the majority of the images in the beta subdomain will not load, because we duplicated only a portion of the main site in the beta directory. Also several of the links may give 404's as many pages remain in an even older format still using html. Those will be converted and grandfathered in over time... With that stated, the bulk of New Jersey pages (http://beta.aaroads.com/guide.php?page=gatewaynj) are nearly fully functional and include some of the new features that will be incorporated into the new site.

Feel free to leave comments and suggestions here or use the feedback form that Zeffy created at http://beta.aaroads.com/feedback.php (http://beta.aaroads.com/feedback.php) (this is also linked from within the beta pages). Also if you notice any errors that cause a page to display incorrectly or not at all, please let us know.
Title: Re: AARoads New Site Layout
Post by: jeffandnicole on March 19, 2015, 04:57:27 PM
Username/Password (both being aaroads2015), aren't working.

Edited to say:  Do'h!!!  :pan:
Title: Re: AARoads New Site Layout
Post by: hotdogPi on March 19, 2015, 04:59:24 PM
User is "user" (without quotes).
Title: Re: AARoads New Site Layout
Post by: hotdogPi on March 19, 2015, 05:04:36 PM
Several states' pages do not exist, including New Hampshire and Vermont.

Massachusetts page errors:

1. No links.

2. Interstate miles: 0

3. State highways in Massachusetts are numbered from 1-295, with 2-digit routes being primary highways and 3-digit routes being shorter secondary highways. This is not quite true.
Title: Re: AARoads New Site Layout
Post by: Zeffy on March 19, 2015, 05:11:16 PM
For those wondering, this project was a tremendous opportunity for me, and I'd like to very much so thank Alex for giving me the chance to participate in it. Before the past few months, I had very limited experience in HTML and PHP. Where I stand now, I have enough knowledge of the systems to pretty much make any page I want. Alex was very generous in letting someone with very "eh" skills in webdesign try to help him with this. In the end however, I had an extremely good time developing the display for the site while Kelly and Alex worked on the template. Thanks to this project, I've learned a lot of knowledge that is very useful in this day and age, and without Alex asking me about it about 9 months ago (yes, it's been THAT long!) I never would be in the position I am in today. So another huge thanks to Alex for letting me handle such a massive undertaking.  :)

Now that that's out of the way, I wanted to explain to everyone the actual "scale" of this project involved, as well as introduce you to some of the new features the new site has. First, the current AARoads system for managing content is a bit haphazard. It was intended to be simple, and indeed it was. But the simplicity didn't carry over well when I envisioned much more of the content to be generated by script, and not by hand. Automation was key here - do more while doing less. In the end, the only viable option was to start from fresh.

Thanks to the advancements in both PHP and HTML, you can do a lot more while writing a lot less. Unfortunately, as said previously, the old site was written using now-depreciated functions. What that meant was I couldn't really use the old template as a guide - I had to figure out how to utilize the new functions in lieu of the old ones. That process wasn't easy. It took a lot of online training videos covering HTML, PHP, MySQL, Javascript, Jquery, and many other things before I even got a grasp on what I had to do. Many errors were made, but I didn't let them discourage me. Sure, I got angry at points, but I calmed down and found and fixed those issues. Thanks to that, I was able to keep working on the site, and now it's at the point you see today.

The old AARoads used a mixture of HTML and PHP to display it's content. It wasn't the worst idea, but it was messy. To update content, you had to use a very old editor, something which I improved almost a year ago now to help make more secure. The problem with the old editor was that it was very basic, and it wasn't very efficient. So, in addition to the front-end site you see today, I set out to upgrade and create a whole new area for content to be made. This area is one of my proudest things that I've made today. Thanks to jQuery, I was able to make this area do a lot of things without having to refresh the page. However, with the new area came the realization that the old database structure wouldn't work too well with the area. So, like everything else, we improved upon that as well.

The new AARoads has taken the messy code used to display the old site and turned it into three separate files, each of them with their own instructions on how to display certain content. This method, which ended up turning into an additional 4000-or-so lines of code, is now the backbone of the new AARoads site. With these changes, we can deliver content in not only a more dynamic manner, but we hope a nicer looking one as well. Of course, the opinions of others matters to us as well, so we are releasing the site for all to see and play with, and help us improve. After all, it's you guys that fuel our passion for striving to make AARoads the best it can be for road enthusiasts everywhere!  ;-)

Quote from: 1 on March 19, 2015, 05:04:36 PM
Several states' pages do not exist, including New Hampshire and Vermont.

Massachusetts page errors:

1. No links.

2. Interstate miles: 0

3. State highways in Massachusetts are numbered from 1-295, with 2-digit routes being primary highways and 3-digit routes being shorter secondary highways. This is not quite true.

Those are known issues. In fact, a lot of the pages won't display correctly or at all on the new beta site because of the format changes I mentioned. So in addition to designing and coding, we have to also port content into the new format, which we will start to do in the near future, once we get some public opinions of the new site.

(About the highway numbering thing... I can't remember where I got that from, or if it was just filler content that I didn't verify.)
Title: Re: AARoads New Site Layout
Post by: dgolub on March 19, 2015, 07:05:50 PM
A few things I noticed looking quickly:
* The thumbnail images don't get a link cursor when you hover over them, so users wouldn't necessarily know that they can click to enlarge.
* The thumbnail images use a bad interpolation algorithm that causes a lot of aliasing.
* The Next Picture and Previous Picture buttons don't get disabled when you reach the end or beginning of the photos.
Title: Re: AARoads New Site Layout
Post by: Zeffy on March 19, 2015, 10:13:46 PM
Quote from: dgolub on March 19, 2015, 07:05:50 PM
A few things I noticed looking quickly:
* The thumbnail images don't get a link cursor when you hover over them, so users wouldn't necessarily know that they can click to enlarge.
* The thumbnail images use a bad interpolation algorithm that causes a lot of aliasing.
* The Next Picture and Previous Picture buttons don't get disabled when you reach the end or beginning of the photos.

1. I knew I forgot to add something in! That was something I remember looking at then getting distracted. I'll add that in first thing tomorrow.
2. Some of the thumbnail images are rather glitchy. The current system pulls the full-scale versions of the picture, which may or may not be the best idea. If the photo is high-res, then it works fine. If not... well... Alex and I are working out a way to have thumbnails be separate from the actual photos themselves when the photo viewer opens.
3. They should go to the first or last photos if you click them at the beginning or end, but that doesn't always work as well. Still devising a fix for that.

Thanks for the feedback though!
Title: Re: AARoads New Site Layout
Post by: SignGeek101 on March 19, 2015, 10:23:57 PM
Somehow I think Zeffy did this:

http://beta.aaroads.com/images/404error.png

Great job on the sign. Got this page when I clicked 'Hungary' on Highway Guides. I know you're not done yet though.

Now only if it was Clearview, preferably on the whole sign including the route shield  :awesomeface:
Title: Re: AARoads New Site Layout
Post by: Zeffy on March 19, 2015, 10:30:41 PM
Quote from: SignGeek101 on March 19, 2015, 10:23:57 PM
Somehow I think Zeffy did this:

http://beta.aaroads.com/images/404error.png

Great job on the sign. Got this page when I clicked 'Hungary' on Highway Guides. I know you're not done yet though.

Now only if it was Clearview, preferably on the whole sign including the route shield  :awesomeface:

Yes, I did.  :-D  And Hungary is in that dropdown list????? Hmm... that isn't right. Any other non-US states lurking there?
Title: Re: AARoads New Site Layout
Post by: SignGeek101 on March 19, 2015, 11:30:40 PM
Quote from: Zeffy on March 19, 2015, 10:30:41 PM
Quote from: SignGeek101 on March 19, 2015, 10:23:57 PM
Somehow I think Zeffy did this:

http://beta.aaroads.com/images/404error.png

Great job on the sign. Got this page when I clicked 'Hungary' on Highway Guides. I know you're not done yet though.

Now only if it was Clearview, preferably on the whole sign including the route shield  :awesomeface:

Yes, I did.  :-D  And Hungary is in that dropdown list????? Hmm... that isn't right. Any other non-US states lurking there?

The style of the sign made it look like you did it.  :)

No, Hungary is the only one. Not sure how it got there. It would be nice to feature other countries main highways, perhaps on another section of the website, although I know that would be a task that is too large to be realistically completed.
Title: Re: AARoads New Site Layout
Post by: NE2 on March 19, 2015, 11:44:12 PM
In Massachusetts, 1xx routes were generally assigned before 1926 (when 1-2 digit numbers were reserved for New England routes). After 1926 the state began assigning numbers less than 100. So on average the larger numbers that didn't come from NE routes are more major.
Title: Re: AARoads New Site Layout
Post by: rickmastfan67 on March 20, 2015, 12:27:14 AM
Had to remove the hotlinked image on the 'beta' site since it was popping up a login prompt.  Just changed it to a normal http link.
Title: Re: AARoads New Site Layout
Post by: freebrickproductions on March 20, 2015, 10:21:14 AM
The main page is a bit broken on a computer while using Google Chrome, and I don't have a smart device I can use to go onto the site with. I think it looks pretty good overall though. I don't know if the "submit feedback" button works though.
Title: Re: AARoads New Site Layout
Post by: Zeffy on March 20, 2015, 10:28:33 AM
Quote from: freebrickproductions on March 20, 2015, 10:21:14 AM
The main page is a bit broken on a computer while using Google Chrome, and I don't have a smart device I can use to go onto the site with. I think it looks pretty good overall though. I don't know if the "submit feedback" button works though.

Broken how? The main page looks fine to me on Chrome. Also, if the feedback form isn't working, it may be because the tables required in the database never were inserted - I'll be fixing that (as well as other problems in the back-end area for the site) shortly, but apologize for the inconvenience.

EDIT: Feedback form should now be working (tested it myself, and the data was successfully sent).

Quote from: NE2 on March 19, 2015, 11:44:12 PM
In Massachusetts, 1xx routes were generally assigned before 1926 (when 1-2 digit numbers were reserved for New England routes). After 1926 the state began assigning numbers less than 100. So on average the larger numbers that didn't come from NE routes are more major.

Thanks for clarifying. I'll be amending that shortly.

EDIT 2: Amended.
Title: Re: AARoads New Site Layout
Post by: freebrickproductions on March 20, 2015, 12:27:27 PM
Must've not loaded properly earlier. It works now.
Title: Re: AARoads New Site Layout
Post by: Henry on March 20, 2015, 12:34:36 PM
This is a nice redesign!
Title: Re: AARoads New Site Layout
Post by: US71 on March 20, 2015, 02:48:10 PM
Did the Shield Generatorpage ever get fixed? It wasn't letting people download their designs.
Title: Re: AARoads New Site Layout
Post by: SSOWorld on March 21, 2015, 08:45:03 AM
Hmm - the cover photo looks a bit familiar... :awesomeface:
Title: Re: AARoads New Site Layout
Post by: Zeffy on March 21, 2015, 10:24:35 AM
Quote from: US71 on March 20, 2015, 02:48:10 PM
Did the Shield Generatorpage ever get fixed? It wasn't letting people download their designs.

I haven't touched it. That is Jake's work, not mine, and I don't know if he wants anyone to modify it.

Quote from: SSOWorld on March 21, 2015, 08:45:03 AM
Hmm - the cover photo looks a bit familiar... :awesomeface:

Speaking of those, we're going to be releasing a template soon for anyone who wants to submit their own cover photos for their favorite states.
Title: Re: AARoads New Site Layout
Post by: US71 on March 21, 2015, 01:03:51 PM
Quote from: Zeffy on March 21, 2015, 10:24:35 AM
Quote from: US71 on March 20, 2015, 02:48:10 PM
Did the Shield Generator page ever get fixed? It wasn't letting people download their designs.

I haven't touched it. That is Jake's work, not mine, and I don't know if he wants anyone to modify it.

I see we had a complaint about it yesterday from someone unable to save his design or place an order.
Title: Re: AARoads New Site Layout
Post by: cjk374 on March 21, 2015, 04:50:13 PM
Congratulations Alex on the 15th anniversary of AARoads.com.  All of y'all have done a great job on the site's revamp.  :clap: :clap:
Title: Re: AARoads New Site Layout
Post by: Alex on March 23, 2015, 10:46:39 AM
Been out of pocket for the last several days while moving/setting up internet/etc. Thanks to everyone who supplied feedback thus far! Its greatly appreciated.

Zeffy and I will continue to iron out some of the holes and try to get this fully functional. As far as some of the points made, the beta version just html resizes the full size photos into thumbnail size. The older pages uses separate files for the thumbnails, and this format will be incorporated into the new design before we fully debut it.

There is still a ton of HTML-based pages still in use on the main site, especially for the western states. So it will be a slow process to get all of these converted over, but we'll be prioritizing that as we move forward.

Quote from: US71 on March 21, 2015, 01:03:51 PM
Quote from: Zeffy on March 21, 2015, 10:24:35 AM
Quote from: US71 on March 20, 2015, 02:48:10 PM
Did the Shield Generator page ever get fixed? It wasn't letting people download their designs.

I haven't touched it. That is Jake's work, not mine, and I don't know if he wants anyone to modify it.

I see we had a complaint about it yesterday from someone unable to save his design or place an order.

I emailed Jake about it a few months ago and he thinks that the flash needs to be updated. He does not have the time to allocate toward amending it. Unfortunately, until we can find some assistance with it, the save shield image option will remain broken.
Title: Re: AARoads New Site Layout
Post by: Quillz on March 23, 2015, 01:19:03 PM
A nice start. I like the general layout and organization.
Title: Re: AARoads New Site Layout
Post by: Zeffy on March 25, 2015, 01:49:08 PM
Thanks everyone for the comments and suggestions. A lot of subtle changes have been made on the front-end of the site, but the back-end has received a hefty amount of work to improve and fix things as well. Of course, the back-end is restricted, so I can't really explain those changes, but for the front-end of the site:

Gateway Pages

The OLD banners allow us to provide our content on the new site while we migrate everything over (so you don't have to switch back and forth). When Alex and I are ready to initiate the transferring of all AARoads current content into the new database, most of the content will work straight from the transfer. However, some pages, such as the pages where you are led to choose a specific section of a route (example: I-95/NJTP from Trenton to Newark), will have to be recreated or converted manually, which will take some time. With my free time, I can devote a good amount of time to this in addition to Alex so that we may hopefully have everything available on the site within 1-2 months at max from launch.




One thing Alex and I are planning to do is allow members of the community to submit content for the main site. Those who make good submissions will be rewarded with the SITE CONTRIBUTOR badge that you may have seen on the forums.

There are two types of content we're looking for, specifically:

1. Cover Photos
Cover photos are the photos at the top of each page. You may have noticed that there are a variety of them for each state. Alex and I each made a few each, but this is a tiresome process, and we'd like there to be a wide variety of images for each state, showing fantastic views of that state's roads. The script is set up to allow pretty much an infinite allow of these photos, and variety is the spice of life, so any photos you submit would be appreciated!

There are a few rules regarding the cover photos:

2. Content Pages
As mentioned before, we're going to allow members to submit content to the site. In the future, an actual editing area may be used, but for now, you'll have to use a more substandard method.

For now, we are only accepting Feature pages for member-submitted content. In the future, we may expand this to actual entry pages as well.

Again, there are some rules to follow here, so please read them carefully:


Feature Page Name: ___________
State: ____________

--INTRO SECTION--
Main Intro: ________________________________________________
Secondary Intro: ____________________________________________

--CONTENT SECTION--
[SLIDESHOW PHOTOS]
[1]
Picture filename: _____________
Picture caption:  _______________
[2]
...
--MAIN CONTENT--
[INTERSTATES]
[1]
Content Title: __________
Is this a title row? (No picture will be displayed) _____ [Yes / No]
Picture filename (if applicable): ___________
Main content: ___________________________________________
[2]
...
[US HIGHWAYS]
[1]
...
[STATE HIGHWAYS]
...
[OTHER HIGHWAYS]
...

When you are done with the text file, please provide your photos in a folder called photos_{featurepagename} and zip the text file with your content and the photos into one zip file.

When you are ready to submit it, send Alex or I a private message with the subject "Site Content Submission". In your message, please provide a brief description of your content that you are submitting, and whether it's a feature page or a cover photo. Then, provide a link to either your photo or your zip file with your content.

Content may need refining before it is uploaded to the site. If major changes are needed, or we need your input or something, we will respond back before we upload it. If nothing else is needed and your content is good, we'll upload it when we get the chance!
Title: Re: AARoads New Site Layout
Post by: andy3175 on March 26, 2015, 12:41:21 AM
Great job Zeffy! I am really impressed. We've come a long way!

At some point, we'll get to convert massive HTML pages in California to the new format. I look forward to the day!

Thank you everyone for your interest and compliments. I am really happy that Alex and Zeffy have worked so hard on this. Their efforts have been almost entirely without me being as fully involved as I used to be. (As much as I'd like to be as involved as in the old days, real life has been keeping me pretty busy  for the past couple of years.)
Title: Re: AARoads New Site Layout
Post by: Zeffy on March 26, 2015, 09:30:35 AM
Quote from: andy3175 on March 26, 2015, 12:41:21 AM
Great job Zeffy! I am really impressed. We've come a long way!

At some point, we'll get to convert massive HTML pages in California to the new format. I look forward to the day!

Thank you everyone for your interest and compliments. I am really happy that Alex and Zeffy have worked so hard on this. Their efforts have been almost entirely without me being as fully involved as I used to be. (As much as I'd like to be as involved as in the old days, real life has been keeping me pretty busy  for the past couple of years.)

Thanks!  :) Alex told me you were busy, so no worries there. When we get out of beta, if you have the time, I can show you around the new content creation area (if Alex hasn't shown you already).
Title: Re: AARoads New Site Layout
Post by: Zeffy on April 13, 2015, 11:31:26 AM
More updates to the beta site!

General

Guide Pages

Content Additions

As usual, please continue to provide feedback on the site! Your feedback is greatly appreciated by both Alex and I!
Title: Re: AARoads New Site Layout
Post by: Neddyfram on April 14, 2015, 01:24:33 PM
Looks cool, as I though the AAroads (except the forum) does look like a 90's website.
Title: Re: AARoads New Site Layout
Post by: Billy F 1988 on April 14, 2015, 11:40:27 PM
Hey, Alex, Zeffy or Andy, you may be able to do a copy-paste of one of my Missoula area photos from the Montana guide for the new banner, or do I have to resend them to you?
Title: Re: AARoads New Site Layout
Post by: Zeffy on April 15, 2015, 09:41:54 AM
Quote from: Billy F 1988 on April 14, 2015, 11:40:27 PM
Hey, Alex, Zeffy or Andy, you may be able to do a copy-paste of one of my Missoula area photos from the Montana guide for the new banner, or do I have to resend them to you?

It depends on the resolution of the photos - anything that is larger than 1100px in width will work.
Title: Re: AARoads New Site Layout
Post by: myosh_tino on April 20, 2015, 03:47:55 PM
Hi guys!

Just saw that you took the new site layout live.  While I really liked the old site, the new one is still pretty good.  One problem I ran into today was the odd placement of the ads.  On my first visit earlier today, the vertical ad was in it's place on the left sidebar but when I went to the site just now, that vertical ad was being placed right in the middle of the page.  Here's a screen shot of what I am seeing...

(https://www.aaroads.com/forum/proxy.php?request=http%3A%2F%2Fwww.markyville.com%2Faaroads%2Fnew_aaroads_adProblem.jpg&hash=029a5d5aad52845eb9600a3deefc349a0e2cad5b)

For what it's worth, I'm viewing the site on a Windows 7 PC using the latest version of Firefox on a 1024x768 monitor.
Title: Re: AARoads New Site Layout
Post by: KEK Inc. on April 20, 2015, 03:56:41 PM
It's a good step in the right direction.  Honestly, I think there's a lot of kinks to iron out.  It still looks like a dated site. 

I'd be willing to help if warranted. 
Title: Re: AARoads New Site Layout
Post by: Alex on April 20, 2015, 04:53:20 PM
Quote from: KEK Inc. on April 20, 2015, 03:56:41 PM
It's a good step in the right direction.  Honestly, I think there's a lot of kinks to iron out.  It still looks like a dated site. 

I'd be willing to help if warranted.

With the deadline for sites to be mobile-friendly upon us, Zeffy and I have gone through a ton to get to this point. While its not 100% what we want right now (once I finished converting the remainder of the old template based pages later on tonight that is), the site will be functional and should buy us some time to work out some of the kinks, which will lead to some of Zeffy's enhancements.

The version I rolled out last night pretty much uses the same script from the old template, with the exception that I added lightbox/slideshow functionality to the older static pages to eliminate the back and forth (we also added this to all Interstate Guide pages).

As for the layout, we are open to help! We've found it hard otherwise to get advice and picked the brains of everyone we could find willing thus far. What I gathered from redesigning sites these days is to make the text large and to simplify the design. At least most of the pages load up well on my phone/tablet, with the exception of pages where we still have 3 or more photos on one row. That will stay for now until we get around to tweaking the script.

Quote from: myosh_tino on April 20, 2015, 03:47:55 PM
Hi guys!

Just saw that you took the new site layout live.  While I really liked the old site, the new one is still pretty good.  One problem I ran into today was the odd placement of the ads.  On my first visit earlier today, the vertical ad was in it's place on the left sidebar but when I went to the site just now, that vertical ad was being placed right in the middle of the page.  Here's a screen shot of what I am seeing...

For what it's worth, I'm viewing the site on a Windows 7 PC using the latest version of Firefox on a 1024x768 monitor.

Don't know why its rendering that way. Sometimes when the page first loads up for me, its wonky and I have to refresh. Not sure if that is a CSS issue, lag time, or what. I am waiting on some feedback about a interstate-guide layout change, and maybe it will shed some light on this and provide me with knowledge on how to prevent this from happening. Until then.  :hmmm:
Title: Re: AARoads New Site Layout
Post by: Zeffy on July 18, 2015, 10:07:05 AM
Hello again, today I'm pleased to announce a number of improvements to the beta site, which will be pushed live within the next coming hours when Alex can update the table structure in the database. The biggest feature is another re-writing of the frontend of the website - we are now using a much more robust system that will bridge the gap between us with limited knowledge of PHP but good knowledge of HTML to edit the site.

The new site will function just like the old beta site. However, there's been a number of improvements, ones that we think will really make it easier to navigate AARoads. Here we go:

General Changes:
Gateway Changes

If you guys have any suggestions or comments on what should be added to the main site (NOT the forums), then please post them in here. Once the main site is polished, both the Interstate Guide and the Shield Gallery will be overhauled to update them into modern standards.