Gönderen Konu: Neden mobil uyumlu tema?  (Okunma sayısı 269 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
Neden mobil uyumlu tema?
« : 21 Eyl 2016, 22:39:27 »
Mobil teknoloji dünyayi degistiriyor. Bugün, herkesin akilli telefonlari var ve bu telefonlarla sürekli iletisim kuruyor, bilgi ariyorlar. Birçok ülkede, akilli telefonlarin sayisi kisisel bilgisayarlari n sayisini geride birakti. Mobil uyumlu bir web sitesine sahip olmak, çevrimiçi varligin önemli bir parçasi haline geldi.

Web sitenizi henüz mobil uyumlu yapmadiysaniz en kisa zamanda yapmalisiniz. Sitenize gelen kullanicilarin çogunlugu büyük olasilikla bir mobil cihaz kullaniyordur.

1. Web sitenizin mobil uyumlu olup olmadigini bilmiyorsaniz hemen Mobil Uyumluluk Testi'ni tamamlayin!
2. Web sitenizi olusturmak için Wordpress gibi bir içerik yönetimi yazilimi kullandiysaniz web sitesi yaziliminizi özellestirme rehberine göz atin.
3. Bunu kendiniz yapacak kadar teknik bilgiye sahipseniz Mobil Site De SEO'nun Önemi yazimiza göz atin.
Neden mobil uyumlu bir web sitesi olusturmaniz gerektigi hakkinda daha fazla bilgi edinmek istiyorsaniz okumaya devam edin!

Web siteleri neden mobil uyumlu hale getirilmelidir?


Bir sayfanin masaüstü sürümünün mobil bir cihazdan görüntülenmesi ve kullanilmasi zor olabilir. Kullanicinin, mobil uyumlu olmayan sürümü okuyabilmek için sikistirma veya yakinlastirma yapmasi gerekebilir. Kullanicilar bunu moral bozucu bir deneyim olarak görür ve büyük olasilikla siteden çikarlar. Alternatif olarak, mobil uyumlu sürüm kolayca okunabilir ve hemen kullanilabilir .
ABD'de, akilli telefon sahibi kullanicilarin %94'ü yerel bilgilerle ilgili aramalari telefonlarinda n yapmakta. Isin ilginç tarafi, mobil aramalarin %77'si evden veya is yerinden yapilmaktadir; bu mekanlarda büyük olasilikla masaüstü bilgisayarlar da mevcuttur.

Mobil içerik, isiniz için kritik önem tasir ve bu önemini korumaya devam edecektir. Ister tuttugunuz spor takimi için blog hazirlayin, ister yerel tiyatronuzun web sitesi için çalisma yapin ya da isterseniz potansiyel müsterilere ürün satin. Ziyaretçilerin mobil cihazlarini kullanarak sitenizi ziyaret ettiklerinde iyi bir deneyim yasayacaklarin dan emin olun!

Nasil baslarim?

Bu konuyla ilgili sitemizde bircok kaynak mevcut Biz bunu Smf icin uyarlayalim mantik olarak bütün Web Tabanli yazilimlar aynidir

Temamizin index.template .php sini bir tex editoruyle acalim
Tarayicilara, sayfanizin tüm cihazlara uyarlanacagini bildirmek için dokümanin başina bir meta etiket ekleyin:
Bulun
Kod: [Seç]
<title>', $context['page_title_html_safe'], '</title>';
Değiştir
Kod: [Seç]
<title>', $context['page_title_html_safe'], '</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />';

Meta viewport (görüntü alani) etiketi tarayiciya, sayfanin boyutlarini ve ölçeklemesini cihazin genisligine göre nasil ayarlayacagi konusunda talimatlar verir. Meta viewport ögesi eksik oldugunda, mobil tarayicilar sayfayi varsayilan olarak masaüstü ekrani genisliginde (cihazlara göre degismekle birlikte, genellikle 980 piksel) olustururlar. Ardindan, mobil tarayicilar yazi tipi boyutlarini büyüterek ve içerigi ekrana uyacak biçimde ölçekleyerek veya içerigin sadece ekrana sigan bölümünü göstererek daha iyi görünmesine çalisirlar.

Kullanicilar için bu durum, yazi tipi boyutlarinin tutarsiz bir görünümde olmasi ve kullanicinin, içerigi görerek onunla etkilesimde bulunabilmek için iki kez dokunmasi veya yakinlastirmak için parmaklariyla sikistirma hareketi yapmak zorunda kalmasi demektir. Google, mobil cihazlarda bu tür bir etkilesim gerektirdigi için sayfayi mobil uyumlu olarak nitelendirmeye bilir.

Gene ayni sayfada bir css tablosu atayalim bunun icin ben var olan bir modun css'ini kulanicam

Bul
Kod: [Seç]
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';
Değiştir
Kod: [Seç]
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/responsive', $context['theme_variant'], '.css?fin20" />';
Ekteki responsive yi css kilasorune atin

sira geldi menu olayina bu konuda smf yetkililerinin cözümü yazi icon şeklinde resimde görulduğu gibi



cok işlevsiz bir dizayn düzenlemek icin bazi kulanicilar aramayi yardimi filan Sources dosyasindan kaldirma yoluna gidiyorlar haliyle sistemde bir suru hata sorgu hala mevcut oldugu icin eğer bu kararinda israr edenler hala bu yazidan sonra varsa onlara css nin faydalarindan yararlanmalarini tavsiye ederim
 orneğin

Kod: [Seç]
#button_login, #button_register, #button_logout {
    display: none;
}
neyse benim cözümüm gene bana özel olacak smf nin input sistemini kulanarak bunu yapicam resimdeki gibi

index.template.php mizde menu kodlarimizi bir div acarak kodlarin arasina aliyoruz

Kod: [Seç]
<div class="main_menu">
<label class="showMenu" for="nav"></label>
        <input id="nav" type="checkbox" value="0"  />
        [color=red]Menu kodlarimiz buraya[/color]
<div>

<input id="nav" type="checkbox" value="0"  /> inputu indx.css de gizleyelim
 Uygun yere ekliyoruz
Kod: [Seç]
input[type="checkbox"]#nav{
  display: none;
}

responsive.css yi acalim en alta ekliyelim

Kod: [Seç]
@media screen and (max-width: 768px) {

  .main_menu ul {
    display: none;
  }
  .showMenu {
    display: block;
    background: #ebf3f9;
    width: 33px;
    height: 33px;
    cursor: pointer;
    position: absolute;
    left: 20px;
    margin-top: -45px;
  }
  .showMenu:after {
    content: '';
    display: block;
    width: 23px;
    height: 1px;
    background: #3a3b3b;
    margin: 5px 5px;
    box-shadow: 0px 10px 0px #383839, 0px 21px 0px #3a3a3a;
  }
  [type="checkbox"]:checked ~ ul {
    display: block;
    z-index: 9999;
    position: absolute;
    right: 30px;
    left: 30px;
  }
  .main_menu a {
    color: #777;
  }
 .main_menu ul li {
    display: block;
    float: none;
    width: 84%;
    text-align: left;
    background: #F0F4F9;
    text-indent: 0px;
  }
  .main_menu > ul > li {
    margin-left: 0px;
  }
  .main_menu > ul li ul li {
    display: block;
    float: none;
  }
  .main_menu > ul li ul {
    display: block;
    position: relative;
    width: 100%;
    z-index: 9999;
    float: none;
  }
}
Evet artik max-width: 768px altindaki cozunurluklerde menumuz mobil ozelige kavustu ince ayarlar size kalmis artik .


temamizin bu her temada farklilik gösere bilir menu kodlarimizi kavramasina dikat ederek uygulayalim.

sira geldi bazi bolumlere mobil ozelik vermeye

./Themes/default/Memberlist.template.php

Bul
Kod: [Seç]
<td class="windowbg2">', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>', '</td>';

if (!isset($context['disabled_fields']['website']))
echo '
<td class="windowbg">', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><img src="' . $settings['images_url'] . '/www.gif" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></a>' : '', '</td>';

// ICQ?
if (!isset($context['disabled_fields']['icq']))
echo '
<td class="windowbg2">', $member['icq']['link'], '</td>';

// AIM?
if (!isset($context['disabled_fields']['aim']))
echo '
<td class="windowbg2">', $member['aim']['link'], '</td>';

// YIM?
if (!isset($context['disabled_fields']['yim']))
echo '
<td class="windowbg2">', $member['yim']['link'], '</td>';

// MSN?
if (!isset($context['disabled_fields']['msn']))
echo '
<td class="windowbg2">', $member['msn']['link'], '</td>';

// Group and date.
echo '
<td class="windowbg lefttext">', empty($member['group']) ? $member['post_group'] : $member['group'], '</td>
<td class="windowbg lefttext">', $member['registered_date'], '</td>';

if (!isset($context['disabled_fields']['posts']))
{
echo '
<td class="windowbg2" style="white-space: nowrap" width="15">', $member['posts'], '</td>
<td class="windowbg statsbar" width="120">';

Değiştir
Kod: [Seç]
<td class="windowbg2 hidden">', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>', '</td>';

if (!isset($context['disabled_fields']['website']))
echo '
<td class="windowbg hidden">', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><img src="' . $settings['images_url'] . '/www.gif" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></a>' : '', '</td>';

// ICQ?
if (!isset($context['disabled_fields']['icq']))
echo '
<td class="windowbg2 hidden">', $member['icq']['link'], '</td>';

// AIM?
if (!isset($context['disabled_fields']['aim']))
echo '
<td class="windowbg2 hidden">', $member['aim']['link'], '</td>';

// YIM?
if (!isset($context['disabled_fields']['yim']))
echo '
<td class="windowbg2 hidden">', $member['yim']['link'], '</td>';

// MSN?
if (!isset($context['disabled_fields']['msn']))
echo '
<td class="windowbg2 hidden">', $member['msn']['link'], '</td>';

// Group and date.
echo '
<td class="windowbg lefttext">', empty($member['group']) ? $member['post_group'] : $member['group'], '</td>
<td class="windowbg lefttext hidden">', $member['registered_date'], '</td>';

if (!isset($context['disabled_fields']['posts']))
{
echo '
<td class="windowbg2" style="white-space: nowrap" width="15">', $member['posts'], '</td>
<td class="windowbg statsbar hidden" width="120">';
./Themes/temaniz/MessageIndex.template.php

Bul
Kod: [Seç]
<th scope="col" class="first_th" width="8%" colspan="2">&nbsp;</th>
Değiştir
Kod: [Seç]
<th scope="col" class="first_th hidden" width="8%" colspan="2">&nbsp;</th>
Bul

Kod: [Seç]
<th scope="col" width="14%">
Değiştir
Kod: [Seç]
<th scope="col" width="14%" class="hidden">
Bul
Kod: [Seç]
else
echo '
<th scope="col" class="lefttext" width="22%"><a href="', $scripturl, '?board=', $context['current_board'], '.', $context['start'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a></th>';

Değiştir

Kod: [Seç]
else
echo '
<th scope="col" class="lefttext hidden" width="22%"><a href="', $scripturl, '?board=', $context['current_board'], '.', $context['start'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a></th>';

./Themes/default/Recent.template.php

Bul
Kod: [Seç]
echo '
<div class="tborder topic_table" id="unreadreplies">
<table class="table_grid" cellspacing="0">
<thead>
<tr class="catbg">
<th scope="col" class="first_th" width="8%" colspan="2">&nbsp;</th>
<th scope="col">
<a href="', $scripturl, '?action=unreadreplies', $context['querystring_board_limits'], ';sort=subject', $context['sort_by'] === 'subject' && $context['sort_direction'] === 'up' ? ';desc' : '', '">', $txt['subject'], $context['sort_by'] === 'subject' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>
<th scope="col" width="14%" align="center">
<a href="', $scripturl, '?action=unreadreplies', $context['querystring_board_limits'], ';sort=replies', $context['sort_by'] === 'replies' && $context['sort_direction'] === 'up' ? ';desc' : '', '">', $txt['replies'], $context['sort_by'] === 'replies' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>';

// Show a "select all" box for quick moderation?
if ($showCheckboxes)
echo '
<th scope="col" width="22%">
<a href="', $scripturl, '?action=unreadreplies', $context['querystring_board_limits'], ';sort=last_post', $context['sort_by'] === 'last_post' && $context['sort_direction'] === 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] === 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>
<th class="last_th">
<input type="checkbox" onclick="invertAll(this, this.form, \'topics[]\');" class="input_check" />
</th>';
else
echo '
<th scope="col" class="last_th" width="22%">
<a href="', $scripturl, '?action=unreadreplies', $context['querystring_board_limits'], ';sort=last_post', $context['sort_by'] === 'last_post' && $context['sort_direction'] === 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] === 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>';
echo '
</tr>
</thead>
<tbody>';

Değiştir
Kod: [Seç]
echo '
<div class="tborder topic_table" id="unreadreplies">
<table class="table_grid" cellspacing="0">
<thead>
<tr class="catbg">
<th scope="col" class="first_th hidden" width="8%" colspan="2">&nbsp;</th>
<th scope="col">
<a href="', $scripturl, '?action=unreadreplies', $context['querystring_board_limits'], ';sort=subject', $context['sort_by'] === 'subject' && $context['sort_direction'] === 'up' ? ';desc' : '', '">', $txt['subject'], $context['sort_by'] === 'subject' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>
<th scope="col" width="14%" align="center" class="hidden">
<a href="', $scripturl, '?action=unreadreplies', $context['querystring_board_limits'], ';sort=replies', $context['sort_by'] === 'replies' && $context['sort_direction'] === 'up' ? ';desc' : '', '">', $txt['replies'], $context['sort_by'] === 'replies' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>';

// Show a "select all" box for quick moderation?
if ($showCheckboxes)
echo '
<th scope="col" width="22%" class="hidden">
<a href="', $scripturl, '?action=unreadreplies', $context['querystring_board_limits'], ';sort=last_post', $context['sort_by'] === 'last_post' && $context['sort_direction'] === 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] === 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>
<th class="last_th hidden">
<input type="checkbox" onclick="invertAll(this, this.form, \'topics[]\');" class="input_check" />
</th>';
else
echo '
<th scope="col" class="last_th hidden" width="22%">
<a href="', $scripturl, '?action=unreadreplies', $context['querystring_board_limits'], ';sort=last_post', $context['sort_by'] === 'last_post' && $context['sort_direction'] === 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] === 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>';
echo '
</tr>
</thead>
<tbody>';
Bul
Kod: [Seç]
echo '
<div class="tborder topic_table" id="unread">
<table class="table_grid" cellspacing="0">
<thead>
<tr class="catbg">
<th scope="col" class="first_th" width="8%" colspan="2">&nbsp;</th>
<th scope="col">
<a href="', $scripturl, '?action=unread', $context['showing_all_topics'] ? ';all' : '', $context['querystring_board_limits'], ';sort=subject', $context['sort_by'] == 'subject' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['subject'], $context['sort_by'] == 'subject' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>
<th scope="col" width="14%" align="center">
<a href="', $scripturl, '?action=unread', $context['showing_all_topics'] ? ';all' : '', $context['querystring_board_limits'], ';sort=replies', $context['sort_by'] == 'replies' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['replies'], $context['sort_by'] == 'replies' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>';

// Show a "select all" box for quick moderation?
if ($showCheckboxes)
echo '
<th scope="col" width="22%">
<a href="', $scripturl, '?action=unread', $context['showing_all_topics'] ? ';all' : '', $context['querystring_board_limits'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>
<th class="last_th">
<input type="checkbox" onclick="invertAll(this, this.form, \'topics[]\');" class="input_check" />
</th>';
else
echo '
<th scope="col" class="smalltext last_th" width="22%">
<a href="', $scripturl, '?action=unread', $context['showing_all_topics'] ? ';all' : '', $context['querystring_board_limits'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>';
echo '
</tr>
</thead>
<tbody>';

Değiştir
Kod: [Seç]
echo '
<div class="tborder topic_table" id="unread">
<table class="table_grid" cellspacing="0">
<thead>
<tr class="catbg">
<th scope="col" class="first_th hidden" width="8%" colspan="2">&nbsp;</th>
<th scope="col">
<a href="', $scripturl, '?action=unread', $context['showing_all_topics'] ? ';all' : '', $context['querystring_board_limits'], ';sort=subject', $context['sort_by'] == 'subject' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['subject'], $context['sort_by'] == 'subject' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>
<th scope="col" width="14%" align="center" class="hidden">
<a href="', $scripturl, '?action=unread', $context['showing_all_topics'] ? ';all' : '', $context['querystring_board_limits'], ';sort=replies', $context['sort_by'] == 'replies' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['replies'], $context['sort_by'] == 'replies' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>';

// Show a "select all" box for quick moderation?
if ($showCheckboxes)
echo '
<th scope="col" width="22%" class="hidden">
<a href="', $scripturl, '?action=unread', $context['showing_all_topics'] ? ';all' : '', $context['querystring_board_limits'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>
<th class="last_th">
<input type="checkbox" onclick="invertAll(this, this.form, \'topics[]\');" class="input_check" />
</th>';
else
echo '
<th scope="col" class="smalltext last_th hidden" width="22%">
<a href="', $scripturl, '?action=unread', $context['showing_all_topics'] ? ';all' : '', $context['querystring_board_limits'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a>
</th>';
echo '
</tr>
</thead>
<tbody>';

./Themes/default/Who.template.php

Bul
Kod: [Seç]
<td nowrap="nowrap">', $member['time'], '</td>
Değiştir
Kod: [Seç]
<td nowrap="nowrap" class="hidden">', $member['time'], '</td>
Bu kadar Ikinci dersimiz Responsive özelikli fonticon kulanarak seo dostu btonlara icon atayacağiz