كيفية تصميم قالب بلوجر متجاوب Responsive لاجهزة المحمول

تصميم قالب بلوجر متجاوب

اليوم سوف نشرح لكم كيفية وطريقة عمل تصميم لمدونة بلوجر متجاوب حتى يعمل على جميع اجهزة المحمول بشكل افضل وبسرعة عالية

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

وفى هذا الموضوع سوف نعرض الطريقة الثانية وهى تصميم موقع يتوافق مع الاجهزة المحمولة

اولا: تصميم صفحة HTML وها هو التصميم الاساسى لموقع الويب الذى سوف نعمل عليه

<div id="wrapper">
<div id="header-wrapper">
<h1>RESPONSIVE WEBSITE DESIGN</h1>
</div>
<div id="navigation">
<h2>HOME ABOUT CONTACT</h2>
</div>
<div id="content-wrapper">
<p> Easy Ways To Create And Build A Responsive Website Design </p>
<p> Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.</p>
</div>
<div id="sidebar-wrapper">
<p>Sidebar</p>
</div>
<div id="footer-wrapper">
<p>Footer</p>
</div>
</div>

ثانيا: تحديد حجم التخطيط للموقع كتخطيط افتراضى. سوف نستخدم حجم سطح المكتب 1300px لضبط طول التخطيط.
وها هو كود CSS الخاص بالتخطيط الافتراضى

#wrapper {
width:1300px;
margin:auto;
}
#header-wrapper {
width:1300px;
background:#90C;
border:solid #555;
}
#navigation {
width:1300px;
background:#36F;
border:solid #555;
margin-top:5px;
}
#content-wrapper{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#sidebar-wrapper{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#footer-wrapper{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}

التالى هو جعل كود CSS لشاشة المحمول او الجوال والأدوات مع عرض شاشة 1024px أو أقل.

/* for 1024px or less */
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}
#header-wrapper {
width:100%;
background:#90C;
border:solid #555;
}
#navigation {
width:100%;
font-size:0.7em;
background:#30F;
border:solid #555;
}
#content-wrapper{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#sidebar-wrapper{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#footer-wrapper{
width:100%;
border:solid #555;
float:left;
}
}

هذه الطريقة هى لتغيير حجم عرض px البداية حتى ان قيمة 1300px لعرض الموقع سوف تتغير الى 100%.
أحجام شاشات متصفح الهاتف متنوعة جدا تختلف من هاتف الى اخر، وهى احجام تصل الى 320px عرض الهاتف. واذا استخدمنا فقط عرض 1024px سوف يكون حجم المحتوى(content-wrapper) والشريط الجانبى (sidebar-wrapper) صغير جدا لذا سوف نعرض المحتوى و اسفل منه الشريط الجانبى وليس بجانبه. لكن كيف نفعل ذلك ؟؟ نضيف كود CSS التالى.
هذه المرة، مع وضع الشاشة بعرض 700px أو أقل.

/* for 700px or less */
@media screen and (max-width: 700px) {
 #content-wrapper {
  width: auto;
  float: none;
 }
 #sidebar-wrapper {
  width: auto;
  float: none;
 }
}

اذا قمت بتحديد عرض التخطيط الحخاص بالموقع لا تنسى تعديل حجم الخط ولا تنسى عندما يكون حجم الخط اصغر كلما يكون افضل بالنسبة لشاشة المحمول

1em = 16px -> إلى حجم الخط على الفقرة (p)
1.5em = 24px -> الى H1
1.25em = 20px -> الى H2

ذلك كود css لأحرف المستخدمة في تصميم الموقع المتجاوب هم:

h1 {
font-size:2em;
}
h2 {
font-size:1.5em;
}
p {
font-size:1em;
}

ونهاية ما يلى هو كود HTML و CSS لانشاء وتصميم مدونة او موقع متجاوب Responsive.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Easy Ways To Create And Build A Responsive Website Design </title>
<style>
#wrapper {
width:1300px;
margin:auto;
}
#header-wrapper {
width:1300px;
background:#90C;
border:solid #555;
}
#navigation {
width:1300px;
background:#36F;
border:solid #555;
margin-top:5px;
}
#content-wrapper{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#sidebar-wrapper{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#footer-wrapper{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}
h1 a{
font-size:1.5em;
text-decoration:none;
}
h2 {
font-size:1.25em;
text-decoration:none;
}
p {
font-size:1em;
}
/* for 1024px or less */
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}
#header-wrapper {
width:100%;
background:#90C;
border:solid #555;
}
#navigation {
width:100%;
font-size:0.7em;
background:#30F;
border:solid #555;
}
#content-wrapper{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#sidebar-wrapper{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#footer-wrapper{
width:100%;
border:solid #555;
float:left;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {

 #content-wrapper {
  width: auto;
  float: none;
 }
 #sidebar-wrapper {
  width: auto;
  float: none;
 }

}
</style>
</head>
<body>
<div id="wrapper">
<header id="header-wrapper">
<h1><a href="#"> Easy Ways To Create And Build A Responsive Website Design </a></h1>
</header>
<nav id="navigation">
<h2>HOME  ABOUT  CONTACT</h2>
</nav>
<aside id="content-wrapper">
<p> Easy Ways To Create And Build A Responsive Website Design </p>
<p> Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.</p>
</aside>
<aside id="sidebar-wrapper">
<p>Sidebar</p>
</aside>
<footer id="footer-wrapper">
<p>Footer</p>
</footer>
</div>
</body>
</html>

من خلال التصميم الأساسي أعلاه، يمكنك بناء مجموعة متنوعة من تصميم أشكال المواقع / بلوق متجاوب او مستجيب Responsive.
آمل أن يكون هذا الشرح مفيدا للجميع :)

Go to Link

محطات

كيفية تصميم قالب بلوجر متجاوب Responsive لاجهزة المحمول

تعليق واحد

باريس سان جيرمان فى ضيافة ليون فى ديربى الدورى الفرنسى

الكلاسيكو: ريال مدريد وبرشلونه فى صراع الليغا