Questions about starting new layouts...

User 188640 Photo


Registered User
895 posts

I don't want this thread getting out of hand so I'll address this to all of the major coders in here.

When you start a new layout how wide do you set it up? By that I mean how many pixels wide do you make your site(s).

Do you use different widths for different type sites?

After you get finished how many break points do you come up with. I read somewhere that Steve said he usually has two or three. I can't get mine down anywhere close to that.

I understand it depends on the content but just a ball park figure for reference would be great.

I'm posting this in here rather than RSD because this is the original starting point and I think this is where this should be discussed.

If any of the admin think this should be elsewhere please move it and let me know where and why.

Thanks,
Ernie
A Rose is Just a Weed in a Corn Patch!
User 187934 Photo


Senior Advisor
20,190 posts

Once again don't design your site based on a screen size or a number of break points. Make the site look good at all screen sizes and it won't matter. The only other thing that might affect you is the size of the screen on the pc your designing on. I have been bouncing back and fourth between two different laptops and one of them has a smaller screen but I started out on the larger screen so I have to use the preview mode a lot to verify how things are looking at that wider size on the smaller screen.
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 188640 Photo


Registered User
895 posts

So when we first start a new project and have no break points set that's what the site will look like at any full resolution?

Then if I'm working on my laptop which has a lot smaller view than my desktop if I want a break point farther out than the display do I have to use the arrow keys to get the slider out to the size I want my break point?

I have done a little research and found some different widths that people use to build sites and that's the main question I have. I'm sure some of these widths were used before wide monitors and anything responsive.

When setting the max width is there an upper limit that we should set that at?

The first site I built with RLMP was set at 1200px and the client is still getting compliments over a year later on how good their site looks. :D



A Rose is Just a Weed in a Corn Patch!
User 187934 Photo


Senior Advisor
20,190 posts

The max width I think is the only thing to consider because of your design screen size.
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 188640 Photo


Registered User
895 posts

Eric,

That's kind of what I thought but wanted to ask anyway. So, just design and decide where the first break point needs to be.

Thanks,

Ernie
A Rose is Just a Weed in a Corn Patch!
User 187934 Photo


Senior Advisor
20,190 posts

Ernie Hodge wrote:
Eric,

That's kind of what I thought but wanted to ask anyway. So, just design and decide where the first break point needs to be.

Thanks,

Ernie

Correct. Make the site on your pc so it looks great. Move the slider and make everything look good as you move the slider by adding break points and adjusting each elements properties.
I do want to state that this isn't a free for all and you should still build your site at the large size keeping in mind that it will need to look good on smaller screens also. This will help reduce the number of break points and help keep your site lean and mean for small screens that may be loading on a slower connection.
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 188640 Photo


Registered User
895 posts

No free for all. :D
A Rose is Just a Weed in a Corn Patch!
User 271657 Photo


Ambassador
3,816 posts

Ernie, to get started, maybe think about how many columns* would work for your content.
For example:
Wide screen = 4 (or 3)
Small laptop = 4 ...still OK, maybe a breakpoint to adjust the font size and margins, but when they start to look too narrow...
Tablet = 2
Small screen =1

* the text/content col-spans over the base 12/16 column grid.

If you start with a pretty clear pattern in mind, you won't need to throw in random breakpoints all over the place. ;)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 188640 Photo


Registered User
895 posts

Paintbrush,

I hadn't thought about it that way. Thanks.
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,454 posts

Just to make the confusion complete: Do we also have to design for Apple watches from now on?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.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.