"Stupid Questions" in Design

alanza · 2019-06-19T19:05:00.491Z

There was some murmuring in the Blogging Platforms thread for a thread for asking “dumb questions” about design.

Quotation marks because we’re all dumb sometimes, and the whole point of asking other people is to learn.

SO… this was @zebra’s question but it’s relevant to my interests: how does one properly get CSS to adjust the width of an image based on screen size for mobile?

carl · 2019-06-19T19:08:48.365Z

You can use something like

img {
  width: 90%;
}

to adjust the side based on the width of the container. There are multiple ways to go about this, but hopefully this gets you started.

bmoren · 2019-06-19T19:37:45.741Z

the vw (View Width) and vh (View Height) units are great for screen based sizing in CSS.

They are used like this:

img {
  width:100vw;
}

where percentages are changing the size based on a percentage of selected item’s parent, viewport units are a fractional ratio of the viewport (think: screen minus the UI elements).
So 1vw is 1/100th of the width of the viewport.

some nice reference:

CSS-Tricks – 5 Jun 17

Fun with Viewport Units | CSS-Tricks

Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use

CSS-Tricks – 31 Jul 18

The trick to viewport units on mobile | CSS-Tricks

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own

MDN Web Docs

CSS values and units

We hope you enjoyed learning about CSS values and units. Don't worry if this doesn't all make complete sense right now; you'll get more and more practice with this fundamental part of CSS syntax as you move forward!

LLK · 2019-06-19T20:36:14.729Z

Thank you so much for this thread, let’s keep it alive for a while.

maztik8r · 2019-06-19T20:41:31.311Z

Something to keep in mind is that images should be resized and compressed before putting up on a website.

Figure out the largest dimensions you need to support and scale down your image to that size or double that size and use higher compression to support retina screens.

Ideally you would have different sizes of your image and use the <picture> element to specify the image to use based on the screen size. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

nattog · 2019-06-19T20:42:27.882Z

read through that the other day, top stuff.

I find that a lot of my own stupid questions for coding layouts can be resolved by re-reading this permanent fixture in my bookmarks https://css-tricks.com/snippets/css/a-guide-to-flexbox/

crim · 2019-06-19T21:25:59.035Z

I highly recommend learning Sass for anyone who wants to make CSS less annoying.

Also using autoprefixer if you’re concerned about browser compatibility with modern CSS features…

edit: actually these are probably overkill if you’re just trying to build a simple personal website…so feel free to ignore everything I say

LLK · 2019-06-19T21:47:59.827Z

Right now reading all of this, I feel like I could make a perfect website in 2 minutes, but I know, I know that in a few weeks, when I’ll get started, I’ll be there, thinking I’d be unable to center this f**** “div” to save my life, shouting at this sticky footer that’s either not at the bottom or not matching the window’s heigth or not being clickable for some reason. And then, I’ll take a shower, some coffee, and will come back to this thread as calmly as I will possibly can.

zebra · 2019-06-21T16:12:31.855Z

[ https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ ]

^ this right here is the kind of stuff that drives me batty and makes me just give up.

the author recommends using a javascript function to update a custom CSS variable to use the actual window size in place of vh units because the latter are broken across browsers / platforms. then adding a listener for resize events. then adding debounce/throttling logic to the resize handler.

what the hecking frack. no wonder we end up piled-up frameworks like Bootstrap.

anyways, thanks for the tips - resources shared above have allowed me to ditch Tailwind and roll my own stuff and have it work better anyway.

otolythe · 2019-06-21T16:30:59.531Z

I highly recommend Rachel Andrew and her clear explanations of the latest CSS for layouts, responsive and otherwise: https://thecssworkshop.com/

if you want a Virgil to guide you through HTML/CSS/finally setting up your own site, she is it. her tutorials are not free but are not that expensive, and IMO it is money well spent. a few of the intro ones are free to get you started.

for DIY and as-you-go questions, I find https://www.w3schools.com/css/, and https://stackoverflow.com/questions/tagged/css invaluable.

and just generally, keep in mind that there’s always more than one way to approach a layout, so don’t feel you have to incorporate .js or whatever – you might want to, but there’s likely another way.

bmoren · 2019-06-21T17:39:01.112Z

Totally agree, CSS is insane. It’s mostly because it’s just had stuff bolted on to it over the years instead of re-imagining it for the contemporary situation. Not to mention that the android / browser fragmentation issue is real.

I feel like its at this point where there are so many approaches to the same solution that its just confusing to know where to begin or where to point your compass. It’s not like regular programming where the same tools with different logic gets you to the same result. its more like different tools with different logic gets you to the same place, but all of the different tools are called ‘CSS’

calc() in css has been just the best thing that they’ve introduced. It should be able to compensate for the issues in that article to some degree.

In my classes (I teach this stuff at MCAD ) I’ve totally eliminated so much old css and am now just teaching the following as the beginner core skills:

Core: color, font-family/size, borders, padding, margin, width, height, etc.
Units: px, vw, vh, em, calc() (a dash of % for more advanced students). An emphasis on flexible units to eliminate the need for a lot of media query resets.
Layout: css grids only
Positioning: (not teaching it anymore! - instead teaching transforms inside grids)
Transforms: translate()
Images: background / background-image
mobile: Media Queries to manipulate grid columns and rows
bonus: Css animations and transitions (so much fun power here!)

With that tool set, you can build about 90% of most things you’d want to. And likely 100% of the indistinguishably designed web that we look at most of the times these days.

Rupert · 2019-08-27T13:05:24.000Z

Hey everybody, haven’t seen a post about general web dev stuff, thought I would make one after finding a few cool tools out there.

Tachyons CSS a really cool minimal css framework. Found through Tom MacWright’s blog that he built with it, really appreciate the typography and general layout of this css framework.
Gridsome is a pretty awesome static site generator that uses GraphQL and Vue. There are obviously several similar frameworks out there for React, but as a primarily back-end leaning “full-stack” dev, I recently learned Vue and enjoy it. I recently built my blog with it.
Netlify - if you don’t know about Netlify by now, you’re really missing out. It’s an awesome site deployment and hosting tool that has one click HTTPS, easy builds, serverless functions, authentication, and more. If you feel like paying a very small amount, you can also get network level analytics.

What are some other cool or inspiring tools you’ve found out there and what have you done with them?

tehn · 2019-09-04T21:02:33.332Z

this is not exactly a blog question but a web programming question (not sure we have a general thread for that?)

we want to build a help form (for monome things) which sends us an email with some tags regarding the topic/subtopic. ideally the topic would dynamically change the sub-topics and also display a list of suggested helpful links.

this seems like an extremely common thing that is likely to have been previously done… perhaps as a javascript? does anyone have recommendations for something drop-in or with minor reworking?

LLK · 2019-09-04T21:05:32.740Z

@alanza started the thread "Stupid Questions" in Design for this kind of purpose I think? The title is maybe a little misleading but it’s been a great resource for me so far.

alanza · 2019-09-04T21:09:14.872Z

happy to change the title to something more useful if anyone has suggestions!

LLK · 2019-09-04T21:23:35.744Z

I like the title! But maybe it’s not so straightforward when you use the search engine for this kind of topic? I don’t know.

morgulbee · 2019-09-04T21:38:45.109Z

Perhaps “Stupid Questions in Web Design” would be more fitting? As opposed to sound design, module design, etc…

alanza · 2019-09-04T22:31:11.072Z

you know, I would entertain design questions of all stripes if this thread feels like it has room for it.

healthylives · 2019-09-04T22:50:08.159Z

Typeform comes to mind as an elegant third party solution. But if you’ll be doing this without an embed, your keywords would be “forms with conditional logic” or “forms with decision tree.”
Probably a js library out there. Willl give it a look when at work tomorrow.

dansimco · 2019-09-04T23:13:35.414Z

This is the kind of thing I’ve used ZenDesk for in a commercial setting. (Edit: I put this to the team at work and they came back with Typeform too)