مقدمة حول تصميم المواقع المتجاوبة: ضرورة العصر الحديث
في العصر الحالي، لم تعد المواقع الإلكترونية متاحة فقط عبر أجهزة الكمبيوتر المكتبية.
مع ظهور وانتشار الهواتف الذكية والأجهزة اللوحية وحتى الساعات الذكية، يتوقع المستخدمون أن تُعرض المواقع الإلكترونية بشكل صحيح وتوفر تجربة مستخدم مثالية على أي جهاز وبأي حجم شاشة.
وهنا تبرز أهمية مفهوم #تصميم_المواقع_المتجاوبة أو #Responsive_Web_Design.
يعني هذا النهج تصميم وتطوير مواقع ويب قادرة على ضبط مظهرها ووظائفها تلقائيًا بناءً على أبعاد وميزات شاشة جهاز المستخدم.
الهدف الرئيسي لهذا النوع من التصميم هو توفير تجربة مستخدم موحدة ومحسّنة لجميع الزوار، بغض النظر عن نوع الجهاز الذي يستخدمونه.
لا يؤدي هذا النهج إلى زيادة رضا المستخدم فحسب، بل يؤثر أيضًا بشكل مباشر على تحسين ترتيب الموقع في محركات البحث.
في الماضي، كانت العديد من المواقع الإلكترونية تنشئ نسخًا منفصلة لكل جهاز، وكانت هذه الطريقة تنطوي على تعقيدات كثيرة في الإدارة والتحديث.
لكن تصميم المواقع المتجاوبة قد حل هذه التحديات بشكل كامل وقدم حلاً شاملاً.
هذا الفصل يقدم شرحًا عميقًا للأسس وضرورة هذا النهج في النظام البيئي للويب اليوم.
إنه استثمار لمستقبل أي عمل يهدف إلى تحقيق حضور قوي ومستدام في الفضاء الإلكتروني.
هل سئمت من أن موقعك التجاري لم يحقق لك الدخل الذي يتناسب مع إمكانياته؟ رساوب، المتخصص في تصميم المواقع التجارية الاحترافية، يحل هذه المشكلة إلى الأبد!
✅ زيادة معدل المبيعات والدخل
✅ سرعة تحميل عالية وتجربة مستخدم لا مثيل لها
⚡ احصل على استشارة مجانية لتصميم موقع تجاري
اتجاهات التحول في تصميم الويب وظهور الاستجابة
تاريخ الويب يظهر أنه مع كل تقدم تكنولوجي، خضعت أساليب التصميم أيضًا للتغيير والتحول.
في البداية، صُممت المواقع الإلكترونية بشكل رئيسي بعرض ثابت وكانت محسنة فقط لشاشات سطح المكتب.
لكن مع إطلاق آيفون في عام 2007 ثم الأجهزة اللوحية، توسع عدد الأجهزة القادرة على تصفح الويب بشكل متزايد فجأة.
أوجد هذا التغيير تحديًا كبيرًا لمطوري الويب: كيف يمكن تصميم موقع ويب بحيث يُعرض بشكل صحيح على أي حجم شاشة، من هاتف صغير إلى تلفزيون ذكي كبير؟ في البداية، اتجهت العديد من الشركات نحو بناء نسخ منفصلة للهواتف المحمولة (مثل m.example.com).
وعلى الرغم من أن هذا النهج حل المشكلة إلى حد ما، إلا أن صيانة وتحديث وإدارة نسختين أو أكثر من موقع الويب كانت مكلفة ومعقدة.
وهنا، تم طرح مفهوم تصميم الويب المتجاوب من قبل إيثان ماركوت في عام 2010، وسرعان ما تم قبوله كحل فعال وشامل.
أظهر هذا النهج التحليلي أن موقعًا واحدًا فقط يتمتع بالقدرة على التكيف التلقائي يمكنه تلبية احتياجات المستخدمين والتغيرات التكنولوجية السريعة.
لم يكن هذا التحول مجرد تغيير في منهجية التصميم، بل كان تغييرًا نموذجيًا في التفكير حول تجربة المستخدم على الويب، وقد غيّر مسار تطوير الويب إلى الأبد وأكد على أهمية تصميم المواقع المتجاوبة.
المبادئ الأساسية للتصميم المتجاوب: التقنيات والأدوات
للتطبيق الفعال لتصميم المواقع المتجاوبة، هناك ثلاثة مبادئ أساسية: استخدام استعلامات الوسائط (Media Queries)، الشبكات المرنة (Flexible Grids)، والصور المرنة (Flexible Images).
استعلامات الوسائط هي قدرات في CSS3 تسمح لك بتطبيق أنماط مختلفة بناءً على خصائص الجهاز (مثل عرض الشاشة، الارتفاع، الاتجاه، والدقة).
على سبيل المثال، يمكنك تحديد أنه إذا كان عرض الشاشة أقل من 768 بكسل، يتم عرض قائمة التنقل على شكل أيقونة همبرغر.
تستخدم الشبكات المرنة وحدات نسبية مثل النسبة المئوية (٪) أو em/rem بدلاً من وحدات البكسل الثابتة.
يؤدي هذا إلى تغيير حجم عناصر الصفحة بشكل متناسب مع تغير حجم الشاشة، بدلاً من أن تكون ثابتة.
على سبيل المثال، يمكن أن تكون أعمدة التخطيط بعرض 50% بدلاً من 200 بكسل.
تضمن الصور المرنة أيضًا، باستخدام خاصية max-width: 100% في CSS، أن الصور لا تتجاوز حاويتها أبدًا وتتغير أحجامها بشكل متناسب دائمًا، سواء بالصغير أو الكبير.
تشكل هذه المبادئ المتخصصة حجر الزاوية لكل موقع ويب متجاوب.
في الجدول أدناه، تمت الإشارة إلى بعض خصائص CSS الرئيسية لتحقيق التصميم المتجاوب:
| ميزة CSS | الشرح | مثال على الاستخدام |
|---|---|---|
@media Queries |
تطبيق أنماط شرطية بناءً على خصائص الجهاز (العرض، الارتفاع، النوع) | @media screen and (max-width: 768px) { ... |
flex-grow, flex-shrink, flex-basis (Flexbox) |
تحديد كيفية نمو عناصر فليكس، وتقلصها، وحجمها الأولي | .item { flex: 1; } |
grid-template-columns, grid-template-rows (CSS Grid) |
تحديد الأعمدة والصفوف لتخطيط شبكي | display: grid; grid-template-columns: 1fr 1fr; |
max-width (للصور) |
منع الصورة من أن تصبح أكبر من حاويتها | img { max-width: 100%; height: auto; } |
الوحدات النسبية (%, em, rem, vw, vh) |
استخدام قياسات نسبية بدلاً من البكسلات الثابتة | width: 50%; font-size: 1.2em; |
التعرف على هذه الأدوات ضروري لأي مصمم ويب ويشكل حجر الزاوية لتطبيق تصميم ويب متجاوب ناجح.
المزايا العديدة للتصميم المتجاوب: تحسين تجربة المستخدم وتحسين محركات البحث (SEO)
تطبيق تصميم المواقع المتجاوبة ليس مجرد خيار، بل هو ضرورة يجلب العديد من المزايا للأعمال والمستخدمين على حد سواء.
من أهم هذه المزايا هو التحسين الكبير في تجربة المستخدم (UX).
عندما يُعرض موقع الويب بشكل صحيح على أي جهاز، يمكن للمستخدمين بسهولة عرض المحتوى والتفاعل معه دون الحاجة إلى التكبير أو التمرير الأفقي أو تغيير حجم الصفحة.
يساعد هذا في تقليل معدل الارتداد (Bounce Rate) وزيادة مدة بقاء المستخدمين في الموقع، والتي تُعتبر إشارات إيجابية لمحركات البحث.
بالإضافة إلى ذلك، للتصميم المتجاوب تأثير كبير على تحسين محركات البحث (SEO).
أعلنت جوجل صراحة أنها تفضل المواقع المتوافقة مع الجوال (Mobile-Friendly) في نتائج البحث على الأجهزة المحمولة.
من خلال امتلاك موقع ويب متجاوب، سيكون لديك عنوان URL واحد فقط، مما يسهل على جوجل إدارته ويمنع مشاكل المحتوى المكرر التي تحدث في الإصدارات المنفصلة.
يساعد هذا الدليل الشامل الشركات على تحقيق هدفين بضربة واحدة: زيادة رضا المستخدمين والحصول على ترتيب أفضل في نتائج البحث.
خفض تكاليف الصيانة، سهولة تحديث المحتوى، وزيادة الوصول إلى جمهور أوسع، كلها نتائج إيجابية لتبني نهج تصميم المواقع المتجاوبة، مما يجعله عنصرًا لا غنى عنه في الاستراتيجية الرقمية.
هل تعلم أن 94% من الانطباعات الأولى للمستخدمين عن الأعمال التجارية تتعلق بتصميم موقع الويب الخاص بها؟ مع تصميم موقع الشركة الاحترافي من قبل **رساوب**، حوّل هذا الانطباع الأولي إلى فرصة للنمو.
✅ جذب المزيد من العملاء وزيادة المبيعات
✅ بناء المصداقية والثقة في عيون الجمهور⚡ احصل على استشارة مجانية لتصميم الموقع الآن!
الأطر والمكتبات الشائعة لتطبيق التصميم المتجاوب
نظرًا لتعقيدات التنفيذ اليدوي لتصميم المواقع المتجاوبة، اتجه العديد من المطورين نحو استخدام أطر ومكتبات الواجهة الأمامية التي تسهل هذه العملية.
توفر هذه الأدوات مجموعة من الأكواد، المكونات، والأنماط الجاهزة التي تساعد في تسريع عملية التطوير.
أحد أشهر الأطر وأكثرها استخدامًا هو بوتستراب (Bootstrap).
بوتستراب هو إطار عمل HTML و CSS و JavaScript يتضمن قوالب تصميم للطباعة، والنماذج، والأزرار، والجداول، والتنقلات، ومكونات واجهة المستخدم الأخرى، وهو متجاوب بشكل افتراضي.
فاونديشن (Foundation) هو إطار عمل متجاوب وقوي آخر يوفر مرونة عالية وقابلية للتخصيص.
بالإضافة إلى هذه الأطر الشاملة، وفر CSS نفسه، بتقديم ميزات قوية مثل فليكس بوكس (Flexbox) و سي إس إس جريد (CSS Grid)، أدوات أصلية قوية لبناء تخطيطات متجاوبة.
يعتبر فليكس بوكس مثاليًا للتخطيطات أحادية البعد (على سبيل المثال، صف واحد أو عمود واحد) بينما يعتبر سي إس إس جريد مثاليًا للتخطيطات ثنائية الأبعاد (صفوف وأعمدة في نفس الوقت).
تمكّن هذه الأدوات المتخصصة المصممين والمطورين من بناء مواقع ويب عالية الجودة ومتجاوبة بسرعة دون القلق بشأن التفاصيل المعقدة، مما يدل على الأهمية المتزايدة لتصميم المواقع المتجاوبة.
التحديات والنقاط الهامة في التصميم المتجاوب
على الرغم من المزايا العديدة، فإن تطبيق تصميم المواقع المتجاوبة لا يخلو من التحديات.
أحد أكبر العقبات هو إدارة المحتوى لأحجام الشاشات المختلفة.
قد يبدو المحتوى جيدًا على سطح المكتب، لكنه قد يحتاج إلى تغيير ترتيبه أو إخفائه أو ضغطه على الهاتف المحمول.
يثير هذا تساؤلات حول كيفية الحفاظ على تجربة المستخدم في جميع نقاط التوقف (breakpoints) دون الإضرار بالمحتوى الأصلي.
التحدي الآخر يتعلق بالأداء (Performance).
قد يؤدي تحميل الصور عالية الدقة لسطح المكتب على الأجهزة المحمولة ذات الإنترنت البطيء إلى تقليل سرعة تحميل الموقع بشكل كبير.
من الضروري تحسين الصور (استخدام تنسيقات مناسبة مثل WebP، الضغط، والتحميل الكسول أو Lazy Loading) و كذلك تقليل حجم ملفات CSS و JavaScript.
يمكن أن تزداد تعقيدات إدارة CSS أيضًا مع زيادة عدد استعلامات الوسائط (Media Queries) وقواعد الأنماط لنقاط التوقف المختلفة.
يمكن أن يساعد استخدام معالجات CSS المسبقة مثل Sass أو Less في تنظيم أفضل للتعليمات البرمجية.
كما أن الاختبار والتجربة على الأجهزة والمتصفحات المختلفة يستغرق وقتًا طويلاً.
تتطلب هذه التحديات تخطيطًا دقيقًا وإرشادات محددة لتطبيق التصميم المتجاوب بشكل صحيح ومُحسّن، لكي يعمل الموقع بشكل صحيح في جميع البيئات ويقدم تجربة مستخدم مثالية.
اختبار وتحسين التصميم المتجاوب: ضمان الأداء الممتاز
بعد تطبيق تصميم المواقع المتجاوبة، تبدأ مرحلة الاختبار والتحسين الحاسمة.
لا يكفي مجرد التصميم المتجاوب؛ يجب التأكد من أن الموقع يعمل بشكل صحيح على جميع الأجهزة، والمتصفحات، وأنظمة التشغيل.
الخطوة الأولى هي استخدام أدوات المطور في المتصفحات (Developer Tools).
توفر معظم المتصفحات الحديثة مثل كروم، فايرفوكس، وإيدج، وضع محاكاة الجهاز (Device Emulation) الذي يسمح لك بمشاهدة الموقع بأبعاد شاشة مختلفة وحتى محاكاة أجهزة معينة.
ومع ذلك، لا يمكن للمحاكيات إعادة إنشاء تجربة جهاز حقيقي بالكامل.
لذلك، فإن الاختبار على أجهزة مادية مختلفة (الهواتف الذكية، الأجهزة اللوحية، أجهزة الكمبيوتر المحمولة) ومع شبكات مختلفة (Wi-Fi، 3G، 4G) ضروري.
يمكن لأدوات مثل Google PageSpeed Insights و Lighthouse تحليل أداء الموقع وتحسينه وتقديم اقتراحات لتحسين السرعة وتجربة المستخدم.
يتضمن التحسين ضغط الصور، وتقليل عدد طلبات HTTP، وتصغير ملفات CSS و JavaScript، وتفعيل التخزين المؤقت للمتصفح.
تضمن هذه المرحلة المتخصصة أن الموقع المتجاوب ليس جميلًا فحسب، بل إنه سريع وفعال أيضًا.
في الجدول أدناه، تم إدراج الأدوات الرئيسية لاختبار وتحسين تصميم المواقع المتجاوبة:
| اسم الأداة/النهج | الاستخدام الرئيسي | الميزة |
|---|---|---|
| Google Chrome DevTools (Device Mode) | محاكاة أبعاد الشاشة المختلفة، متصفحات الجوال | أداة مدمجة في المتصفح، وصول سريع، تغيير أبعاد مخصصة |
| Google PageSpeed Insights / Lighthouse | تحليل أداء الموقع، تقديم اقتراحات التحسين | معايير جوجل، الكشف عن مشاكل Core Web Vitals |
| BrowserStack / Sauce Labs | الاختبار على الأجهزة والمتصفحات الحقيقية (سحابي) | تغطية واسعة للأجهزة وأنظمة التشغيل، دقة عالية |
| Smush / TinyPNG (للصور) | ضغط وتحسين الصور | تقليل حجم الملف، تحسين سرعة التحميل |
| Lazy Loading (التحميل الكسول) | تحميل المحتوى (الصور، مقاطع الفيديو) فقط عند الحاجة | تحسين سرعة تحميل الصفحة الأولية، توفير عرض النطاق الترددي |
يضمن هذا النهج الشامل للتحسين الأداء الخالي من العيوب لموقعك في جميع الظروف.
نهج الهاتف أولاً (Mobile First): مستقبل تصميم الويب
في الماضي، كان تصميم الويب يبدأ عادةً بالتركيز على صفحات سطح المكتب، ثم تُبذل الجهود لتكييفها مع الأجهزة المحمولة.
ولكن مع الزيادة الكبيرة في حركة الإنترنت عبر الأجهزة المحمولة، ظهر نهج “الهاتف أولاً” (Mobile First) وسرعان ما أصبح معيارًا في تصميم الويب المتجاوب.
يعني مفهوم “الهاتف أولاً” أن عملية تصميم وتطوير موقع الويب تبدأ أولاً بأصغر الشاشات (مثل الهواتف المحمولة).
في هذا النهج، يفكر المصممون والمطورون أولاً في أهم عناصر المحتوى والوظائف لمستخدمي الجوال ويقومون بتنفيذها.
ثم، تدريجيًا وباستخدام استعلامات الوسائط (Media Queries)، يقومون بتحسين التخطيط للشاشات الأكبر (الأجهزة اللوحية وأجهزة سطح المكتب) ويضيفون المزيد من التفاصيل.
تتمتع هذه الطريقة التعليمية والتحليلية بالعديد من المزايا.
أولاً، تساعد المصممين على التركيز على المحتوى الأساسي وتجربة المستخدم الضرورية، لأن المساحة المحدودة للهاتف المحمول لا تسمح بوضع عناصر غير ضرورية.
ثانيًا، نظرًا لطبيعة “التحسين التدريجي” (Progressive Enhancement)، يعمل الموقع بشكل جيد على الأجهزة القديمة وبنطاق ترددي أقل.
ثالثًا، بما أن جوجل تستخدم استراتيجية الفهرسة المتوافقة مع الجوال (Mobile-First Indexing)، فإن التصميم بهذا النهج يساعد بشكل كبير في تحسين ترتيب محركات البحث (SEO).
يُعد تبني هذه الاستراتيجية خطوة مهمة نحو توفير تجربة مستخدم مثالية وتطلعية، ويشير إلى فهم عميق للطبيعة الديناميكية لتصميم المواقع المتجاوبة.
هل سئمت من فقدان الفرص التجارية بسبب عدم وجود موقع شركة احترافي؟ لا تقلق بعد الآن! مع خدمات تصميم مواقع الشركات من رساوب:
✅ تزداد مصداقية واحترافية علامتك التجارية.
✅ تجذب المزيد من العملاء وفرص المبيعات.
⚡ احصل على استشارة مجانية لتصميم الموقع الآن للبدء!
مستقبل التصميم المتجاوب: الابتكارات والآفاق الجديدة
يتطور عالم تصميم المواقع المتجاوبة باستمرار، ونواجه كل يوم ابتكارات جديدة تدفع حدود ما يمكن فعله على الويب.
أحد التطورات الأكثر إثارة هو إدخال “استعلامات الحاويات” (Container Queries).
في الوقت الحالي، تستجيب استعلامات الوسائط (Media Queries) لحجم منفذ العرض (Viewport) للجهاز، لكن استعلامات الحاويات تسمح للعناصر بالاستجابة بناءً على حجم حاويتها الأصلية.
توفر هذه القدرة المتخصصة مرونة غير مسبوقة في بناء مكونات مستقلة وقابلة لإعادة الاستخدام، وتدفع التصميم نحو النمطية.
بالإضافة إلى ذلك، مع تقدم الذكاء الاصطناعي والتعلم الآلي، نشهد ظهور أدوات يمكنها أتمتة عملية التصميم المتجاوب وتقديم اقتراحات لتحسين التخطيط.
يمكن أن يكون هذا الخبر مثيرًا وممتعًا حول كيفية مشاركة التكنولوجيا في العملية الإبداعية.
يتزايد أيضًا اتجاه استخدام الوضع المظلم (Dark Mode) في تصميم الويب، والذي يجب على مصممي المواقع المتجاوبة أخذه في الاعتبار لكي تتمكن المواقع من تغيير وضع الألوان الخاص بها بناءً على إعدادات نظام المستخدم.
تُظهر هذه التطورات أن التصميم المتجاوب ليس مجرد تقنية، بل هو فلسفة تسعى إلى التكيف وتوقع احتياجات المستخدمين والأجهزة المستقبلية.
الاستعداد لتبني هذه الابتكارات يساعد المواقع الإلكترونية على البقاء في طليعة التكنولوجيا وتقديم تجربة مستخدم رائدة.
الخاتمة: الأهمية الفريدة للتصميم المتجاوب في العصر الرقمي
في ختام هذه المقالة التوضيحية والشاملة، يمكننا القول بيقين أن تصميم المواقع المتجاوبة لم يعد ميزة تنافسية، بل أصبح ضرورة حيوية لأي عمل أو فرد يهدف إلى تحقيق حضور فعال ومستدام في الفضاء الإلكتروني.
من تحسين تجربة المستخدم وزيادة رضا الجمهور، إلى التأثير الإيجابي على ترتيب محركات البحث وتقليل تكاليف الصيانة، فإن مزايا هذا النهج واسعة النطاق لدرجة أن تجاهلها قد يؤدي إلى فقدان جزء كبير من الجمهور والفرص التجارية.
يتغير العالم الرقمي بسرعة، ويزداد عدد الأجهزة المستخدمة للوصول إلى الويب يومًا بعد يوم.
المواقع الإلكترونية التي لا تستطيع التكيف تلقائيًا مع هذه التغييرات ستصبح قديمة بسرعة وتفقد مستخدميها.
لذلك، فإن الاستثمار في تصميم المواقع المتجاوبة هو في الواقع استثمار في مستقبل الأعمال واستدامتها في النظام البيئي عبر الإنترنت.
التوصية النهائية هي وضع هذا النهج كجوهر للتفكير والتخطيط في كل مشروع لتصميم الويب.
هذا ليس مجرد دليل فني، بل هو استراتيجية عمل تساعدك على البقاء رائدًا في عالم اليوم التنافسي وتقديم تجربة لا مثيل لها لمستخدميك.
الأسئلة الشائعة
| السؤال | الإجابة |
|---|---|
| ما هو تصميم المواقع المتجاوبة (Responsive Web Design)؟ | هي طريقة لتصميم المواقع الإلكترونية تضمن عرض صفحات الويب بشكل صحيح ومقروء على جميع أنواع الأجهزة وأحجام الشاشات (مثل أجهزة سطح المكتب، الأجهزة اللوحية، والهواتف المحمولة). |
| لماذا تصميم المواقع المتجاوبة مهم؟ | يحسن تجربة المستخدم على الأجهزة المختلفة، ويزيد من ترتيب الموقع في محركات البحث (SEO)، ويوفر الوقت والتكلفة مقارنة بإنشاء نسخ منفصلة للجوال أو الجهاز اللوحي. |
| ما هي التقنيات المستخدمة في التصميم المتجاوب؟ | التقنيات الأساسية تشمل HTML للهيكل، وCSS لتنسيق الأنماط (خاصة استعلامات الوسائط Media Queries)، واستخدام الصور والشبكات المرنة. |
| ما هو Media Query؟ | Media Query هي تقنية في CSS تسمح بتطبيق أنماط مختلفة بناءً على خصائص الجهاز الذي يستخدمه المستخدم (مثل عرض الشاشة، الاتجاه، والدقة). |
| ما هو مفهوم Mobile First في التصميم المتجاوب؟ | يعني البدء في تصميم وتطوير الموقع أولاً لأجهزة الجوال ذات الشاشات الصغيرة، ثم التوسع تدريجياً ليناسب الأجهزة الأكبر (مثل الأجهزة اللوحية وأجهزة سطح المكتب). تضمن هذه الطريقة التركيز على تجربة المستخدم على الأجهزة الصغيرة. |
وخدمات أخرى لوكالة رساوب للإعلانات في مجال الإعلانات:
أتمتة المبيعات الذكية: أداة فعالة للنمو عبر الإنترنت بمساعدة تصميم واجهة مستخدم جذابة.
تحسين معدل التحويل الذكي: أداة فعالة للعلامة التجارية الرقمية بمساعدة البرمجة المخصصة.
الحملة الإعلانية الذكية: حل سريع وفعال لتحسين ترتيب SEO مع التركيز على استهداف الجمهور بدقة.
UI/UX الذكي: حل احترافي لتحسين ترتيب SEO مع التركيز على استراتيجية المحتوى الموجهة لتحسين محركات البحث.
العلامة التجارية الرقمية الذكية: مصممة للأعمال التي تسعى لجذب العملاء من خلال أتمتة التسويق.
وأكثر من مائة خدمة أخرى في مجال الإعلانات عبر الإنترنت، استشارات إعلانية وحلول تنظيمية.
الإعلانات عبر الإنترنت | استراتيجية الإعلانات | إعلانات رپورتاج
المصادر
- أهمية التصميم المتجاوب
- ما هو التصميم المتجاوب؟
- تعليم تصميم المواقع المتجاوبة
- التصميم المتجاوب في الويب
✅? لقفزة عملك في العالم الرقمي، رساوب آفرين، المتخصص في تصميم مواقع ووردبريس وحلول التسويق الرقمي الشاملة، هو رفيقك الذكي.
📍 طهران، شارع ميرداماد، بجانب البنك المركزي، زقاق كازرون الجنوبي، زقاق رامين بلوك 6
