Okay, this is a design I’ve been pondering, but can’t quite seem to get my head around the best way to proceed. So this one is for @dan, who I’m sure will build us a short video showing how he’d approach it.
Go to macmost.com on a desktop. Beneath the header/menu bar, which I don’t have any design problems figuring out, you’ll see:
A promoted (two-column) card
Two columns of older cards
A right side scrolling column with a variety of different things (text, lists, form, etc.)
Now designing this by itself at desktop size seems easy enough in Elements. But where (and I think others) sometimes find ourselves stumbling is in doing (1) different sizes; and (2) night/day mode interactions (note the shading in the right column).
So, here’s my design question.
I want the macmost design described above at the desktop size.
At tablet size I want only one column of cards, but I want the top card highlighted.
At phone size I want the right column to follow the single column of cards.
I can think of several ways to approach this, but where I’m stuck at the moment is what might be the best approach. I think if @dan can step us through how he thinks this would work, it would help a lot of us.
I want the macmost setup I just described at the desktop size.
Very helpful. Moreover, the roadbumps you were hitting are the things I’d been struggling with. The whole thing about grids versus flex is where I usually get stuck. I think I learned two things by watching how you tackled it, so thank you. Now I have to do some more contemplation about new problems ;~).
Hi @dan
Always interesting to see how you go about recreating these existing sites in Elements. An observation that has me perplexed: you designed Elements to handle responsive design in the same way as the Tailwind environment it is based on i.e. mobile first … and yet when doing these tutorials you always seem to end up fighting with the programme by starting at the desktop size. With the MacMost site the very first thing you did was create an extra wide breakpoint and start there. The responsive controls for Elements are designed to inherit settings from smaller to larger screens, so by designing for the big screens first, you end up having to re-engineer the settings for those larger screens after you have finally settled on the design for the mobile screen. It doesn’t seem very efficient. I understand that in 2025 most website traffic is through mobile screen sizes, so it is probably sensible to start the design process at that point, but in reality many designers I’ve watched seem to base their designs on having lots of screen real estate available and then just squeeze it down one way or another to work on a mobile screen (often dropping things off). This leads me to think that either the designers are working the wrong way or the software is not working in the best way to fit the workflow of those designers. I am trying to change my workflow to be more mobile first (still hating it), but I remember many moons ago that there was a survey of whether forum members chose to create for mobile first or desktop first. Were the results of this published anywhere? I would be interested in seeing that or maybe repeating it.
Tofty, are you asking @Dan for a switch to toggle the responsive start point from mobile to desktop? If you don’t, I will :sweat_smile because that’s exactly the way I like to design too – big to small.
@maxoreg, yes a toggle switch to reverse inheritance order would be an elegant solution, but I suspect could be difficult to achieve with the machinery under the hood. Worth floating the idea though!
The answer to your question gets back to a different discussion we had elsewhere: depth and breadth.
I’d argue that if you start mobile first you will fight against depth and breadth on your site. The more things you stuff into the mobile design, the more it just endlessly doomscrolls. You basically end up building a large stack of things, many of which the person coming to your site on their phone will never get to. In the media we call the minimization of information “chunking,” and mobile sites work best when your content is minimal chunks.
The broader and deeper the information and options are for a Web site, the more you want to start from the wide design point first, I believe.
I picked the macmost site as a interesting starting design point because of this. Today’s macmost page has 21 things in the two-column left-hand side, and 8 things in the right column. If you simply doomscroll the mobile version with everything stacked in one column, you’d have to scroll through 26 things to get to “Popular Tutorials.”
A lot of small businesses, they just need a landing page with a small number of click-through options. I get that. However, those of us who’ve built large followings (I get >1m yearly visitors) get that because we have that breadth and depth of information. I’m always going to start design from the wide desktop view, and then figure out how to still provide good visibility and access as the screen gets smaller. I know, for example, that the news component of sites gets hit mostly by mobile, but the rest is hit mostly by tablet/desktop, where there’s more real estate. So I have clues about how to design differently on the small screen.
Either place I decide to start my design I have the problem of “fixing it” at the other extreme. At least today. I actually believe phone use will go away within a decade and be replaced by something wearable. We’ve seen the AI pin attempts, and the glasses attempts; both those suggest that today’s smartphone designs probably won’t be optimal for those. The desktop, as you can tell by Apple’s Vision headset, may actually get bigger! So the problem isn’t going away any time soon, and it is a design problem.
Thank you, that’s an excellent summary of exactly why I am struggling with going mobile first. Your later points about the future of screen sizes is also a breath of fresh air. The popularity of mobile screen sizes is simply about the convenience of a device in your pocket. If given a choice of small or large screen sizes, most people would choose to see things bigger, and I agree the next shift in convenient technology will have us going larger again.
I guess it is the mixed messaging that has me confused and why I raised the question. In the Elements manual under the Design System section it clearly states Elements is a “Mobile first design system” and “We recommend designing at the mobile breakpoint first, and working your way up through the breakpoints to support larger screens.” Yet consistently the site building tutorials for Elements are fighting this approach and start at the larger screen size. This has me feeling that the team aren’t really buying into the mobile first design approach either, but are just running with that because Elements is built within the Tailwind ecosystem.
This is not an attack on Elements nor @dan, I really like how Elements is shaping up with the drag and drop components and the excellent WYSIWIG editing screen and the preview function is simply the fastest I have ever seen. @dan’s tutorials are great - he is a good presenter and I always learn things. It’s just hard to believe in the mobile-first design system when the tutorials always go the other way (and for good reason in my view) . Obviously we could design the wireframes for all screen sizes in other software (Figma, Framer etc) and then do the builds mobile-first in Elements, and for complex sites this is likely the best approach anyway… but the more I think about it, the more I want an option for responsive inheritance to work in reverse, because that is the way many of us want to work.
Elements follows Tailwind’s mobile-first approach, so that’s the direction we have chosen to go in. It’s the “correct” way to design these days, and it does make sense in a lot of cases.
With mobile first design, everything is often just in a single column grid or flex, so I generally find it more interesting (and fun) to design the desktop version first… but perhaps I’m not setting a good example for new users Maybe I’ll go mobile first for my next tutorial and see how that works out!
Anyway, once you get into the rhythm of designing mobile-first in Elements, it becomes pretty natural, especially with the way the Elements responsive controls are set-up. Still, I totally get where you’re coming from.
Maybe I’ll go mobile first for my next tutorial and see how that works out!