Responsive layout with overlapping elements

Hello!

I´m sorry if the title isn´t very clear. I have problem developing the section that you can see above. I blured the text for privacy reasons.

I tried with normal layout, changing positions to absolute; grid, putting each element (each of images and each of text blocks) in separate cells, tried combine them in the same sells (all left part and all right part). I always have the problem with website responsiveness - the most often that the arrow goes too up or too down. The last thing that I have tried is flexbox: arrow works more o less fine at least in desktop view, but the green and yellow parts have the same height and I can´t understand how to change it.

Am I moving in the wrong direction? What is the simplest/best way to develop this part?

Here is the read-only link with dummy text.

P.S. I look at read-only link and the arrow is moving again…

Thank you all.

HI @olivkadesign here is a simplest solution but as you didn’t provided how it should behave (look like) on mobile devices (tablet, mobile) it is not possible to give you “best” solution but you can take it as starting point where your element Div Block 38 stay in place.

Good luck

Thank you so much!!!

My client didn´t provide me with the design on mobile devices. Is it normal to ask him if he plans to do it?

How does it happen usually: client provides with designs for all devices or developer ajusts according to his own opinion? Or this always depends in client?

Actually we didn´t even talk about responsiveness, I didn´t think about it from the beginning. Is it something to talk about or “as a default” the design should be responsive?

Hi @olivkadesign you are right, it all depends on situation. Client may hire designer and pass on you design ready to be transformed into website.

You can offer your client to deliver both mean you create design and create website or you can hire designer and provide coding part. options are endless and all depends on clients budget. But in all cases responsiveness has to be taken in consideration since day one.

You should be in contact with designer to discussed possible changes as many designers know how to design for print but not for web. Good example are amazing designs on Dribbble or Behance that looks great on desktop but when it comes to responsiveness 85% of these designs fail to be applicable to work in responsive app without hacks and all fall down on compromises that may do client unhappy when once agreed to certain design and this design need to be changed because of technical limitation etc. etc.
All I can say it : Preparation is the king

Thank you so much for sharing experience with me!

Some more things that should be discussed from the beginning?

And undestranding “this design will not be responsive” comes with experience or there are some ways/steps to see if from the beginning?

Main meaning of Design like typography, cars, furniture, coffee machines, cans, interiors etc. is making things functional.

Designing cars has nothing common with designing furniture, design for print has nothing common with design for web as design for each require different set of skills. Webs designers should have IMO at least some knowledge of CSS and how things works in browser as it is specific topic.

One of these are technical limits as eg. each browser provider interprets Web rules different way and support of new features is done in different time. Another aspect is back compatibility with older browsers, optimization for locations with low speed internet etc. etc. Making blur on paper poster is simple but on website it will eat most of your CPU and make site sluggish. So there are things where developer should discuss things with designer to make website snappy.

Purpose of Web Design is make website functional this mean generate profit in any form like shop online, make potential customers to visit shop, destination, donate etc. All falls into few groups:

  1. Target marketing - understanding potential clients group (age, interests, sex, location etc.)
  2. UX - to convert people visiting website into potential clients (speed, accessibility, easy to get to desired website area etc.).
  3. UI - Design that represents (Typography, colors, )
  4. Branding - wrap all these above together the way that represent Story/Values that company stands for.

There is much more things about design website to be functional, so this mean you are correct about experience.

m2c

You have shared so many useful thoughts with me, thank you A LOT!

Wish you all the best!

1 Like

Hola, actualmente estoy trabajando en un sitio web. Tengo un problema con el diseño del sitio web, cada vez que actualizo la página de inicio o abro cualquier publicación, el diseño de mi sitio web se distorsiona por un tiempo. ¿Alguien puede ayudarme a solucionar este problema?
Revisar mi sitio web La competencia personal como nuevo modelo empresarial