2025/Berlin/responsive
Responsive Web Design was session at IndieWebCamp Berlin 2025.
- Archived from: https://etherpad.indieweb.org/responsive
Watch: βΆοΈ 28:30s
Session: Responsive Web Design
When: 2025-11-01 11:30
Proposed by Ferdinand https://nandstudios.itch.io/
Participants
- Ferdinand (facilitator)
Jeremy Cherfas
Tantek Γelik
capjamesg- ... add names
Notes
- Purpose: to look at / discuss mobile responsive web design
- Responsiveness is challenging for really dense UIs
- Inspiration for showing 3D worlds on mobile: look to mobile devices to see how they are designed
- (i.e. how is Minecraft mobile the same / different from Minecraft PC?)
- Many mobile apps rely on horizontal mode to show more information to the viewer
- It may be less convenient to navigate a website in horizontal mode
- Question to ask: what is one's motivation to make a website with a desktop-first designed game UI to work on mobile?
- It would be cool if everything could be explored on mobile.
- Some Neocities sites ask you to open the website in desktop if they are specifically designed for desktop.
- It means there is little / no mobile experience, but the user at least has an instruction vs. an experience that doesn't work well.
- Google Maps may be an inspiration
- 2D display by default on mobile
- 2D maps are an established metaphor on mobile devices
- Google Maps has a version that gives buildings depth
- The Google Maps app may have features more native to mobile
- Apple Maps has a 3D view on mobile
- Tantek's mobile website
- On mobile, two columns visible on desktop collapses into a single column
- Header at top, then content stream, then content of second column goes to what was the sidebar on desktop but is now a footer on mobile
- Tantek idea: add a "back to top" link
- Experiment from Tantek: https://tantek.com/map.html
- Designed to work on any size of display
- https://ohhelloana.blog uses a grid that scales as the display gets bigger/smaller
- CSS grid
- www.andybarefoot.com has a completely different desktop design vs. mobile design
- https://indieweb.org/design has some great examples including from Andy Barefoot (expired cert)
- We should always expect someone will show up to your website on mobile
- Front End Study Hall is a good place to learn about front-end. You can bring questions and the group will chat about solutions.
- See https://indieweb.org/Front_End_Study_Hall for more information about the event
- https://events.indieweb.org/tag/frontend lists previous events that have been hosted / will host upcoming events
- Hosted every ~2 weeks
- "Everybody's carrying around a web browser in their pocket. Go make a web page!" on Joe's website t https://artlung.com
- On mobile, the artlung text grows/shrinks depending on viewport size
- Related wiki pages:
