search

jferreira / LD-V1_Lovese-Drilling_INTERACTIVE-WEBSITE

Lovese Drilling - Across the world, local communities are fighting to stop new coal, oil and gas projects. Our common future is being decided on these carbon battlegrounds. This is the story about one of those battlegrounds. Told in 8 parts, this interactive documentary explores how one of the most vulnerable and productive ecosystems in the world could be handed over to the oil- and gas industry.
http://www.lovese.org
1 stars 0 forks source link

Functionality - Bootstrap - Mobile responsive solution #3

Open jferreira opened 7 years ago

jferreira commented 7 years ago

Port the current HTML, CSS code structure to be responsive. Use Bootstrap as base?

Currently, the site does not scale well with lower screen resolutions.

RobinvdM commented 7 years ago

Alright, let's have a look

image

Issues are: 1) Menu doesn't fit 2) Text doesn't fit 3) Episode selector is way to small

1 is probably easy. It could fit on one line, but the items would be too close together I think. I could make the text smaller but that would make it harder to tab. image

2) Is also relatively easy. The text is an image, I can make sure the maximum width is 100% of the screen. That would look like this now, because there is a large margin in the image on both sides of the text. I would have to crop the image to make this work. Or, option two, is to use plain text instead of the image on mobile. That would give more control but we'd have to look at the fonts etc.

image

3) Is pretty difficult. We could have a vertical selector instead of horizontal maybe? That would completely change the interaction though.

Thoughts?

jferreira commented 7 years ago

__

Overall, let's force the browser into landscape mode, this is not in anyway a portrait experience __

1 is probably easy. It could fit on one line, but the items would be too close together I think. I could make the text smaller but that would make it harder to tab. image

__

Let's create a left-hand side menu, and burger icon them all kinda like this

screen shot 2017-03-02 at 16 00 02 screen shot 2017-03-02 at 16 00 09

__ 2

Is also relatively easy. The text is an image, I can make sure the maximum width is 100% of the screen. That would look like this now, because there is a large margin in the image on both sides of the text. I would have to crop the image to make this work. Or, option two, is to use plain text instead of the image on mobile. That would give more control but we'd have to look at the fonts etc. image

Like your first solution, lets go with that and see how it looks

__ 3

Is pretty difficult. We could have a vertical selector instead of horizontal maybe? That would completely change the interaction though.

We should just show one ep and the interaction take up the 100% screen width , then let the next arrows push the user into each section

__

When I have time I'll visualise, the mobile response version but again should be a forced landscape mode, or tell them to rotate, anyway to query the ratio for this?

RobinvdM commented 7 years ago

@jferreira If we only support landscape mode, we could make the menu fit on one line pretty easily. Would you still prefer a hamburger menu for mobile?

image

RobinvdM commented 7 years ago

What do you think about this for the portrait notice?

image

Suggestions on the copy?

jferreira commented 7 years ago

Looks good, I can tweak the copy and graphics. last paragraph may be enough

RobinvdM commented 7 years ago

I included the first part because for most people this will be the first time visiting the site. I thought a general introduction would still be helpful

RobinvdM commented 7 years ago

But seeing it again now, maybe the last part doesn't stand out enough. Maybe if the last paragraph is bold it would be better?