#888 Improve the interview page

Merged
eal merged 7 commits from fix/supporter-page into master 3 months ago

Here is my proposal for the interview page layout tweaking:

  • Moved styles to the interview.less file
    • Makes them re-usable
  • Fixed the portrait image
    • I don’t know how it should like; but the kind of crashed circle doesn’t look well
  • Fixed images/videos in general
    • Now using the brand new “figure” thing
  • The “star dividers” are now horizontal
    • IMHO it fits better into the flow
  • I played around with the “supporter footer” (image of community meeting and supporter button)

Have a look at the screenshots attached.

Not done, yet: Mobile layout. I’ll do that in the next days.

Here is my proposal for the interview page layout tweaking: * Moved styles to the `interview.less` file * Makes them re-usable * Fixed the portrait image * I don't know how it should like; but the kind of crashed circle doesn't look well * Fixed images/videos in general * Now using the brand new "figure" thing * The "star dividers" are now horizontal * IMHO it fits better into the flow * I played around with the "supporter footer" (image of community meeting and supporter button) Have a look at the screenshots attached. Not done, yet: Mobile layout. I'll do that in the next days.
max.mehl was assigned by mweimann 4 months ago
eal was assigned by mweimann 4 months ago
reinhard was assigned by mweimann 4 months ago
mweimann added the
design
label 4 months ago
reinhard commented 4 months ago
Collaborator

It looks to me as if some of the styles in the new less file are not actually used.

Also there are some styles defined which are not actually specific to interviews: For example, we want videos inside a <figure> to be 100% in width so the shadow looks good, that’s not related to the fact whether the video is on an interview page or on a different page. There might be other cases where something similar holds.

For the image in the top quote box, I wonder whether we couldn’t reuse the class=“with-image-right” used in the testimonials page.

It looks to me as if some of the styles in the new less file are not actually used. Also there are some styles defined which are not actually specific to interviews: For example, we want videos inside a `<figure>` to be 100% in width so the shadow looks good, that's not related to the fact whether the video is on an interview page or on a different page. There might be other cases where something similar holds. For the image in the top quote box, I wonder whether we couldn't reuse the class="with-image-right" used in the testimonials page.
mweimann commented 4 months ago
Poster

It looks to me as if some of the styles in the new less file are not actually used.

I’ve cleaned that up. Thanks.

Also there are some styles defined which are not actually specific to interviews: For example, we want videos inside a

to be 100% in width …

I’ve moved that to the figure styles

For the image in the top quote box, I wonder whether we couldn’t reuse the class=“with-image-right” used in the testimonials page.

I tried that (see screenshot). Somehow we have the quote box here. So I tried to integrate the image to the box. Otherwise it looks a bit “unfinished”.

With the last commit I also added some mobile optimizations.

> It looks to me as if some of the styles in the new less file are not actually used. I've cleaned that up. Thanks. > Also there are some styles defined which are not actually specific to interviews: For example, we want videos inside a <figure> to be 100% in width ... I've moved that to the figure styles > For the image in the top quote box, I wonder whether we couldn’t reuse the class=“with-image-right” used in the testimonials page. I tried that (see screenshot). Somehow we have the quote box here. So I tried to integrate the image to the box. Otherwise it looks a bit "unfinished". With the last commit I also added some mobile optimizations.
eal commented 4 months ago
Collaborator

thank you very much @mweimann for the work and the screenshots, they are very useful here. The mobile version looks really good with Crptie’s picture squared and 100% width, thank you!

Some comments:

  • the sidebar should be the same sidebar as in /testimonials.html and not only the supporter button.
  • I think we can remove the links bewlow the quote-box (to the video and to the interview) as they are anyway following directly after. If we decide to keep them I would let them look in the same style as on the testimonials-page
  • our fsfe-logo is rotated 90 degrees clockwise
  • in the desktop-version the picture of cryptie looks a bit weired and misplaced. In the best case it could be included into the grey box, I guess.

thank you!

thank you very much @mweimann for the work and the screenshots, they are very useful here. The mobile version looks really good with Crptie's picture squared and 100% width, thank you! Some comments: * the sidebar should be the same sidebar as in /testimonials.html and not only the supporter button. * I think we can remove the links bewlow the quote-box (to the video and to the interview) as they are anyway following directly after. If we decide to keep them I would let them look in the same style as on the testimonials-page * our fsfe-logo is rotated 90 degrees clockwise * in the desktop-version the picture of cryptie looks a bit weired and misplaced. In the best case it could be included into the grey box, I guess. thank you!
reinhard commented 4 months ago
Collaborator

@mweimann thank you for the update! About using with-image-right for the picture, I think I wasn’t clear enough. What I meant is like this:

<blockquote>
  <div class="with-image-right">
    <img class="img-circle" src="/picturebase/people/2018-cryptie-300px.jpg" alt="Cryptie"/>
    <p>
      “I am Cryptie, ...”
    </p>
  </div>
</blockquote>

This way we could make the picture round like we have it at other places, and would be integrated into the grey area of the blockquote, the mobile version would also look good (I think), and we would not need any new classes for that.

@mweimann thank you for the update! About using with-image-right for the picture, I think I wasn't clear enough. What I meant is like this: ```html <blockquote> <div class="with-image-right"> <img class="img-circle" src="/picturebase/people/2018-cryptie-300px.jpg" alt="Cryptie"/> <p> “I am Cryptie, ...” </p> </div> </blockquote> ``` This way we could make the picture round like we have it at other places, and would be integrated into the grey area of the blockquote, the mobile version would also look good (I think), and we would not need any new classes for that.
mweimann commented 4 months ago
Poster

@eal please see the list discussions as well.

the sidebar should be the same sidebar as in /testimonials.html and not only the supporter button.

I think we can remove the links bewlow the quote-box (to the video and to the interview) as they are anyway following directly after. If we decide to keep them I would let them look in the same style as on the testimonials-page

I’ll update that later

our fsfe-logo is rotated 90 degrees clockwise

Jep. It looks out of place if it’s not rotated. It’s now horizontally. From the design point of view I agree with Reinhard about the logo. For me the rotatet version is a compromise. In my opinion there are only two options for the dividers: horizontal version or no divider icon. If we should not use the logo as divider I would add some more spacing to the headings and remove the logo completely.

in the desktop-version the picture of cryptie looks a bit weired and misplaced. In the best case it could be included into the grey box, I guess.

It is like in the first screenshot at the top of this ticket. The other screenshot was only for Reinhards point about trying to use the CSS class from the testimonials page.

@eal please see the list discussions as well. > the sidebar should be the same sidebar as in /testimonials.html and not only the supporter button. > I think we can remove the links bewlow the quote-box (to the video and to the interview) as they are anyway following directly after. If we decide to keep them I would let them look in the same style as on the testimonials-page I'll update that later > our fsfe-logo is rotated 90 degrees clockwise Jep. It looks out of place if it's not rotated. It's now horizontally. From the design point of view I agree with Reinhard about the logo. For me the rotatet version is a compromise. In my opinion there are only two options for the dividers: horizontal version or no divider icon. If we should not use the logo as divider I would add some more spacing to the headings and remove the logo completely. > in the desktop-version the picture of cryptie looks a bit weired and misplaced. In the best case it could be included into the grey box, I guess. It is like in the first screenshot at the top of this ticket. The other screenshot was only for Reinhards point about trying to use the CSS class from the testimonials page.
eal commented 4 months ago
Collaborator

I am fine with removing the logo as a separater at all

regarding the first screenshot, that looks fine to me as well.

I am fine with removing the logo as a separater at all regarding the first screenshot, that looks fine to me as well.
mweimann commented 4 months ago
Poster

Next try. @eal @reinhard

See screenshots from the desktop/mobile version.

Next try. @eal @reinhard See screenshots from the desktop/mobile version.
reinhard commented 4 months ago
Collaborator

If @eal agrees with this design, I absolutely do so as well!

If @eal agrees with this design, I absolutely do so as well!
eal commented 3 months ago
Collaborator

Hi @mweimann, thanks for the proposal, that looks pretty great to me. Only one thing: Is it possible to have cryptie’s picture squared in the mobile-version like proposed here: https://git.fsfe.org/FSFE/fsfe-website/pulls/888#issuecomment-5288

while have the rounded-picture for the desktop version like now in your latest proposal here? https://git.fsfe.org/FSFE/fsfe-website/pulls/888#issuecomment-5356

That would be amazing!

Hi @mweimann, thanks for the proposal, that looks pretty great to me. Only one thing: Is it possible to have cryptie's picture squared in the mobile-version like proposed here: https://git.fsfe.org/FSFE/fsfe-website/pulls/888#issuecomment-5288 while have the rounded-picture for the desktop version like now in your latest proposal here? https://git.fsfe.org/FSFE/fsfe-website/pulls/888#issuecomment-5356 That would be amazing!
reinhard commented 3 months ago
Collaborator

Just some input on this:

@eal I would be worried that it doesn’t look good on larger mobile devices like tables. Please you look at the current testimonials page and make the browser window smaller until the display switches to picture above text. Now imagine the picture would be full width and sqare. I think it would be way too big. However, if the picture is not full width, I think it looks better rounded than sqared.

Just some input on this: @eal I would be worried that it doesn't look good on larger mobile devices like tables. Please you look at [the current testimonials page](https://fsfe.org/about/people/testimonials.en.html) and make the browser window smaller until the display switches to picture above text. Now imagine the picture would be full width and sqare. I think it would be way too big. However, if the picture is not full width, I think it looks better rounded than sqared.
max.mehl commented 3 months ago
Owner

I also very much like the current proposal of @mweimann! :heart:

I also very much like the current proposal of @mweimann! :heart:
eal commented 3 months ago
Collaborator

@reinhard I see your point and I think you are right. Maybe we could have something like: small screesn: square medium sized and bigger screens rounded?

@reinhard I see your point and I think you are right. Maybe we could have something like: small screesn: square medium sized and bigger screens rounded?
eal commented 3 months ago
Collaborator

ok, thanks all for the fruitful discussion, I am merging now!

ok, thanks all for the fruitful discussion, I am merging now!
The pull request has been merged.
Sign in to join this conversation.
Loading…
Cancel
Save
There is no content yet.