Screen resolution / starting width for responsive theme?

  • Hi,

    I was working on my new web design on my notebook with 1600×900. After I done all responsive css tweaks etc, I found out that it is not enough… my design doenst look good on users most used sceen resolution 1366×768, everything looks “too big”… images, spacing/negative space, typography etc.

    So have I made a mistake in an starting point? Should I use 1366×768 as my screen resolution and to define max width, because of image sizes? Or design in max width size? Im confused ??

    Which is your screen resolution / starting width or workflow for responsive theme design?
    Thanks you

Viewing 3 replies - 1 through 3 (of 3 total)

  • Now, I get it that you may have a legitimate reason for starting from scratch instead of using a front-end library that has all these kinks sorted out already.

    But at the very least why not adopt their breakout points since they seem to work very well (judging from their popularity)?

    Bootstrap 4’s primary breakout points are:

    // Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

    They also use additional breakout points in specific scenarios. See the layout documentation here:

    https://getbootstrap.com/docs/4.0/layout/overview/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Start writing your CSS for mobile widths, then move up. Otherwise you’ll get into difficulty trying to cram layouts into smaller widths.

    For instance:

    
/* (mobile) */
.foo {
    color: red;
}

/* (tablet landscape) */
@media screen and (min-width: 768px) {

}

/* (desktop) */
@media screen and (min-width: 1024px) {

}
    Thread Starter gore.m

    (@gorem)

    @gappiah Thanks you, Im using bootstrap .-)

    @anevins Thanks you, in CSS Im mobile first.

    Im sorry. I was not clear… my problem seems not to be in CSS and small screens, but in my workflow between Photoshop X live web page X large screens.
    Because design is not “compact” during changing screen sizes.

    Here is large screen size statistic from our web site (most used to less used):
    1366×768
    1920×1080
    1440×900
    1536×864
    1600×900
    1280×1024
    1280×720

    I thought it is good idea to determine/decide for which screen resolution I will do design (in Photoshop), so I decided 1300px, but result is not pretty now on (most used) 1366×768 screen.

    So:
    – For which max-resolution are you designing web pages (in Photoshop), is there an “large screens starting width” standard?
    – Are you fixing container/wrap width to max-width based on Photoshop design?
    – If no…how deal with resolutions above resolution you chosed (like 1920×1080, 1440×900, 1536×864, 1600×900)?
    – If 1366×768 is most used screen resolution, is it helpfull/make a sence to switch my monitor (when Im in Photoshop) to that resolution?
    – Is there special workflow (starting in Photoshop) if fluid layout is used?

    Thanks you

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Screen resolution / starting width for responsive theme?’ is closed to new replies.