Web layout এখন পর্যন্ত কভার করা প্রতিটা টুল শেয়ার করে, কিন্তু canvas চওড়া আর content সাধারণত scroll হয়, যা app design থেকে কিছু অভ্যাস বদলে দেয়।
mobile screen lesson-এর মতোই, একটা আসল preset দিয়ে শুরু করুন — 1440×900-এ "Desktop" সবচেয়ে সাধারণ শুরুর width। একটা ফোন স্ক্রিনের থেকে আলাদা, Frame-এর height আসলে শুধু একটা শুরুর canvas; content যতক্ষণ চলে আসল page-ও ততক্ষণ চলতে থাকে, কারণ একটা আসল webpage scroll হয়।
একটা nav bar তার parent-এ Left + Right constraint সহ Auto Layout-এর সবচেয়ে স্পষ্ট বাস্তব-জগতের ব্যবহারগুলোর একটা: logo বামে pin থাকে, মেনু লিংক ডানে pin থাকে, আর পুরো bar-টা যেকোনো browser width-এ stretch করতে পারে কোনো কিছু জায়গা থেকে না সরে।
"hero" হলো nav-এর ঠিক নিচের বড় heading আর একমাত্র call-to-action — এটাই একজন visitor প্রথম যা পড়ে, তাই পুরো page-এ এটাতেই সবচেয়ে বড় type size থাকে (এই কোর্সে আগের type scale ব্যবহার করে) আর একটাই button যা সবচেয়ে গুরুত্বপূর্ণ, ঠিক mobile screen-এর একটাই স্পষ্ট CTA-এর মতো।
একটা mobile screen যেখানে মূলত একটা vertical stack, একটা website landing page সাধারণত vertically স্ট্যাক করা horizontal section-এর একটা সিরিজ — nav, hero, একটা features row, একটা footer — প্রতিটা তার নিজের Fill container width সহ Auto Layout frame, তাই যেকোনো section-এর content বদলালে পুরো page ঠিকমতো reflow হয়।
সামনে তাকানো
nav bar আর hero section শেষ হয়ে গেলে তাদের নিজস্ব পুনরায়-ব্যবহারযোগ্য Component হিসেবে বানান — বেশিরভাগ website প্রতিটা page জুড়ে ঠিক একই header পুনরাবৃত্তি করে, আর একটা Component মানে একবার edit করলে সব জায়গায় update হয়।