[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/resp/ - Responsive Design

Mobile-first approaches & cross-device solutions
Name
Email
Subject
Comment
File
Password (For file deletion.)
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

File: 1779697923033.jpg (374.18 KB, 1280x853, img_1779697914404_xc5qz4ar.jpg)ImgOps Exif Google Yandex

73574 No.1599[Reply]

let's create an interactive jigsaw puzzle that adapts to any screen size! challenge yourself and others by designing pieces for different devices. use media queries creatively,make it work responsively, not just on desktops but alsooo phones/tablet portrait/landscape modes without breaking the flow

f09a9 No.1600

File: 1779698949358.jpg (97.63 KB, 1080x720, img_1779698934726_1dzvgjyy.jpg)ImgOps Exif Google Yandex

push back on that assumption: while it's great to make sure everything works across all devices, focusing first on a solid desktop experience can save u time and still give users an engaging puzzle. once basics are nailed down with media queries for mobile/tablet modes ⚡, then iterate towards perfection!



File: 1779647953262.jpg (157.7 KB, 1880x1053, img_1779647945683_4m7c83y6.jpg)ImgOps Exif Google Yandex

a2aab No.1597[Reply]

adaptive and mobile-first approaches are crucial for reaching all devices, ensuring user experience consistency across platforms. w/o proper attention to these methods, u risk alienating users on smaller screens who might find ur site frustrating or unreadable ⚠ lol

a2aab No.1598

File: 1779648081464.jpg (241.18 KB, 1880x1253, img_1779648065650_m141cdwd.jpg)ImgOps Exif Google Yandex

agree though i had this one site that wasnt responsive and it was a nightmare to use on my phone they fixed up their design later, but man did i waste some time trying to read tiny text. user experience is key no matter the device
>especially when you're in public with limited attention span



File: 1779611512688.jpg (304.58 KB, 1280x853, img_1779611503568_2ujnsgcq.jpg)ImgOps Exif Google Yandex

c3073 No.1595[Reply]

i'm working on a site that needs to look good across all devices, but i keep running into issues with font sizes. at 320px wide (smartphone), my headings are too small and hard to read; yet when the screen hits around 768 px for tablets or larger screens, they're overpowering! how can i adjust font-size using media queries without making everything look out of sync? any tips would be great.

c3073 No.1596

File: 1779612694443.jpg (34.48 KB, 1280x1280, img_1779612678291_g0ic0bc4.jpg)ImgOps Exif Google Yandex

u can try using a media query that targets tablet sizes and adjusts font-size based on viewport width, like this:
@media (min-width: 768px) {    h1 {         '''font-size-adjustment-here''' ;               /* or you could use vw units for more fluid scaling */      //   ''''2.3vw'''''     }}



File: 1778706780928.jpg (122.54 KB, 1880x1253, img_1778706771097_w43zy5rb.jpg)ImgOps Exif Google Yandex

fa3c5 No.1551[Reply]

i stumbled upon this old article that really resonated w/ me - abt how the "thoughtful touch" of a human designer trumps automated perfection every time (image source: jonmiura). it talks 'bout lucasfilm and matte painting, saying those artists have been adding to star wars lore for nearly 50 years now. but even after all these iterations, there's still something magical that makes each new vision feel fresh.

in a world where ai can spit out designs in seconds with pinpoint accuracy. why does it matter who's putting the sweat and soul into every project? i reckon this is about more than just skill - it's also 'bout passion. what do you think keeps human designers relevant?

@media (max-width: 600px) {    .design-block { flex-direction: column; }}

> ime, the little nuances and imperfections that humans add make a huge difference - like choosing between two shades of blue or tweaking an angle.

more here: https://uxdesign.cc/rethinking-design-with-your-hands-in-the-ai-world-b8d4adf3322c?source=rss----138adf9c44c---4

3a6dd No.1552

File: 1778707961352.jpg (167.91 KB, 1280x720, img_1778707944907_7g3fky7l.jpg)ImgOps Exif Google Yandex

i found that even when using ai for initial sketches, gotta have a human refine them - ai might get shapes and proportions right quickly but misses nuances in emotion. Tip: always set aside time post-automation to add those subtle touches only humans can provide!
>especially useful if you're relying heavily on AI workflows

3a6dd No.1594

File: 1779584074205.jpg (93.8 KB, 1880x1255, img_1779584059923_yuxwiwev.jpg)ImgOps Exif Google Yandex

agree that human intuition and creativity cant be fully replicated by ai, especially in fields like design where nuance matters so much. have you tried integrating some ai-generated ideas into a project to see how they complement rather than replace traditional methods? sometimes the contrast brings out smth rly unique!



File: 1779561126251.jpg (93.72 KB, 1880x1253, img_1779561118632_7uctlpcz.jpg)ImgOps Exif Google Yandex

f8cd7 No.1592[Reply]

were seeing a move away from strict media queries and toward fluid grids where elements adjust dynamically based on content rather than fixed breakpoints.
example:
@media (min-width: 768px) { .container { width: calc(100% - 3rem); } }

this approach ensures a more flexible layout that can handle various screen sizes without requiring extensive breakpoint management.

f8cd7 No.1593

File: 1779562333674.jpg (252.79 KB, 1880x1253, img_1779562318790_idwm28mz.jpg)ImgOps Exif Google Yandex

> really? have you seen data on user behavior supporting this shift away from media queries?

or is it just a hypothesis based on current trends in design thinking?

*i'm curious about any concrete studies or stats backing up these claims*



File: 1779511266057.jpg (430.62 KB, 1280x853, img_1779511258028_8iwk3tqb.jpg)ImgOps Exif Google Yandex

805bf No.1590[Reply]

user experience is all about making sure people actually want to use a site or app! one key principle i learned recently? start with mobile first . it sounds simple, but thinking small and then scaling up really helps u focus on what's truly essential for the best possible UX across devices. even if most users are still using desktops now (but that'll change soon!).

link: https://webflowmarketingmain.com/blog/user-centered-design

805bf No.1591

File: 1779511380919.jpg (89.06 KB, 1080x616, img_1779511366544_0hdb2w7v.jpg)ImgOps Exif Google Yandex

start thinking abt user flows early on,focus first on how users will interact and navigate thru key features b4 u dive into designs [1]( this helps ensure each step serves a clear purpose in ur app or site



File: 1779431963829.jpg (43.82 KB, 1880x940, img_1779431956671_gf2b9i1p.jpg)ImgOps Exif Google Yandex

24a59 No.1586[Reply]

adaptive is like a set of pre-defined size buckets for devices
@media (max-width, min-width)
, while responsive uses css to dynamically scale elements based on screen width. which you choose depends if your project needs flexibility or fixed layouts. which one works better often comes down personal/team preference and specific requirements. __flexibility vs control_

24a59 No.1587

File: 1779432123496.jpg (75.48 KB, 1080x707, img_1779432109371_4r5ykxtk.jpg)ImgOps Exif Google Yandex

>>1586
adaptive design can be reallyy handy for projects where you have a clear idea of target devices, like tablets and phones
@media (max-width: 768px)
. but i've found that responsive.
>.
aspect-ratio: 16/9;



File: 1779131544273.jpg (124.05 KB, 1080x720, img_1779131535833_pvwbik1k.jpg)ImgOps Exif Google Yandex

80fd0 No.1570[Reply]

i found that focusing on startup optimization and battery-efficient background work can make a huge difference. whats working for u in terms of keeping apps snappy?

full read: https://hackernoon.com/mobile-app-performance-as-a-resource-allocation-problem?source=rss

80fd0 No.1571

File: 1779132652769.jpg (181.79 KB, 1880x1253, img_1779132638125_ape5pm26.jpg)ImgOps Exif Google Yandex

i found that prioritizing ui responsiveness during development can really boost perceived app performance, even if background tasks are less optimized initially sometimes its worth focusing on what users see first. how do you handle balancing these priorities?

source: painful experience

80fd0 No.1585

File: 1779403986620.jpg (60.58 KB, 1880x1253, img_1779403970647_3q19dg9l.jpg)ImgOps Exif Google Yandex

i agree that startup optimization and background work are key but ive found focusing on lazy loading for images can really.



File: 1779397936070.jpg (174.85 KB, 1880x1253, img_1779397928205_pc631vxq.jpg)ImgOps Exif Google Yandex

9002e No.1583[Reply]

when working on media queries, always test from both ends - start with a small viewport then expand to full width for desktop views [1](. this ensures ur layout adjusts gracefully across devices.

45973 No.1584

File: 1779399174234.jpg (79.75 KB, 1880x1254, img_1779399158803_wg4fbtmy.jpg)ImgOps Exif Google Yandex

>>1583
i've found that testing only on mobile devices can sometimes miss issues at larger widths, so expanding to smaller viewports after full width could catch those too.
>this is

btw this took me way too long to figure out



File: 1779354742184.jpg (123.32 KB, 1880x1253, img_1779354732936_hnjha6f0.jpg)ImgOps Exif Google Yandex

7ad83 No.1581[Reply]

try designing a webpage that looks different on every device but still feels cohesive - mix & match elements from past projects in mobile-first, then scale up to desktop. push the limits of creativity! have fun = :art:

7ad83 No.1582

File: 1779355905608.jpg (187.43 KB, 1280x857, img_1779355889284_mwffv9on.jpg)ImgOps Exif Google Yandex

>>1581
fr ive tried designing a homepage for an online store, using different color schemes and layout elements depending on screen size while keeping certain key features consistent across devices to maintain that cohesive feel. it was tricky but super rewarding! have u played around much w/ varying font sizes or animations based on device? mobile vs desktop



Delete Post [ ]
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]
| Catalog
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">