مقدمة لتصميم المتجاوب

تقنيات تصميم الويب في تطور مستمر لمواكبة إحتياجات المستخدمين و لجديد الأجهزة التي يستخدمها الأشخاص لتصفح المواقع مثل الهواتف و الأجهز اللوحية، و مع تزايد عدد المستخدمين الذين يتصفحون المواقع عبر هذه الأجهزة في سنوات الماضية ظهرت حاجة لتقنية التصميم المتجاوب Responsive Design و الذي سنتاولها و بتفصيل في السطور القادمة،

ما هو تصميم المتجاوب ؟

التصميم المتجاوب هي تقنية تسمح لمواقع بتأقلم و تغير شكلها حسب قياس الشاشة الجهازة المستخدم للموقع مثل أجهزة هواتف و حواسيب اللوحية و غيرها، مثلا يمكنك عمل تصميم يعمل على لهاتف و أخر لأجهزة اللوحية و كل هذا عبر تحديد قياس الشاشة جهاز المراد عمل تنصيق له،

على سبيل مثال لو زرت موقع متجاوب ستلاحظ أن شكلة و تخطيطه مناسب لحجم الشاشة الجهاز، و ستلاحظ إختلاف شكله لو زرت نفس الموقع على حاسب مكتبي،

كيف يتم عمل التصميم المتجاوب ؟

يتم عمل تصميم المتجاوب عبرخاصية CSS media queries  و هي أحد خصائص CSS3، حيث تحدد قياس الشاشة الجهاز مراد عمل تنصيق له ثم تضيف أكواد CSS بشكل تالي،

مثال؛

[code] body { background-color: #FD004A; } @media all and (max-width:400px) { body { background-color: #00ccff; } } [/code]

هذا مثال بسيط لتغير لون صفحة عندما يكون قياس الشاشة 400  بكسل عرضاً،
ملاحظة: لتعمل خاصية تجاوب على أجهزة محمولة كهواتف يجب أن تضيف كود meta viewport في ما بين وسم head،

[code] <meta name="viewport" content="width=device-width, initial-scale=1"> [/code]

لو لاحظتم فخاصية @media أشبه بجمل شرطية If conditions في البرمجة طبعا لمن عنده خلفية برمجية و الشرط الذي يتم تحقق منه هنا هو قياس الشاشة، حيث تقول لالمتصفح إدا كان قياس شاشة الجهاز المستخدم كدا … طبق هذا التنصيق،

و لعمل تصميم المتجاوب يعمل على عدة قياسات لأجهزة يتم عمل تنصيق css لكل قياس بشكل التالي:

[code] @media screen and (max-width:1280px) { // CSS STYLE FOR DESKTOP } @media screen and (max-width:900px) { // CSS STYLE FOR TAPLETS } @media screen and (max-width:736px) { // CSS STYLE FOR PHONES } @media screen and (max-width:300px) { // CSS STYLE FOR SMALL PHONES } [/code]
و هذه طريقة متبعة لإدراج أكواد media queries داخل ملف CSS "Internal Style”، و يمكن إدراج ملف خارجي “external file” خاص ﺑ media queries بشكل تالي،
[code] <link rel="stylesheet" media="screen and (min-width: 300px) and (max-width: 600pc)" href="example.css"/> [/code]

أطر العمل و تصميم المتجاوب

لقد تحذثنا عن طريقة الأساسية لعمل تصميم متجاوب  ﺑ CSS ولكن هناك أيضا عدة أطر عمل Frameworks تسهل علينا عمل مواقع متجاوبة و أشهرها Bootstrap و Foundation، حيث أن هذه أطر العمل تعطيك أكواد جاهزة تسهل مهمة جعل موقعك متجاوباً،

مصادر مفيدة:

CSS Media Queries :MDN Mozilla Developer Network

css3 media queries:W3.org

Responsive Web Design: What It Is and How To Use It :Smashing Magazine

‏‎Bixelio‎‏