كيفية تكديس الأعمدة في رسائل البريد الإلكتروني المستجيبة

نشرت: 2021-10-04

سوووو ، سأواعد نفسي قليلاً هنا ، لكن ابق معي.

مرة أخرى عندما بدأت الهواتف الذكية في التحول إلى شيء كان على المسوقين عبر البريد الإلكتروني التعامل معه ، كان الحل المشترك الذي رأيته من الجميع هو رسائل البريد الإلكتروني ذات العمود الواحد. وهو أمر منطقي نظرًا لعدم دعم العديد من عملاء البريد الإلكتروني للهاتف المحمول استعلامات الوسائط. كان الخيار الأسهل هو تجنب المشكلة تمامًا من خلال التمسك بتصميمات ذات عمود واحد في سطح المكتب والتي يمكن تغيير حجمها بسهولة للجوال.

ولكن مع المزيد من دعم الاستعلام عن الوسائط هذه الأيام ، يمكنك إنشاء تصميمات أكثر إثارة للاهتمام تستفيد من الترميز سريع الاستجابة لجعل تصميم البريد الإلكتروني الخاص بك يستجيب لحجم الشاشة التي يشاهدها المشتركون لديك.

سوف أطلعك على:

ترتيب التكديس العادي مقابل ترتيب التكديس العكسي
طريقتان لترميز المحتوى المكدس
عندما لا يجب تكديس محتوى الجوال

لماذا يجب عليك تكديس الأعمدة على الهاتف المحمول

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

سطح المكتب	متحرك

المصدر: رسائل البريد الإلكتروني الجيدة حقًا

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

كتاب للأطفال عن البريد الإلكتروني — *المصدر:* *رسائل البريد الإلكتروني الجيدة حقًا*

قدم معروفًا للمشتركين لديك وتأكد من أن رسائل البريد الإلكتروني الخاصة بك تبدو في أفضل حالاتها في كل بيئة قراءة.

طرق التراص لتصميم البريد الإلكتروني

عندما تريد تكديس الأعمدة فوق بعضها البعض ، فهناك طريقتان مختلفتان يمكن للمحتوى تكديسهما: مع العمود الأيسر في الأعلى (التكديس العادي) أو العمود الأيمن في الأعلى (التكديس العكسي).

التراص العادي

التكديس العادي هو الشكل الأكثر شيوعًا للتكديس. يأخذ المحتوى في العمود الأيسر ويضعه فوق المحتوى في العمود الأيمن ، على النحو التالي:

التراص العادي

التكديس العكسي

التكديس العكسي يحدث عندما يتكدس المحتوى في العمود الأيسر أسفل المحتوى في العمود الأيمن. يتم استخدامه بشكل شائع للصف الأوسط إذا كان لديك نمط Z على سطح المكتب ، لكنك تريد أن تبدو جميع الصفوف متشابهة على الهاتف المحمول. في هذا المثال ، الصف الأول والأخير عبارة عن تكديس عادي ، لكن الصف الثاني عبارة عن عمود تكديس عكسي:

التراص العكسي

طريقتان لترميز الأعمدة المكدسة على الهاتف المحمول

هناك طريقتان مختلفتان لترميز الأعمدة. سوف أطلعك على استخدام استعلامات وسائط CSS ثم طريقة تشفير مختلطة. اختبرها وشاهد ما هو الأفضل بالنسبة لك.

استخدام استعلامات وسائط CSS

يمكنك إنشاء عمودين ببساطة عن طريق إنشاء جدول من عمودين ثم استخدام الفئات لتكديس الأعمدة.

سيبدو CSS بالشكل التالي:

 <style>
     @media screen and (max-width:600px) {
          .block { display: block !important; width: 100% !important; }
     }
  </style>

وسيبدو HTML كالتالي:

 <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
     <tr>
          <td class="block" align="left" valign="top" style="padding:10px 0;" width="50%">
                <img src="http://via.placeholder.com/300">
        </td>
          <td class="block" align="left" valign="top" style="padding:10px 0 10px 10px;" width="50%">
               <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb in the shape of an "L" on her forehead.</p>
        </td>
     </tr>
 </table>

تقوم فئة الكتلة بتحويل خلايا الجدول إلى كتل على الهاتف المحمول ، ويتصرف المحتوى وفقًا لذلك ويتراكم تلقائيًا على الهاتف المحمول. ينتج عن هذا مكدس عادي.

إذا كنت تريد إنشاء مكدس عكسي ، فيمكنك استخدام table-header-group و table-footer-group كقيمة لخاصية العرض في CSS ، مثل:

 <style>
     @media screen and (max-width:600px) {
          .top { display: table-header-group !important; width: 100% !important; }
          .bottom { display: table-footer-group !important; width: 100% !important; }
     }
  </style>

ويصبح HTML:

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
      <tr>
            <td class="bottom" align="left" valign="top" style="padding:10px 0;" width="50%">
                     <img src="http://via.placeholder.com/300">
            </td>
            <td class="top" align="left" valign="top" style="padding:10px 0 10px 10px;" width="50%">
                  <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Well the years start coming and they don't stop coming. Fed to the rules and I hit the ground running. Didn't make sense not to live for fun. Your brain gets smart but your head gets dumb.</p>
            </td>
      </tr>
 </table>

الترميز الهجين

هذه هي الطريقة التي أستخدمها. إنه رمز ثقيل أكثر بكثير ، لكنه أنقذ مؤخرتي في عدة مناسبات عندما لا يدعم عملاء البريد الإلكتروني استعلامات الوسائط. (الدعائم المجنونة لنيكول ميرلين في برنامجها التعليمي الذي قدمني لأول مرة إلى الترميز الهجين.)

في هذه الحالة ، يمكنك استخدام قسمي div مع display: inline-block . يؤدي ذلك إلى إبقاء المحتوى الخاص بك جالسًا بجانب بعضه البعض على سطح المكتب ويدفعهم للتكدس على الهاتف المحمول. هذا هو الشكل الذي ستبدو عليه شفرتك:

<div style="display:inline-block;vertical-align:top;">
      <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
            <tr>
                  <td align="left" valign="top">
                        <img src="http://via.placeholder.com/300">
                  </td>
            </tr>
      </table>
</div>
<div style="display:inline-block;vertical-align:top;">
      <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
            <tr>
                  <td align="left" valign="top" style="padding-left: 10px;">
                        <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                  </td>
            </tr>
      </table>
</div>

ثم نقوم بلف كل ذلك في خلية جدول وضبط حجم الخط على 0 بحيث لا يتم إضافة مساحة إضافية حول divs ومحاذاة كل شيء في وسط خلية الجدول:

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <div style="display:inline-block;vertical-align:top;">
                     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
                           <tr>
                                 <td align="left" valign="top">
                                       <img src="http://via.placeholder.com/300">
                                 </td>
                           </tr>
                     </table>
               </div>
               <div style="display:inline-block;vertical-align:top;">
                     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
                           <tr>
                                 <td align="left" valign="top" style="padding-left: 10px;">
                                       <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                 </td>
                           </tr>
                     </table>
               </div>
          </td>
     </tr>

لكن انتظر! نظرًا لأن Outlook لا يدعم divs ، فأنت بحاجة أيضًا إلى إضافة بعض الجداول الخفية حول كل شيء لتشغيله في Outlook:

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
                                <tr>
                                      <td align="left" valign="top">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

يعمل هذا الرمز جيدًا بدون استعلامات الوسائط إذا كنت تستخدم أعمدة تمثل 50٪ من الجدول الذي يحتوي عليه. ولكن إذا كنت تستخدم أعمدة أصغر ، فسيتعين عليك إضافة بعض استعلامات الوسائط لتحديث العرض إلى 100٪ على الهاتف المحمول. المزيد عن ذلك أدناه.

تستفيد نسخة التكديس العكسية من السمة dir لترتيب divs بالترتيب المعاكس. نضيف dir = "rtl" في الخلية التي تحتوي على عمودين ، ثم يحتاج كل عمود إلى إضافة dir = "ltr" إلى الجدول لعرض المحتوى بشكل صحيح:

     <tr>
          <td style="font-size:0;" align="left" valign="top" dir="rtl">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;" dir=”ltr”>
                                <tr>
                                      <td align="left" valign="top">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Hey now, you're an all-star, get your game on, go play. Hey now, you're a rock star, get the show on, get paid. And all that glitters is gold. Only shooting stars break the mold.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;" dir=”ltr”>
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

شيء ما يجب مراعاته عند الترميز باستخدام الإصدار الهجين للتكديس العكسي: كل ما هو موجود في هذا <div> الأول سينتهي في العمود الأيمن ، وهو أمر غير بديهي ويحتاج إلى التعود عليه. كما أنه ليس دائمًا الأفضل لإمكانية الوصول.

ترميز عرضين مختلفين للعمود

كما هو مذكور أعلاه ، إذا كنت تريد استخدام خلايا جدول مختلفة الحجم ، فسيتعين عليك إضافة استعلامات الوسائط لتغيير خلايا الجدول هذه للجوال. الحالة الأكثر شيوعًا لهذا الأمر هي استخدام فئة 100٪ والتي ربما تكون قد أعددتها بالفعل في CSS الخاص بك. إذا لم يكن الأمر كذلك ، فقد يبدو كالتالي:

.w100p { width: 100% !important; }

ثم قم بإضافة هذه الفئة إلى div والجدول في HTML الخاص بك على هذا النحو (يحتوي هذا المثال على عمود بعرض 100 بكسل وآخر بعرض 500 بكسل):

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 100px;">
               <![endif]-->
                    <div class=”w100p” style="display:inline-block;vertical-align:top;">
                          <table class=”w100p” cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100px;">
                                <tr>
                                      <td align="left" valign="top">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:500px;">
               <![endif]-->
                    <div class=”w100p” style="display:inline-block;vertical-align:top;">
                          <table class=”w100p” cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:500px;">
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

لا داعي للقلق بشأن تغيير العروض في الكود الشرطي ، لأن هذا مخصص فقط لبرنامج Outlook لسطح المكتب.

ما هي الطريقة التي يجب استخدامها؟

تعمل كلتا الطريقتين بشكل جيد الآن بعد أن دعم عملاء البريد الإلكتروني للجوال الاستعلامات عن الوسائط.

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

تعتبر الطريقة القائمة على استعلام الوسائط أقل كثافة في التعليمات البرمجية ، ولأنك يمكنك وضع الفئات في أي من العمودين ، يمكنك ترك المحتوى بترتيب يكون منطقيًا لقارئات الشاشة ، مع الاستمرار في عرضه بطريقة منطقية بصريًا .

لذلك إذا كانت إمكانية الوصول مصدر قلق كبير ، فمن المحتمل أن يكون إصدار الاستعلام عن الوسائط هو أفضل رهان لك.

ومع ذلك ، إذا كنت قلقًا بشأن وجود إصدار أكثر أمانًا وأقل عرضة لأهواء عملاء البريد الإلكتروني ، فإن الإصدار المختلط هو السبيل للذهاب.

عندما لا تكدس المحتوى على الهاتف المحمول

هذا لا يعني أن كل شيء يحتاج إلى تكديس على الهاتف المحمول. لا تذهب مجنون كومة. هناك حالات لا تحتاج فيها إلى تكديس الأشياء على الهاتف المحمول ، مثل توقيع البريد الإلكتروني هذا:

توقيع البريد الإلكتروني jaina — *إن توقيعاتنا في العديد من رسائل البريد الإلكتروني لدينا عبارة عن عمودين لا يتراكمان على الهاتف المحمول.*

أو الحالات التي تريد أن تنتقل فيها من مكدسة على سطح المكتب إلى غير مكدسة على الهاتف المحمول.

تحتوي النشرة الإخبارية لشهر يناير 2021 على جميع قراراتنا مع وضع كل قسم فوق بعضها البعض في ثلاثة أعمدة. عند تكديسها على الهاتف المحمول ، أردنا الاستفادة بشكل أفضل من المساحة. لذلك ، أصبحت الصور والأسماء والعناوين "غير مكدسة" بينما أصبح كل عمود صفًا جديدًا:

سطح المكتب	متحرك

لذا كما ترى ، فإن تكديس كل شيء ليس هو الحل دائمًا. تأكد من أنك تحقق أقصى استفادة من مساحتك عند التصميم للجوال. في بعض الحالات ، يتضمن ذلك عدم تكديس المحتوى.

ترميز الاختلاف المكدس الخاص بي المثير للاهتمام

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

<tr>
     <td align="center" valign="top" style="font-size:0; padding-bottom: 60px;">
     <!--[if (gte mso 9)|(IE)]>
     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
     <tr>
     <td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 1 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td><td style="width: 30px;">
     </td><td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 2 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td><td style="width: 30px;">
     </td><td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 3 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td>
     </tr>
     </table>
     <![endif]-->
     </td>
</td>

بعد ذلك ، في كل عمود ، أضفت صفًا به تكديس من عمودين وصفًا عاديًا ثانيًا لعرض الأسعار. نظرًا لأنني لا أريد أن تكون الصورة والاسم جنبًا إلى جنب على سطح المكتب ، فقد تركت فاصل عمود الأشباح بين divs. وقمت بتعيين الجداول في divs للحصول على أقصى عرض من شأنه أن يؤدي إلى تضمين divs على الهاتف المحمول.

تم تعيين الأعمدة نفسها على عرض 180 بكسل ، وهو أصغر بكثير على الهاتف المحمول ، لذا فإن عناصر div مكدسة حتى يتم تعيين هذه الجداول على 100٪ بواسطة استعلام وسائط على الهاتف المحمول. لذلك بدا كل عمود على النحو التالي:

          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                    <tr>
                         <td style="font-size:0; padding-top: 30px;" align="center" valign="middle">
                         <!--[if (gte mso 9)|(IE)]>
                         <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
                         <tr>
                         <td valign="top" align="center" style="width: 180px;">
                         <![endif]-->
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       <img src="https://via.placeholder/79" alt="" width="79" height="79" >
                                                  </td>
                                             </tr>
                                   </table>
                              </div>
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       [-- content that stacks on desktop, but not on mobile goes here--]
                                                  </td>
                                           </tr>
                                   </table>
                              </div>
                         <!--[if (gte mso 9)|(IE)]>
                         </td>
                         </tr>
                         </table>
                         <![endif]-->
                         </td>
               </tr>
               <tr>
                         <td align="left" valign="top">
                              [--content that stacks on both desktop and mobile goes here--]
                         </td>
                    </tr>
               </table>
          </div>

ثم قمت بتعيين الجداول بحيث تحتوي على قيم أقصى عرض من شأنها أن تؤدي إلى وضعها بجوار بعضها البعض على الهاتف المحمول. ولكن على سطح المكتب ، كانت الخلية المحتوية صغيرة جدًا بحيث لا يمكن وضعها بجوار بعضها البعض ، مما أدى إلى تكدس المحتوى على سطح المكتب.

          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                    <tr>
                         <td style="font-size:0; padding-top: 30px;" align="center" valign="middle">
                         <!--[if (gte mso 9)|(IE)]>
                         <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
                         <tr>
                         <td valign="top" align="center" style="width: 180px;">
                         <![endif]-->
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 79px;">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       <img src="https://via.placeholder/79" alt="" width="79" height="79" >
                                                  </td>
                                             </tr>
                                   </table>
                              </div>
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="max-width: 221px;">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       [-- content that stacks on desktop, but not on mobile goes here--]
                                                  </td>
                                           </tr>
                                   </table>
                              </div>
                         <!--[if (gte mso 9)|(IE)]>
                         </td>
                         </tr>
                         </table>
                         <![endif]-->
                         </td>
               </tr>
               <tr>
                         <td align="left" valign="top">
                              [--content that stacks on both desktop and mobile goes here--]
                         </td>
                    </tr>
               </table>
          </div>

شاهد التعليمات البرمجية قيد التشغيل لجميع الإصدارات المختلفة للتكديس - بما في ذلك هذا الإصدار.

افكار اخيرة

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