Framer breakpoints, और mobile पर page टूटना कैसे रोकें

Framer breakpoints तीन size में आते हैं: Desktop, Tablet और Phone। आप Desktop पर बनाते हैं, और आपके बदलाव नीचे के दोनों sizes में बहकर पहुँच जाते हैं। छोटे size पर कुछ बदलें, तो वह override बन जाता है और वहीं टिका रहता है। Framer में mobile की लगभग हर गड़बड़ी एक ही चीज़ पर आकर रुकती है, वह fixed pixel width जिसे किसी ने fill में बदला ही नहीं।

तीनों Framer breakpoints का असली मतलब

Framer के अपने product pages पर canvas के tabs Desktop 1200 और Tablet 810 लिखे दिखते हैं। framer.com पर published code भी यही कहता है। उसकी responsive images min-width 1200px के लिए, 810px से 1199.98px तक के लिए, और max-width 809.98px के लिए अलग नियमों से भेजी जाती हैं। यानी Desktop 1200 और उससे ऊपर सँभालता है। Tablet करीब 810 से 1199 तक। Phone 810 से नीचे सब कुछ। आपके layout को तीनों लाइनों पर टिकना है।

बदलाव नीचे बहते हैं, overrides ऊपर नहीं चढ़ते

Desktop पर edit करें और बदलाव Tablet और Phone दोनों में बह जाता है। Phone पर edit करें और आपने एक override बना दिया जो सिर्फ़ वहीं रहता है। Framer हर override की हुई property को highlight कर देता है, क्योंकि उनकी value अब primary breakpoint से मेल नहीं खाती और इसलिए वे बदलाव inherit करना बंद कर देती हैं। किसी एक को हटाना हो तो property के label पर click करें और Reset Override दबाएँ। इसीलिए पहले Desktop का layout पूरा करते हैं, फिर Phone खोलते हैं। वक़्त से पहले लगाया गया हर override वह बदलाव है जो आपको दो बार करना पड़ेगा।

page बाहर क्यों निकल जाता है: वजह fixed widths

Framer का इस पर एक छोटा troubleshooting article है, और वह सही बात कहता है। अगर Phone breakpoint पर आपकी site पूरी screen नहीं भरती, तो लगभग हमेशा कोई एक element phone की screen से चौड़ा होता है। दो चीज़ें देखें। एक fixed width, जैसे 321px, जहाँ आपको 100% या 1fr चाहिए था। और phone की screen से बड़ी कोई Max Width। दोनों को दाएँ panel के Size हिस्से में ठीक करें। Width को 100% या 1fr करें, और अपने content wrapper के अलावा हर चीज़ से Max Width हटा दें। फिर दोबारा publish करें, क्योंकि canvas के बदलाव live site तक publish करने पर ही पहुँचते हैं।

बाक़ी काम stack की दिशा और padding करते हैं

Phone पर ज़्यादातर horizontal stacks को vertical करना पड़ता है। stack चुनें, दिशा पलटें, और gap को desktop वाली value से नीचे ले आएँ। फिर section की padding घटाएँ। ऊपर-नीचे 120 pixel desktop पर खुला-खुला लगता है और phone पर खाली screen जैसा। और साइड में 80 pixels की padding, phone वाले visitor को text की एक पतली पट्टी पढ़ने पर मजबूर कर देती है। चालीस और बीस समझदारी वाली शुरुआत हैं। Phone breakpoint पर हर section को टहलकर देखें और जो भी चीज़ visitor से खाली जगह scroll कराती है, उसे छोटा कर दें।

type पर अलग से एक चक्कर लगाना पड़ता है

64 pixel का headline phone पर छह लाइनों में फैल जाता है और आपके button को fold के नीचे धकेल देता है। इसे layer दर layer नहीं, text style में एक बार ठीक करें। बाएँ sidebar में Assets खोलें, style खोलें, और Edit Style dialog में Breakpoints वाला हिस्सा ढूँढकर Add Breakpoint पर click करें। Framer आपको Desktop (L), Tablet (M) और Mobile (S) देता है। हर एक के लिए आप font size, line height, letter spacing और paragraph spacing तय कर सकते हैं। अपना H1 वहाँ एक बार सेट कर दें, site का हर H1 उसी के पीछे चलेगा।

इसे वैसे ही test करें जैसे visitors देखेंगे

पहले एक अजीब बात। जब कोई breakpoint आपकी browser window या monitor के resolution से चौड़ा होता है, तो Framer उसे बंद कर देता है, इसलिए छोटे laptop पर Desktop preview धुँधला पड़ सकता है। Framer का इलाज यही है कि window चौड़ी करें, बड़े monitor पर जाएँ, या publish करके live URL पर preview देखें। असली test browser में करें। window को धीरे-धीरे चौड़े से पतला खींचें। ठीक उस जगह पर नज़र रखें जहाँ कोई row फ़िट होना बंद कर देती है, और उसे breakpoint की सीमा पर नहीं, वहीं ठीक करें। उसके बाद live URL अपने phone पर, mobile data पर खोलें और पूरा page scroll करें। device emulation आपको न धीमा network दिखाएगा, न in-app browser का toolbar।

दस मिनट का responsive चक्कर

ऊपर से नीचे, एक बार में एक section पर काम करें। हर wrapper को 100% या 1fr पर सेट करें। सिर्फ़ एक Max Width रखें, content wrapper पर। Phone पर horizontal stacks को vertical कर दें। section की padding आधी कर दें। H1, H2 और body के text styles में breakpoint sizes जोड़ें। दोबारा publish करें, page phone पर खोलें, और देखें कि बिना scroll किए पहला button दिख रहा है। यह चक्कर ज़्यादातर गड़बड़ियाँ पकड़ लेता है, और दो-तीन बार करने के बाद हर page पर करीब दस मिनट लगते हैं।