We re-launched rotation.org with all new "responsive" code in late 2015.

Here's that announcement and explanation of why "responsive" = "awesome."


We know how frustrating it can be to view a website that doesn't adjust or "respond" to our phones and tablet screens. 

  • Unreadable fonts
  • Layout that blows past your screen edge
  • Lots of pinching and zooming
  • Functions that don't work
  • Images that blow up your screen
  • Navigational buttons that are so tiny or so big they ruin what's on the page
  • Slow loading pages on your phone's internet connection
  • ...and on and on.


And yet, half of all websites are now visited by people on their smartphones and tablets. 

Rotation.org's all-new "responsive" code answers all those problems.

As of December of 2015, no matter what type of computing device or screen size you use, our new responsive site:

♥ CONTENT responds and adjusts to your screen

♥ FONTS stay readable without having to pinch and zoom

♥ LOADS faster (a blessing for phones and data plans)

♥ And every built-in function works on every browser and device 

Our site content now properly re-aligns to the orientation and proportional size of your tablet or smartphone screen:


responsivegraphic

There are lots of other neat tricks our site now does to improve your browsing...

For example, did you notice the Blue Menu Bar now sticks to the top of your browser screen as you scroll down the page on your desktop or laptop?  In the old days, you would have had to scroll up to find the main navigational options.

That same navigational menu gets out of the way on your smartphone or tablet, becoming the standard 3 line menu icon (humorously called a "hamburger")  in the upper left corner of your smaller screen.

Trick your desktop browser into showing you how our site will "respond" to your smartphone or tablet...

Resize* your browser window to make the window smaller, and watch how the menus and content blocks reorganize themselves in your smaller window.

browserrespond

*Resize means making the browser window smaller, rather than using your browser's "zoom" feature.


From an administrative perspective...

Our new code is much more CUSTOMIZABLE and STABLE from the admin side of the site. That means we have more control over the look, layout, features, and behaviors.

From a code perspective..

Our site is now 100% "HTML5" enabled --built to the latest web code standards.

A Big Thank You goes to our Supporting Members!

Their annual membership contribution pays for the terrific site software that runs rotation.org, and our webmaster's time to customize it.

Go to Other Site Feature Topics and Tips

Attachments

Photos (2)
Original Post

A few examples of our Homepage "responds" on small screens...

1. The Title Description next to the Main Logo disappears to conserve space.

2. The Blue Menu Bar condenses into a simple drop down menu.

3. Font sizes adjust relative to your screen size.

4. Graphics shrink to fit, and you will need to tap them or pinch-to-enlarge to open them larger on your small screen.

And remember:  You can see these changes on a large screen simply by reducing the size of your browser window (not zooming, but actually making the window smaller).

Here's a graphic describing those changes:newresponsivedesign

Attachments

Photos (2)

How2WormyA Look at our Navigational Menus & Features...

For most users, the Big Blue Navigation Menu Bar at the top of the screen is familar, but it has been improved and reorganized a bit as well!    

Here's a look at some of its updated options... 

communitymenu



Below the Big Blue Menu Bar is a field of clickable links called "The Trail of Breadcrumbs."  

This too is a navigational menu –showing you where you are as you "drill down" through the website's Categories, Forums and Topics. It's a handy way to "go back one level" too.

Click to see an enlarged view of the Breadcrumbs menu,
or just scroll up to the top of this page to see it!

menu

On small screens, the menus collapse and content is reorganized to fit.

 smallscreen




Alert! Alert!

If the button next to your Profile Pic ("avatar") turns green, it means someone has left you a private message, or posted to your Profile Wall, or "bookmarked/liked" a post you made.

whatsgreenalert

Attachments

Photos (5)
This post was forked into a new topic here: Navigating & Menu Features and Tips

Add Reply

Likes and Bookmarks (0)
Post Your Question, Comment, Idea, or Resource

Rotation.org Inc. is a volunteer-run, 100% member supported, 501(c)3 non-profit Sunday School lesson ministry. All content here is the copyrighted property of its listed author. You are welcome to borrow and adapt content here for non-commercial teaching purposes --as long as both the site and author is referenced. Posting here implies permission for others to use your content for non-commercial purposes. Rotation.org Inc reserves the right to manage, move, condense, delete, and otherwise improve all content posted to the site. Read our Terms of Service. Google Ad Note: Serving the United States, Canada, United Kingdom, Ireland, Australia, New Zealand, S. Africa, and more!

Rotation.org is rated 5 stars on Google based on 55 reviews.
×
×
×
×
×