Support » Fixing WordPress » is 540px content width too small?

  • Resolved SaintSinner

    (@saintsinner)


    Hello everybody. I am thinking to redesign my website and was wondering if having 540px width for content is too small?

    Is there any such thing as too small when it comes to responsive designs?

    Basically, I will be having less text and more photos from different sources on my website.

    Having a smaller image size (540px) would also reduce the loading time of the page.

    Any idea on whether it is a wise decision to make narrow content width? Given all the high-resolution mobile devices out there, will 540px be a smart move?

    Thanks.

    • This topic was modified 1 month, 2 weeks ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 6 replies - 1 through 6 (of 6 total)
  • 540 pixel is about a third of a 16 inch screen. So, in my personal opinion, yes it is too narrow.
    Suggested is generally somewhere the double of that.

    1024 actual content, 1440 container.

    But then, that is a lot about personal preference and look of your website.

    Note that image sizes of 540px is a bad idea because of social sharing. You will want something at least in the 700 pixel width, see also https://developers.facebook.com/docs/sharing/webmasters/images/
    Unless you do not plan to share your posts on social media at all, those would be the minimal sizes to go with.

    Responsive design does not mean “design as small as possible”
    It means creating markup that can re-arrange itself and shrink/grow depending on the screen size.
    For example, it might be wise to have a one-column card layout on a mobile, but on a 16 inch screen, that would look bad, and also give a bad experience, so you’d go for a 4-columns layout there, and on a 32 inch screen, maybe even with 6 columns.

    It’s all related to what you present, of course, so for example text shouldn’t be too wide, because wide text is hard to read. There I recommend some 670 pixel width max, to keep the text “in the box”, but… that is just my personal preference.

    Thread Starter SaintSinner

    (@saintsinner)

    Thanks, @bedas for your insightful suggestions. The featured image of the post will be 1200×675 (for sharing on social media platforms). The content width that I am talking about is for the actual post.

    The homepage and other pages are in a 1520 container. the actual content is on 1030.

    post layout:

    Content —– Sidebar (sidebar hidden for mobile user)
    540px —– 300px

    The rest is whitespace.

    Is it okay this way?

    Is it okay this way?

    You really have to decide this on your own 🙂

    Seeing you use 540+300 (thus 840) then it probably makes sense, yes.

    Just 540 would likely be a bit “lost” on the entire white space. But together seems like a good subdivision of the screen.

    Thread Starter SaintSinner

    (@saintsinner)

    You really have to decide this on your own

    Is a 540px image a bad idea while viewing on mobile?

    I read somewhere that 640px is the minimum width for displaying on a mobile phone. Is it true?

    I am not aware of such limitations.
    You can display things as wide or narrow as you want.

    As said, responsive design is not about fixed widths or somehow “do it as small as possible” or “do it as large as possible”
    It is about dynamic layout and widths.

    On mobile, for example, most times a 100% width (with some padding) is much better than a fixed width.
    So you don’t have to consider each and every single screen, but can show the content on different screens always filling the full available width. Then maybe at a tablet width you can start setting max-widths.

    You should look into bootstrap, it helps a lot when preparing stuff for responsivity.

    There are literally phones that are 320px wide
    You however don’t want to code that in your layout.
    See https://www.mydevice.io/#compare-devices

    You want to code it so that it looks good on a large number of screens, and on those cases, fixed things (as in pixel) are rarely a good idea.

    Hope this makes sense.

    • This reply was modified 1 month, 2 weeks ago by Beda.
    • This reply was modified 1 month, 2 weeks ago by Beda.
    Thread Starter SaintSinner

    (@saintsinner)

    Thank you so much @bedas

    I will go through the resources you have mentioned.

    Have a nice day!

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.