One Page Responsive Design
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.
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.
This theme is already setup that way.
http://www.coffeecup.com/help/articles/take-30/#rsd
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
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
Awesome - thank you!
But how do you give it that bouncy effect - if that makes sense - it's like a transition?
-A.
But how do you give it that bouncy effect - if that makes sense - it's like a transition?
-A.
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.
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.

I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
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.
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!
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 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
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.