One Page Responsive Design

User 2693187 Photo


Registered User
167 posts

Hi guys,

A client of ours is keen on a 1 page responsive site.

Similar to below.
http://www.templategarden.com/preview/tempo/

So it will just be one page - but the navigation anchors to certain points of the site that they want.

Do you know if there's a way to do this via RSD? As it seems to have a transition attached to it somehow.

Any direction you guys can give me - would be very appreciated!
-A.
User 187934 Photo


Senior Advisor
20,266 posts
Online Now

This theme is already setup that way.
http://www.coffeecup.com/help/articles/take-30/#rsd
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2693187 Photo


Registered User
167 posts

Awesome - thank you!

But how do you give it that bouncy effect - if that makes sense - it's like a transition?

-A.
User 271657 Photo


Ambassador
3,816 posts

Keep in mind, you'll need some padding above your anchors so the content doesn't go under the fixed header area (where the nav bar is) when a link is clicked.

So, if the header is 6ems/rems tall, you'll want to put 7 to 8ems/rems padding on the section anchors:
#about-us, #contact, #services { padding-top="7ems"; } <whatever your sections are
This will allow a little space between the header and the section content.

Starting with a template is a good way to get a grip on alternating backgrounds and parallax effects. :D
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2744602 Photo


Registered User
162 posts

paintbrush wrote:
Keep in mind, you'll need some padding above your anchors so the content doesn't go under the fixed header area (where the nav bar is) when a link is clicked.

So, if the header is 6ems/rems tall, you'll want to put 7 to 8ems/rems padding on the section anchors:
#about-us, #contact, #services { padding-top="7ems"; } <whatever your sections are
This will allow a little space between the header and the section content.


paintbrush do you always work in ems? if so that's interesting mate.
KISS is the key!
User 271657 Photo


Ambassador
3,816 posts

I usually use REMs and percentages, viewport width/height, sometimes pixels.
I prefer REMs over Ems to avoid cascade/inheritance issues.

Adam, what do you mean by this : "But how do you give it that bouncy effect "?
Is it the transition of the header at scroll?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.