Improve the interview page #888

mweimann · 2019-04-29T18:41:52Z

mweimann commented

2019-04-29 18:41:52 +00:00

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.

before.png

1.6 MiB

after.png

1.7 MiB

max.mehl was assigned by mweimann

2019-04-29 18:41:52 +00:00

eal was assigned by mweimann

2019-04-29 18:41:52 +00:00

reinhard was assigned by mweimann

2019-04-29 18:41:52 +00:00

mweimann added the

design

label 2019-04-29 18:41:52 +00:00

reinhard commented

2019-04-29 19:33:53 +00:00

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

2019-05-05 08:50:12 +00:00

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.

with-image-right.png

104 KiB

interview-mobile.png

705 KiB

eal commented

2019-05-06 14:16:54 +00:00

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

2019-05-06 14:58:10 +00:00

@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

2019-05-06 14:58:19 +00:00

@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

2019-05-07 17:15:16 +00:00

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

2019-05-14 20:02:00 +00:00

Next try. @eal @reinhard

See screenshots from the desktop/mobile version.

Next try. @eal @reinhard See screenshots from the desktop/mobile version.

Mobile.png

638 KiB

Desktop.png

1.7 MiB

reinhard commented

2019-05-16 07:53:05 +00:00

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

eal commented

2019-05-22 07:52:44 +00:00

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:
#888 (comment)

while have the rounded-picture for the desktop version like now in your latest proposal here?
#888 (comment)

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

2019-05-22 08:04:45 +00:00

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

2019-05-22 16:09:20 +00:00

I also very much like the current proposal of @mweimann! ❤️

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

eal commented

2019-05-23 11:01:50 +00:00

@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

2019-05-25 14:10:39 +00:00

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

eal closed this pull request

2019-05-25 14:11:47 +00:00

Sign in to join this conversation.

No reviewers

No Milestone

No Assignees

4 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: FSFE/fsfe-website#888