search

codingdavinci / relaunch2018

This is the new Coding da Vinci website (online since September 2020).
https://codingdavinci.de
GNU General Public License v2.0
1 stars 1 forks source link

Create Static Page FAQ #5

Closed samu-workopen closed 5 years ago

samu-workopen commented 5 years ago

Use datatype. Group questions under headings e.g. for GLAM institutions, for participants @lucyWMDE Dev need vocabulary for it

lucyWMDE commented 5 years ago

This comment about datatypes for FAQ is relevant here: https://github.com/codingdavinci/relaunch2018/issues/6#issuecomment-416944966

lohengruen commented 5 years ago

Wireframe https://www.figma.com/proto/z7Oiqiy2R3Y837Zr6Kw2pN/FAQ-Wireframe?node-id=0%3A1&viewport=161%2C55%2C1&scaling=min-zoom

Snater commented 5 years ago

In the kick-off, FAQ entries were said to contain plain text only, which is reflected in the wireframe. In the screen design, I see a linked PDF file. What kind of content(s) (files, probably links, what else?) may be part of a FAQ entry?

lohengruen commented 5 years ago

From my side, I only see text and href links in the FAQs. Is it a problem to have text formatting options, e.g. a bulleted list or headlines, inside the FAQ entries?

Snater commented 5 years ago

OK, then I would apply a rich text editor for the FAQ entry's text and add a field for external links as well as a field to upload files. (Need to distinguish between plain links and links to files, as the file needs to be uploaded somehow.)

lucyWMDE commented 5 years ago

Cool. Yes - both kinds of links and basic formatting (bold/italic etc, lists) would likely be needed. But no images etc.

Snater commented 5 years ago

I regard that basically done. Just like on the "Presse" page, the lead section ("Falls Sie noch …") is waiting for the key visuals, which will be implemented rather globally through some other ticket. But the main page content should be done. (I was just checking again, we do really have different link colours here.)

Snater commented 5 years ago

Standard header is in place. Some structural changes might remain:

@lucyWMDE It would be no problem to have blocks to put the lead text into the header as well as to place single tiles. Would the tile always be the same per page or should it be picked dynamically from a set?

lucyWMDE commented 5 years ago

Cool thx. If we do this it would be a fixed tile, selected to compliment the page content.

lohengruen commented 5 years ago

I've included alternative images in the design if you want to use the image tile.

https://www.figma.com/file/x5rNthATkj34sfY0H0VLBE/FAQ-Design?node-id=0%3A1

lucyWMDE commented 5 years ago

Are they all public domain? And can you pls provide the details of where you found.. thx

lohengruen commented 5 years ago

Actually, I can't find a proof that the image used at the moment (guy rolling his eyes) is public domain. The others are, though:

https://de.wikipedia.org/wiki/Datei:QuestionMarkWoman1922.jpg https://de.wikipedia.org/wiki/Datei:Samuel_Johnson_by_Joshua_Reynolds_2.jpg https://commons.wikimedia.org/wiki/File:Thomas_Eakins_-_Miss_Amelia_Van_Buren_-_Google_Art_Project.jpg

Snater commented 5 years ago

I can't just use the SVGs, because those embedded images won't work in IE, apart from the images should be cropped and scaled before putting them into the SVG because of file size. Probably, most compatible solution would be PNGs, but then the shadow would scale along with the image of course.

lohengruen commented 5 years ago

I'd have cropped the images anyway, but I agree its probably the easiest way to use PNGs instead. If possible, I would export the PNGs only in black and white and have the color overlay still be SVG. Is that possible in IE?

Also, I can include the drop shadow in the PNG, but it would be more flexible to do it via CSS. Is this solution viable? Someone mentions IE doesn't support DX anymore, but maybe it understands webkit by now?

Snater commented 5 years ago

That patch was frustrating, but it seems to work. Might still need some tweaks. I've tested with a plain square image so far.

As far as I am aware, IE does not support blend modes. But, in my opinion, it would be fine with IE as long as the image is displayed as a tile. I don't think it's that important that the colour is there in IE. I would also not care about the shadow in IE.

lohengruen commented 5 years ago

Agreed, the core audience is probably not a IE user and even if so, the user experience is only slightly altered.

I've uploaded two of the FAQ tiles here: https://www.dropbox.com/sh/3gvdc61mbhzis48/AACtJTKD12Kh0v_zk4qsAl0Va?dl=0 I've included versions with colour and shadow and without. The dimensions are twice as big as used on the site in order to support retina displays. (although in these examples, the images are a bit pixely since I couldn't find high resolution versions. But they look fine in 1x size.)

If you tell me what version works best for you, I can export all the tiles used throughout the site for you.

Snater commented 5 years ago

OK, cool. I've implemented the b/w version without shadow. The shadow is added per filter; For defining the colour, I have added a field for supplying the HEX value to the "extended header" layout block I had implemented to accommodate tile and lead text in the header. Technically, it's a rather complex solution, but seems to work fine in FF and Chrome. Unfortunately, it seems to require targeting IE/Edge specifically in order to hide the mask overlay, because IE/Edge does not support mask-image for defining the shape of the mask and would just display a filled square.

Snater commented 5 years ago

Just checked again. Seems to be technically done as far as I am concerned.