What is proper website width and alignment so it appears correctly on laptops, tablets, desktop computer, mobile phones, etc.?

  • 0
  • 1
  • Question
  • Updated 3 years ago
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

I have designed my website with a width of about 1400 pixels, and it looks correctly aligned on some tablet but looks small with lots of empty space on some laptops and desktops. What is the proper website alignment and page width that will appear correctly across both tablet and laptop/pc formats?
Photo of Brian4444

Brian4444

  • 70 Points

Posted 3 years ago

  • 0
  • 1
Photo of susan2829

susan2829, Champion

  • 43,192 Points 20k badge 2x thumb
Hi Brian,

There is no way to accurately build a regular website that will look right on all platforms. The only way to accomplish that is to use a responsive design. Homestead recently released their new website builder that uses responsive design and has drop down menus and lots of other bells and whistles.
The catch is that you have to rebuild your site as it isn't possible to just move your current one over.

If you have the Starter package you will need to get an Add On that will allow you to build an additional site. Once you have the new site built and are ready to switch over you can cancel the Add On. Just post in here and Drew or Todd can help you with that.

If you have the package that allows multiple sites then you simply log in to your account and click on the Add A Site option at the top right of the page. You will be asked to give the site a name. Just use anything as you will eventually switch it to your existing domain - mysitename2 or whatever. Then you will need to choose a template. If you want to start from scratch there are (almost) blank templates available. Choose one and delete all the elements and you have a blank canvas.

Be aware there is a learning curve! And given it's a new release there are some glitches, but those are being worked on by the developers. At this time there isn't a How To or Tutorials, but if you click on the Home button at the top of this page and then click on the Website Builder category you'll find lots of posts about the builder. And you always have this Forum to help you.

Happy webbing!
Photo of gravelroads333305

gravelroads333305

  • 560 Points 500 badge 2x thumb
Using a "responsive" design is no guarantee that a website will appear identical on all screen resolutions. That is somewhat misleading. There are just too many variables, (especially when using the parallax effect and other graphical bells and whistles). The only real way to insure a consistent viewing experience is to experiment with different systems, browsers, and screen resolutions as you design your site. Also, when using the new web builder, if you keep all of your important content (text, etc.) centered within the dashed vertical guides (960 pixels across), you will insure that content is visible across most if not all platforms even when backgrounds stretch, shrink (or cover) across the screen behind that content.

I understand that responsive design means you should be able to view any website on all platforms and it will look identical regardless of the device used or the monitor display resolution or the browser or the...wait...sorry...just too many variables here. Great in theory. My experience in using the new web builder anyway. Don't get me wrong. It is a fantastic and powerful tool, but even the best web builder in the world cannot make up for all of the many devices and platforms that exist. This web builder does do a lot of the important short cuts for you. Again, I am not bashing it...it is an excellent tool!

I feel many folks think they can just start designing a website here and "poof"...like magic...it will be perfect. In a simple informational site...yes, that can happen. But, if you want your site to be eye catching with animations, parallax movement, etc...you had better be prepared to do your homework and test it on many different platforms before putting it out there for the masses. It's just the "nature of the beast".
Photo of Jennifer3538

Jennifer3538

  • 1,832 Points 1k badge 2x thumb
I agree, it is a great tool and is very easy to use, unfortunately I am running into issues with the screen width. For some reason there is no scroll bar at the bottom of the screen so it is causing a bit of a problem. Hopefully they will work that out soon. Altogether though this is much better than the old sitebuilder. 
Photo of Jennifer3538

Jennifer3538

  • 1,832 Points 1k badge 2x thumb
Something I have just discovered in my own working with the new sitebuilder is that you should apparently stay within the guides on the templates while designing. The information on the sides may or may not appear, depending on the screen size and there is no scroll bar when the screen size is smaller than the sides. The scroll bar on the bottom only appears when your content is all within the vertical side guides. So on larger pages you will have the same blank, unusable space that the old site builder has. 
Photo of Jennifer3538

Jennifer3538

  • 1,832 Points 1k badge 2x thumb
Example of what I mean: 
Photo of Drew N

Drew N, Alum

  • 262,816 Points 100k badge 2x thumb
That does seem to be the case, but it was not my understanding of how it should be. It is interesting that items placed outside the guides, do relocate themselves for the purpose of the mobile site. I still have this with the developers, but do what you need to with the site. I can replicate the issue.
Photo of SanDiegoTicketExpert

SanDiegoTicketExpert

  • 1,708 Points 1k badge 2x thumb
I know the width to fit between the lines is 960.

An FYI tip I had to figure out the hard way: I was having some text do strange things if I set the text element box flush to this width, and discovered if I adjusted the padding inside the box to 2-3 then all my text problems went away. Hope this helps :)

Cheers
Photo of susan2829

susan2829, Champion

  • 43,192 Points 20k badge 2x thumb
And you've hit another one out of the park SD!

This conversation is no longer open for comments or replies.