Ma jiro wax ka xun in la haysto website-ka desktop-ka oo aad u qurux badan iyo mareeg mobile oo aan si sax ah u shaqeyn.

Inta badan hagaajinta naqshaduhu waa sahlan yihiin laakiin waxay u baahan yihiin fiiro gaar ah haddii aad rabto in dadka soo booqda ay ku sii joogaan goobtaada markaad ku dhex wareegayso aaladda moobaylka.

Maqaalkani waxa uu iftiimin doonaa todoba arrimood oo saaxiibtinimo oo mobilada ah oo hagaajin doona iyaga.

• Isbeddellada Lagu Sameeyay Ka^(Are) Muuqda Mobile -ka^(Mobile)
• Navigation aan saaxiibtinimo lahayn
• Qaabka^{(Responsive Layout)} Jaceylka leh ayaa Joojiya Shaqaynta si lama filaan ah
• Sawiradu waxay qaadanayaan waqti aad u dheer in la raro
• Nuxurka ugu muhiimsani ma cadda
• Xog badan
• Xogta Shaashadaha Yaryar

Cusbooneysiinta Mareegta Saaxiibtinimada Mobilka Aan Soo Bandhigin^{(Mobile Friendly Website Updates Not Showing Up)}

Waxaad hadda wakhti badan ku bixisay samaynta cusbooneysiinta degelkaaga. Waxay u muuqdaan kuwo aad u fiican miiskaaga laakiin kama soo muuqan qalabkaaga gacanta.

Mid ka mid ah sababaha ugu badan waa kaydinta. Biraawsarkaaga moobiilku waxa uu muujin karaa nooc hore oo goobtaada ah oo aad hore u soo dejisay. Sababta kale waxay noqon kartaa in website-kaagu uu hayo nuqulkii hore ee boggaaga oo uusan muujin isbeddelkaaga.

Haddii ay tani tahay dhibaatadu, waxaad u baahan doontaa inaad tirtirto kaydka si aad u soo dejiso nooca dib loo eegay. Qalabka kaydinta sida WP Super Cache , W3 Total Cache , ama WP Cache ugu dhakhsaha badan^{(WP Fastest Cache)} ayaa kaa caawin kara xallinta dhibaatadan.

Hoos waxaa ah afar tillaabo oo kaa caawin doona inaad nadiifiso cache-gaaga mareegahaaga iyo biraawsarkaaga si ay awood ugu siiso nooca cusub inuu ku muujiyo goobtaada saaxiibtinimo ee moobaylka.

1. Dib u cusboonaysii biraawsarkaaga dhowr jeer miiskaaga iyo aaladda gacanta.
2. Ku tijaabi degelkaaga aaladaha mobilada ee kala duwan.
3. Ku nadiifi goobtaada plugin kaydinta
4. Ka hubi shirkaddaada martigelinta si aad u aragto haddii uu jiro nidaam kale oo kaydinta server-kaaga oo u baahan in la nadiifiyo.

Navigation aan saaxiibtinimo lahayn^{(Unfriendly Navigation)}

Waxay noqon kartaa mid adag in la sameeyo menu navigation oo si fiican uga shaqeeya aaladaha mobilada. Haddii navigation-kaagu leeyahay shay badan iyo liiska-hoosaadka, way ka sii dhib badan tahay in wax walba lagu tuujiyo shaashad yar.

Tusaale ahaan, haddii aad kaliya ku haysato saddex ama afar shay oo ka mid ah mareegahaaga navigation, waa inay si fiican ugu ekaataa mobilada. Si kastaba ha ahaatee, haddii aad haysato shay badan iyo liiska-hoosaadka, waxay isku dul ururin doonaan midba midka kale oo u ekaan doona dad badan.

Hoos^(Below) waxaa ah dhowr siyaabood oo lagu xallinayo dhibaatadan mareegta saaxiibtinimo ee mobilada:

• U rog marin-haweedkaaga liiska hoos-u-dhaca ee aaladaha moobaylka.
• U muuji liiska hagaha sida curiyeyaasha xannibaya, si ay si toos ah ugu muuqdaan.
• Isticmaal summada menu-ka oo la beddeli karo si aad u qaadato meel yar.
• Samee menu navigation mobaylka adigoo isticmaalaya jQuery.
• Isticmaal liiska Hamburger (Mowduucyo badan ayaa ka mid ah tan ikhtiyaar ahaan ama waxaad isticmaali kartaa plugin^{( use a plugin)} .)

Qaabka Jaceylka leh ayaa Joojiya Shaqaynta si lama filaan ah^{(Responsive Layout Stops Working Suddenly)}

Haddii goobtaada saaxiibtinimo ee mobilada ay si lama filaan ah u joojiso shaqada, waxaa laga yaabaa inay sabab u tahay plugin ku yaal goobtaada.

Ku rakibida plugin cusub ama cusbooneysiinta plugin hadda jirta waxay keeni kartaa isku dhac dadka kale oo saameeya qaabkaaga jawaabta.

Ku bilow inaad damiso plugin kasta midba mar si aad u aragto inay tahay sababta. Ha joojin dhamaantood hal mar ama ma ogaan doontid plugin noqon karta dembiilaha.

Isbeddellada koodka^(Code) ayaa ah sabab kale oo suurtagal ah. Haddii aad wax ka beddeshay kood si kadis ah ama ula kac ah, soo celi codebase-kii asalka ahaa oo arag haddii mareegtaada jawaabta ka bixinaysaa uu dib u shaqeeyo.

Markaad ka hubinayso goobtaada inay ka jawaabto mobaylka, waa inaad had iyo jeer ku tijaabisaa aaladda moobaylka. 

Mararka qaarkood waxa ay u muuqataa in ay shaqaynayso marka aad wax ka beddelayso daaqada browserka ee ku taal miiskaaga laakiin si sax ah ugamuu soo bixin moobaylka.

Haddii hal xariiq oo kood ah uu ka maqan yahay faylka madaxa HTML , waxay jebin kartaa naqshadda jawaabta leh. Khadkan koodka ah ee maqan wuxuu sababi doonaa in qalabkaaga moobilku u qaato goobta aad daawanayso inay tahay shabakad cabbirkeedu dhan yahay.

Goobta la sameeyay waxay noqon doontaa cabbirka goobta daawashada (cabirka aagga bogga shabakadda ee u muuqda isticmaaluhu).

Si aad u hagaajiso goobtaada saaxiibtinimada moobilka, ku dar khadka soo socda ee koodka qaybta madaxa:

<meta name=”viewport” content=”width=device-width”>

Mararka qaarkood marka mawduuca la cusboonaysiiyo, koodkan waa uu lumin karaa.

Sawiradu waxay qaadanayaan waqti aad u dheer in la raro^{(Images Are Taking Too Long to Load)}

Wanaajinta sawirada iyo yaraynta cabbirka sawirka sawirka^{(reducing image file size)} ayaa macno samaynaya. Sawirrada waaweyn ee aan la hagaajin waxay hoos u dhigi karaan xawaaraha rarka boggagaaga mareegaha. Tani waxay niyad jab ku noqon kartaa isticmaalayaasha mobilada.

Nooca WordPress^(WordPress) ee 4.4 iyo wixii ka sareeya wuxuu si toos ah ugu adeegaa nooca ugu yar ee sawirka seerfarkaaga.

Haddii aad horay u wadday nuqulkii ugu dambeeyay ee WordPress , laakiin goobtaadu wali si degdeg ah kuma filna, waxaad awoodi kartaa:

• Ku rakib qalab sida Smush Image Optimization, Compression, and Lazy Load si aad u cabbirto oo aad u hagaajiso sawiradaada
• Isticmaal qalabka isku-buufinta iyo hagaajinta ka hor intaadan gelin sawirada goobtaada sida TinyPNG , Compress JPEG , ama Optimizer Online Image^{(Online Image Optimizer)} .

Nuxurka ugu muhiimsani ma cadda^{(Most Important Content Isn’t Obvious)}

Mareegaha qaar ayaa lagu raray waxyaabo badan oo aan loo baahnayn si ay u buuxiyaan booska banaan marka laga furo miiska.

Websaydhyada la sameeyay iyaga oo aan ka warqabin isticmaaleyaasha mobiladu guud ahaan waxay hoos yimaadaan qaybtan. Goobahani waxay qaataan wakhti dheeraad ah iyo xadhkaha goos gooska si loo shubo.

Haddii boggaga aan si habboon loogu naqshadayn aaladaha moobaylka, markaas qayb ka mid ah waxa ku jira waxa laga yaabaa in aanay ka soo muuqan moobaylka iyada oo aan wax badan la rogin.

Inta badan, shay ku jira boggaaga mareegaha wuxuu u eegi doonaa hal dhinac kombayutarka oo gebi ahaanba ka duwan yahay aaladda gacanta.

Tusaale ahaan, bogga qiimaha leh oo leh saddex tiir ayaa ku tusi doona dhinac ka dhinac kombuyuutarka.

Si kastaba ha noqotee, aaladda mobilada, tiirarka ayaa isku dulsaaran midba midka kale sababtoo ah cabbirka shaashadda ayaa ka yar. Dhaqankan waa mid la filan karo.

Hubi^(Make) in miiska qiimuhu uu ku yaal meel sare ee boggaaga mareegaha si uu marka hore u soo baxo marka lagu arko moobaylka. Haddii aad qoraal badan ku hayso miiskaaga, isticmaaleyaasha mobiladu waa inay hoos u dhaadhacaan si ay u arkaan waxaana laga yaabaa inaanay arkin.

Waayo-aragnimada isticmaale ee mobilada ee ugu wanagsan, dhig qaybaha ugu muhiimsan nuxurka xagga sare ee bogga. Haddii isticmaaluhu u baahan yahay inuu wax badan rogo ka hor inta aanu arkin macluumaadkaaga, waxay u badan tahay inayna arki doonin.

Xog badan^{(Too Much Information)}

Goobaha leh walxo is-dhexgal isticmaale oo adag sida miisaska, foomamka talaabooyinka badan, iyo sifooyinka raadinta horumarsan waxay soo saari karaan khibrad isticmaale mobilada oo liidata.

Cutubyadani waxay ka kooban yihiin macluumaad aad u badan oo ciriiri kara shaashadda mobaylka oo faragelin kara isticmaaluhu inuu helo macluumaadka uu doonayo.

Mid ka mid ah habka ayaa ah in laga saaro ama laga qariyo qaar ka mid ah macluumaadka isticmaalayaasha mobilada. Si kastaba ha ahaatee, tani maaha xal ku habboon booqdayaasha doonaya inay galaangal u yeeshaan walxahan.

Si aad uga fogaato dhibaatadan, u wanaaji goobtaada saaxiibtinimada moobilka intii suurtogal ah. Sidoo kale, ka saar wax kasta oo aan loo baahnayn inta aad diiradda saarayso qaab dhismeedka udub-dhexaadka ah ee shabakadaada.

Xogta Shaashadaha Yaryar^{(Data For Small Screens)}

Miisaska isku dhafan ee leh safaf badan iyo tiirar waxay noqon karaan dhibaato marka lagu arko shaashadaha mobaylada yaryar. Xalka ugu fiican waa in la isticmaalo miisaska jawaab celinta.

Plugin sida Jadwalka Jawaabta WP^{( WP Responsive Table)} ayaa tan ka dhigi kara mid fudud in la fuliyo.

Sida shaxda qiimaha ee kor ku xusan, marka lagu eego aalladda mobaylka, tiirarka waa la isku dhejin doonaa si ay ugu habboonaadaan shaashadda yar.

Siyaabaha kale ee lagu tuso xogta aaladaha moobaylka waxaa ka mid ah:

• Abuuritaanka miis yar oo aan lahayn qaabka shabaqlaha si looga fogaado baahida loo qabo duubid toosan.
• U rogaaya miis dhinaciisa ah si uu ugu habboonaado shaashad yar.
• Ku beddelashada miisaska waaweyn kuwa yaryar oo ku xidha nooca buuxa.
• U beddelashada miisaska jaantusyada pie.

Maaddaama isticmaalka moobaylku uu si aad ah u korayo, waxaa lama huraan ah in mareegaha ganacsiga lagu hagaajiyo noocyada saaxiibtinimo ee mobilada. Kor^(Enhance) u qaad khibrada isticmaalaha adiga oo aan u hurayn shaqaynta adiga oo raacaya tillaabooyinka kore.

Waa inaad sidoo kale had iyo jeer la socotaa waxqabadka goobtaada oo aad sameyso wax-ka-beddelid marka loo baahdo si loo hagaajiyo waxqabadka iyo khibradda isticmaalaha.

7 WordPress Tips For a Mobile Friendly Website

There is nothing worse than having а grеat-looking desktop websіte and a mobile site that doesn’t work correctly.

Most design fixes are simple but do require attention if you want visitors to stay on your site while browsing on a mobile device.

This article will highlight seven mobile friendly website issues and fixes for them.

• Changes Made Are Not Showing on Mobile
• Unfriendly Navigation
• Responsive Layout Stops Working Suddenly
• Images Are Taking Too Long to Load
• Most Important Content Isn’t Obvious
• Too Much Information
• Data for Small Screens

Mobile Friendly Website Updates Not Showing Up

You have just spent a lot of time making updates to your website. They look great on your desktop but don’t show up on your mobile device.

One of the most common reasons is caching. Your mobile browser could be showing an old version of your site which you previously downloaded. Another reason can be that your website is holding onto the old version of your page and not showing your changes.

If this is the problem, you will need to clear the cache to download the revised version. A caching plugin such as WP Super Cache, W3 Total Cache, or WP Fastest Cache can help solve this problem.

Below are four steps to help you flush your website cache and browser to enable the new version to show on your mobile friendly site.

1. Refresh your browser several times on your desktop and mobile device.
2. Test your website on different mobile devices.
3. Clear your site with a caching plugin.
4. Check with your hosting company to see if there is another caching system on your server that needs to be cleared.

Unfriendly Navigation

It can be challenging to create a navigation menu that works well on mobile devices. If your website navigation has many items and submenus, it is even more tricky to squeeze everything on a smaller screen.

For example, if you only have three or four items in your website navigation, it should look fine on mobile. However, if you have more items and submenus, they will stack up on top of each other and look crowded.

Below are a few ways to fix this problem for a mobile friendly website:

• Turn your navigation into a dropdown menu for mobile devices.
• Display your navigation menu as block elements, so they appear vertically.
• Use a menu icon that can be toggled to take up less space.
• Create a mobile navigation menu using jQuery.
• Use the Hamburger menu (Many themes include this as an option or you can use a plugin.)

Responsive Layout Stops Working Suddenly

If your mobile friendly site suddenly stops working, it could be due to a plugin on your site.

Installing a new plugin or an update to an existing plugin could be causing a conflict with others that affects your responsive layout.

Start by deactivating each plugin one at a time to see if it is the cause. Don’t deactivate them all at once or you won’t know which plugin could be the culprit.

Code changes are another possible cause. If you have modified any code accidentally or intentionally, restore the original codebase and see if your responsive website starts working again.

When checking your site for mobile responsiveness, you should always test it on a mobile device. 

Sometimes it appears to work when resizing the browser window on your desktop but doesn’t display correctly on mobile.

If one line of code is missing from an HTML header file, it can break the responsive design. This single line of missing code will cause your mobile device to assume the site you are viewing is a full-sized website.

The site rendered will be the size of the viewport (the size of the area of the web page that is visible to the user).

To fix your mobile friendly site, add the following line of code to the header section:

<meta name=”viewport” content=”width=device-width”>

Sometimes when a theme is updated, this code can disappear.

Images Are Taking Too Long to Load

Optimizing images and reducing image file size makes sense. Large images that are not optimized can slow down the loading speed of your webpages. This can be frustrating to mobile users.

WordPress version 4.4 and above automatically serves up the smallest version of an image on your server.

If you are already running the latest version of WordPress, but your site is still not loading fast enough, you can:

• Install a plugin such as Smush Image Optimization, Compression, and Lazy Load to resize and optimize your images
• Use a compression and optimization tool before uploading images to your site such as TinyPNG, Compress JPEG, or Online Image Optimizer.

Most Important Content Isn’t Obvious

Some websites are loaded with a lot of unnecessary content to fill the empty space when opened on a desktop.

Websites developed without being conscious of mobile users generally fall under this category. These sites take more time and bandwidth to load.

If the pages aren’t designed appropriately for mobile devices, then part of the content may not appear on mobile without a lot of scrolling.

Most of the time, an element on your webpage will look one way on a computer and completely different on a mobile device.

For example, a pricing page with three columns will show them side by side on a computer.

However, on a mobile device, the columns are stacked on top of each other because the screen size is smaller. This behavior is to be expected.

Make sure your pricing table is in a top position on your webpage so that it will appear first when viewed on mobile. If you have a lot of text over your table, mobile users will have to scroll down to see it and might not.

For the most optimal mobile user experience, put the most critical pieces of content towards the top of the page. If a user needs to scroll a lot before they can view your content, they probably won’t.

Too Much Information

Sites with complicated user-interface elements such as tables, multi-step forms, and advanced search features can produce a poor mobile user experience.

These elements contain too much information that can crowd a mobile screen and interfere with a user finding the information they want.

One approach is to remove or hide some content from mobile users. However, this is not an ideal solution for visitors who want to have access to these elements.

To avoid this problem, optimize your mobile friendly site as much as possible. Also, remove any unnecessary elements while focusing on the core structure of your website.

Data For Small Screens

Complex tables with many rows and columns can be a problem when viewed on small mobile screens. The best fix is to use responsive tables.

A plugin such as WP Responsive Table can make this easy to accomplish.

As with the pricing table above, when viewed on a mobile device, the columns will be stacked to fit the smaller screen.

Other ways to show data on mobile devices include:

• Creating a smaller table without the grid layout to avoid the need for horizontal scrolling.
• Flipping a table on its side to fit better on a smaller screen.
• Replacing larger tables with smaller ones that link to the full version.
• Converting tables into pie charts.

As mobile usage is growing exponentially, it is imperative that business websites are optimized with mobile friendly versions. Enhance user experience without sacrificing functionality by following the steps above.

You should also always monitor your site’s performance and make tweaks when necessary to improve performance and user experience.

Related posts

• Sida Loo Sameeyo Mareegtaada Twitter-ka La mid ah Adigoo Adeegsanaya Mawduuca P2 ee WordPress

• 10ka Muhiimka ah ee WordPress Plugins ee Mareegaha Ganacsiga Yaryar

• Sida Loo Sameeyo Bogga WordPress Mid Sugan

• Dib-u-eegis Buugaag: Dhiso Mareegtaada: Hagaha Majaajilada ah ee HTML, CSS iyo Wordpress

• Wix Vs WordPress: Keebaa Ugu Wanaagsan Abuurista Mareegtaada?

• Sida loogu shubo Roku TV ka PC ama Mobile

• Sida loo badbaadiyo GIF-yada firfircoon ee mobilada iyo kumbuyuutarka

• Sida Loo Raad-raaco Isbeddellada Ku Yimaadda Word (Online, Mobile, iyo Desktop)

• 10 Talooyin iyo tabaha Gboard-ka si loo horumariyo Qorista Mobilka

• Gelida Mareegaha Mobilka Adigoo Isticmaalaya Browser Desktop (PC)

• 3 Siyaabood Oo Looga Saarayo Sawir-qaadista Mareegaha Kasta

• Sida loo beddelo erayga sirta ah ee Netflix (Mobile & Desktop)

• Sida Loo Sameeyo Telegram Channels Mobile-ka iyo Webka

• Sida loo sahlo Mode-madow gudaha Microsoft Outlook (Windows, Mac, iyo Mobile)

• Sida loogu daro Discor Widget Websaydhkaaga

• La Soco Shabakada Qarsoon iyo Xidhiidhka Intarneedka

• 7 Siyaabaha La Xaqiijiyay ee Lagu Kordhiyo Gaadiidka Mareegaha

• 8 tilaabo oo aad ku noqonayso GDPR u hogaansanaanta mareegahaaga

• Sida Loola socdo Marka Mareegta La Cusbooneysiyo

• Sida loo arko qof kasta oo ku sugan Zoom-ka (Mobilada iyo Moobaylka)