I rebooted my first responsive web site to be a single page app (SPA). The user downloads a single HTML file (index.html), all of the CSS, and all of the JavaScript one time. Then, the content of that page changes as the user clicks on links. The links do not load new pages. The links use JQuery to load new content into the current page.
Here's the link to the rebooted site:
http://www.socialhope.info/
Here's the link to a zip file containing all code in the site (in case you want to download and play around with it):
http://www.socialhope.info/code/SocialHope_REBOOT.zip
I based my rebooted site on the example Nathan developed at:
http://rd.radile.com/rdweb/SocialHope/index.html. Credit given where credit is due. :-)
Here are 3 issues to consider.
**************************************
ISSUE 1: My site is about as simple of an SPA as you can possibly get.
Because my site is so simple, all I needed was JQuery to make things work. If you plan on building a more complex site, or a site that may start simple and become more complex over time, you should probably consider using a JavaScript framework to build it as an SPA. Here are some links to a few examples
https://angularjs.org/ (Angular 1)
https://angular.io/ (Angular 2)
http://emberjs.com/
https://www.sencha.com/products/extjs/#overview
https://facebook.github.io/react/
http://durandaljs.com/
If I didn't include your preferred framework, please reply and let people know about it.
**************************************
ISSUE 2: Turning my site into an SPA has negative implications for search engine optimization (SEO).
My site loads only one HTML file (index.com) and then dynamically changes the content of the page. Consequently, although the content of the page changes, the URL does not. The URL always stays the same as:
http://www.socialhope.info/index.html. This means web crawlers only see one file for my website-the index.html file-and this file does not contain any of the content. So, web crawlers cannot record any content from my site for use in search engines like Google or Bing.
I don't care about SEO for this particular site. My site is going to be very small (7 pages of content), and I strongly doubt my site will ever be popular enough to register in the big search engines. I'm developing this site for my son and for a few friends with whom I have frequent conversations about the meaning of life. But...if SEO is important to you, you may want to look into the implications for SEO more deeply.
**************************************
ISSUE 3A: Turning my site into an SPA made it a little more complicated to handle site navigation.
Nathan's code at
http://rd.radile.com/rdweb/SocialHope/index.html was a great start. However, it had toggle behaviors for the mobile drop-down menu that I did not like.
Here's how to replicate one toggle behavior that I did not like:
1. Open a browser.
2. Navigate to
http://rd.radile.com/rdweb/SocialHope/index.html.
3. Reduce your screen size until the mobile menu icon appears. However, don't click on the mobile menu icon.
4. Click on the "Care for Each Other" link located down in the content of the page.
The content care.html is loaded successfully, but the drop-down mobile menu is opened. The user has to click the X icon to close the mobile menu.
Here's how to replicate another toggle behavior that I did not like:
1. Open a browser.
2. Navigate to
http://rd.radile.com/rdweb/SocialHope/index.html.
3. Maximize the browser screen.
4. Click on the "Care" link in the navigation bar at the top of the page.
5. Reduce the width of the browser screen until the mobile menu appears.
When the mobile menu appears, it is open, with the links showing. This will be a user experience problem for users with larger tablets. If a user gets the navigation bar in landscape orientation, but gets the mobile menu in portrait orientation, then it will look like switching from landscape to portrait opens the mobile menu drop-down list. The user has to tap the X icon to close the mobile menu. This annoy me.
The issue is a line of code in the JavaScript ht_html function:
$(".nav-button,.primary-nav").toggleClass("open");
This line of code toggles the mobile menu. This line of code is necessary to make the mobile menu work correctly when the user clicks on a link inside the mobile menu drop down list. However, it also causes the toggle behaviors described above.
My solution was to create another JavaScript function called c_html. This function did not include the line of code $(".nav-button,.primary-nav").toggleClass("open"). I then called the c_html function when users clicked on links inside the navigation bar and on links inside the content of the page.
Just beware that navigation in a responsive SPA can be a little more complicated than a traditional web site designed for desktops only.
**************************************
ISSUE 3B: Here's another example of how having an SPA made site navigation a little more complicated.
My site has a navigation bar across the top for larger screen sizes. The active link in the navigation bar is always a light blue. For example, when you click the Care link in the navigation bar, it becomes light blue to indicate you are looking at the content for Care. When you click the Accept link in the navigation bar, it becomes light blue to indicate you are looking at the content for Accept.
Before my site was an SPA, I accomplished this by having a CSS class selector (class="active") for the navigation link of the current page. So, in the index.html file, the navigation link for the Care page looked like this:
<li class="active"><a href="care.html">Care</a></li>
And in the accept.html file, the navigation link for the Accept page looked like this:
<li class="active"><a href="accept.html">Accept</a></li>
My CSS styleshsheets then assigned a light blue background color to whichever link had the class="active" selector.
This strategy no longer worked when I turned my site into an SPA. Remember, my site is now one HTML file (index.html). I can't put the class="active" on different links in different HTML files. I only have the one list of links in the index.html file.
My solution was to create a JavaScript function called page_style that changes the background of the navigation bar links based on what content is being loaded into the page. You can download the code in the zipped file from the link at the top of this email if you want to see how it works. Look for the socialhope.js file in the js directory.
BTW-you won't see changes in the color of the links in the drop-down mobile menu. I was able to change them using JavaScript, but I did not like the result.
Thanks,
Kelly Cookson
IT Project Leader
Dot Foods, Inc.
1.217.773.4486 ext. 12676
kcookson@xxxxxxxxxxxx<mailto:kcookson@xxxxxxxxxxxx>
midrange.com
