41–50 of 202 posts
Landscape on mobile is the least well supported configuration I know. Static headers/footers commonly take 50% or more vertical space with no way to dismiss or shrink them.
> no way to dismiss or shrink them You can shrink them by rotating your phone back to the correct, portrait orientation.
The author's put forward a lot of valid criticisms of the breakpoint-based approach & also provided a really good guide to doing proper web design, but what's skipped over is that their guide only works for developer-designers, & won't fit the workflow of a large proportion (majority?) of people doing visual design for web. Those designers are have backgrounds in multimedia or have academic backgrounds in design-forward colleges with extremely poor html-css modules. And their tool is Creative Suite - largely because Adobe has a stranglehold on design education.
The likes of Sketch have shaken things up somewhat so we at least have XD, and slightly fewer people are designing entire websites in Photoshop & Illustrator alone, but even so - the ability of tools like XD/Figma to allow the designer to model their work fluidly in a way that matches web viewports is not mature, not least because Adobe have been historically hostile to the idea (XD being a very reluctant response to new competitors after already killing off Fireworks).
That masonry layout diagram is horribly deceptive. The boxes aren't to scale at all.
In this particular case, it makes the largest viewports look the smallest, and makes the smallest ones look largest. It's indeed very deceptive.
Earlier quoted context omitted.
You've never seen a 17"+ laptop I guess?
[flagged]
While this is laudable, I think it’s important to remember that a design should focus more on how the layout flows when resizing the viewport and focusing on a couple target breakpoints. I think that’s what this article is trying to emphasize.
Landscape on mobile is the least well supported configuration I know. Static headers/footers commonly take 50% or more vertical space with no way to dismiss or shrink them.
> no way to dismiss or shrink them You can shrink them by rotating your phone back to the correct, portrait orientation.
I was hoping to read some kind of solution at the end of all this huge text. Some radical way to do layouts without using viewports. Instead I got a link to buy a book from some author. Why is this even here? This is a long ad with useless data points.
I've found that on simple websites a lot of problems are solved with just a few lines of flexbox config (flex-wrap, etc)
I wish more pages took the pointer and resolution media queries into account. So many times I open windows side-by-side on my desktop and end up with the menu collapsing into a hamburger menu which fills the entire screen when clicked. Many phones today have very high DPI and very low precision in touch, so it makes sense to have massive visual elements and buttons, but my desktop with the same size in pixels as my p…
I'm very familiar with websites switching to mobile layout with hamburger menu instead of a navigation bar, when you reduce the width of the browser window on your desktop. BUT I don't think I've ever come across a resolution change where the website elements (either hamburger menu or content) get massively larger.
Can you provide an example of one or two mainstream sites that change resolution like that?
The reason I'm confused is because in CSS everything is based on logical pixels, not actual device pixels. E.g. a "1 px" width will be 2 or 3 hardware pixels wide on an iPhone. Similarly "1 em" will be 16 hardware pixels on a standard resolution display, but 32 or 48 hardware pixels on a 2x or 3x display. So web designers don't have to do anything special to accomodate hi-DPI screens in the first place.
Earlier quoted context omitted.
You've never seen a 17"+ laptop I guess?
[flagged]
Earlier quoted context omitted.
It doesn't work like that. Web browsers do not count actual pixels when rendering. They adjust high density pixels to the equivalent real life size of low density pixels.
The OP is talking about things like media queries that only look at screen width and imply other things like input method from that. IIRC SquareSpace does exactly what they're saying: on desktop sites will have a horizontal list of links but on mobile it's a hamburger icon that takes over the entire viewport when clicked. Functionality exists to target pointer type and things like that in media queries, it's just ver…
Surely this is better than cutting off the navbar and half the page content in the middle vertically, and requiring the user to scroll horizontally?