Layout Suggestion
Hello 👋🏻
I actually thought about “okay, this all look good on wide screen but what about mobile devices?”
So I am here 😁
What would be your approach for these boxes in mobile version? Images on the top of the text or text above image etc.?
Image Link:
https://media.discordapp.net/attachments/1242555864343253023/1244930589598023710/image0.jpg?ex=6656e776&is=665595f6&hm=6afdcfbcfdd0a9a1223d5f86037598ebf853182388b82eaa97cf028d2bc5897b&
21 Replies
U mean "above" or "below"? 😄 I prefer images above the text 🤔 if its necessary to add all images to mobile version..
The common approach is that you use images above the text, this works well for maintaining readability. It makes sure that both the img and text are visible withour excessive scrolling. But if you want the users to focus on JUST texts it is better to use text above image
Then it is just texts if i remove images 😅
But this images are inside of a blob so it made me wonder is it a good approach since I also have a label above title text
Ik. Don't remove(/hide) all, but some of them?
I only have two images
😅
an easy rule of thumb for making your mobile layout, is just to imagine everything inside square boxes, that can be stuffed into a 1/3ish wide rectangle area
so, in the first section, it is pretty easy to see how it will shrink down, simply by moving everything into the center and adding a bit more height
as for images or text first, basically you want to break up your text as much as possible with visual interest (ie images or icons or accents). So in the case of this design, I would say to put the images first since you have no imagery in your hero section
but as a final word of caution. Images work best when they are connected to the web page in some way. These images are just kind of 'generic anime chick', and they don't really add a lot of context to what the purpose of your page is. It might be good to do a few more graphical iterations here, to try and find something a bit more representative
Ahh ok then it doesn't matter 😄 I thought there's gonna be more pages and images and this is just a sample. Yeah two images isn't problem at all. Just put them above text 👍
It is apps’ images so yeah but I got your point
Alright thanks 😁
@Neo Did you design that? It looks phenomenal.
Yes I did
It won’t be drag on desktop, it will be scroll. I just didn’t know how to achieve it with snap scroll on figma so I did it like that 😅
I mean currently many interactions are missing such as scale etc. I will just code them on css so yeah :thumbup:
good luck. something like tailwind will be quite helpful I'd say. it's a little better than working on vanilla CSS.
do you have a dribble/ behance page where you post your designs?
also, that's clip-path you're using for copping the images right? I should use it more on my websites. I does make a big difference.
I actually like raw css
Yeah, masking the image
I don’t 😅
I see. Good thing CSS has gotten a lot better recently with nesting and all.
it's just my opinion but I think you should.
Yeah, I mean I could have used tailwind css but I don’t know
I don’t like using style on html
I separate my files as much as I can to work clean
style on html is the exact reason i use it. I started getting mental fatigue trying to think of class names all the time. it was holding be back.
To me, clean code is much more important than just saying “lemme finish it fast as i can”
I see 😅 i mean :root exists
oh I didn't mean the
<html>...</html> tag specifically. I meant putting class names on all the tags in my document. I tried BEM but it's still tiring.
also, sorry about moving the discussion away from the original topic.It’s fine 🙂