멋진 데스크톱 웹사이트와 제대로 작동하지 않는 모바일 사이트가 있는 것보다 더 나쁜 것은 없습니다.
대부분의 디자인 수정은 간단하지만 방문자가 모바일 장치에서 탐색하는 동안 사이트에 머물게 하려면 주의가 필요합니다.
이 기사에서는 7가지 모바일 친화적인 웹사이트 문제와 이에 대한 수정 사항을 중점적으로 설명합니다.
- 변경 사항 이 (Are)모바일(Mobile) 에 표시되지 않음
- 비우호적인 탐색
- 반응형 레이아웃(Responsive Layout) 이 갑자기 작동을 멈춤
- 이미지를 로드하는 데 너무 오래 걸립니다.
- 가장 중요한 내용은 명확하지 않습니다
- 너무 많은 정보
- 작은 화면용 데이터
모바일 친화적인 웹사이트 업데이트가 표시되지 않음(Mobile Friendly Website Updates Not Showing Up)
웹사이트를 업데이트하는 데 많은 시간을 할애했습니다. 데스크탑에서는 멋지게 보이지만 모바일 장치에서는 표시되지 않습니다.
가장 일반적인 이유 중 하나는 캐싱입니다. 이전에 다운로드한 사이트의 이전 버전이 모바일 브라우저에 표시될 수 있습니다. 또 다른 이유는 웹사이트가 페이지의 이전 버전을 유지하고 있으며 변경 사항을 표시하지 않기 때문일 수 있습니다.
이것이 문제라면 캐시를 지워 수정 버전을 다운로드해야 합니다. WP Super Cache , W3 Total Cache 또는 WP Fastest Cache 와 같은 캐싱 플러그인 이 이 문제를 해결하는 데 도움이 될 수 있습니다.
다음은 웹사이트 캐시와 브라우저를 플러시하여 모바일 친화적인 사이트에 새 버전을 표시하는 데 도움이 되는 4단계입니다.
- 데스크톱 및 모바일 장치에서 브라우저를 여러 번 새로 고칩니다.
- 다양한 모바일 장치에서 웹사이트를 테스트합니다.
- 캐싱 플러그인으로 사이트를 지웁니다.
- 서버에 지워야 하는 다른 캐싱 시스템이 있는지 호스팅 회사에 확인하십시오.
비우호적인 탐색(Unfriendly Navigation)
모바일 장치에서 잘 작동하는 탐색 메뉴를 만드는 것은 어려울 수 있습니다. 웹 사이트 탐색에 많은 항목과 하위 메뉴가 있는 경우 작은 화면에서 모든 항목을 압축하는 것이 훨씬 더 까다롭습니다.
예를 들어 웹사이트 탐색에 항목이 3~4개만 있는 경우 모바일에서는 잘 보일 것입니다. 그러나 더 많은 항목과 하위 메뉴가 있으면 서로 겹쳐서 붐비는 것처럼 보입니다.
다음(Below) 은 모바일 친화적인 웹사이트에서 이 문제를 해결하는 몇 가지 방법입니다.
- 탐색을 모바일 장치용 드롭다운 메뉴로 바꾸십시오.
- 탐색 메뉴를 블록 요소로 표시하여 세로로 표시되도록 합니다.
- 토글할 수 있는 메뉴 아이콘을 사용하여 공간을 덜 차지합니다.
- jQuery를 사용하여 모바일 탐색 메뉴를 만듭니다.
- 햄버거(Hamburger) 메뉴 사용 (많은 테마에 이것을 옵션으로 포함하거나 플러그인을 사용할( use a plugin) 수 있습니다 .)
반응형 레이아웃이 갑자기 작동을 멈춤(Responsive Layout Stops Working Suddenly)
모바일 친화적인 사이트가 갑자기 작동을 멈춘다면 사이트의 플러그인 때문일 수 있습니다.
새 플러그인을 설치하거나 기존 플러그인을 업데이트하면 반응형 레이아웃에 영향을 미치는 다른 플러그인과 충돌이 발생할 수 있습니다.
각 플러그인을 한 번에 하나씩 비활성화하여 원인인지 확인하십시오. 한 번에 모두 비활성화하지 마십시오. 그렇지 않으면 어떤 플러그인이 범인인지 알 수 없습니다.
코드(Code) 변경은 또 다른 가능한 원인입니다. 실수로 또는 의도적으로 코드를 수정한 경우 원래 코드베이스를 복원하고 반응형 웹사이트가 다시 작동하는지 확인하십시오.
사이트의 모바일 응답성을 확인할 때 항상 모바일 장치에서 테스트해야 합니다.
데스크톱에서 브라우저 창의 크기를 조정할 때 작동하는 것처럼 보이지만 모바일에서는 제대로 표시되지 않는 경우가 있습니다.
HTML 헤더 파일 에서 한 줄의 코드가 누락 되면 반응형 디자인이 손상될 수 있습니다. 이 한 줄의 누락된 코드로 인해 모바일 장치는 보고 있는 사이트가 전체 크기의 웹사이트라고 가정합니다.
렌더링된 사이트는 뷰포트의 크기(사용자가 볼 수 있는 웹 페이지 영역의 크기)가 됩니다.
모바일 친화적인 사이트를 수정하려면 헤더 섹션에 다음 코드 줄을 추가하세요.
<meta name=”viewport” content=”width=device-width”>
때때로 테마가 업데이트되면 이 코드가 사라질 수 있습니다.
이미지를 로드하는 데 너무 오래 걸립니다.(Images Are Taking Too Long to Load)
이미지를 최적화하고 이미지 파일 크기를 줄이는(reducing image file size) 것이 좋습니다. 최적화되지 않은 큰 이미지는 웹페이지의 로딩 속도를 늦출 수 있습니다. 이것은 모바일 사용자에게 좌절감을 줄 수 있습니다.
WordPress 버전 4.4 이상은 서버에서 가장 작은 버전의 이미지를 자동으로 제공합니다.
이미 최신 버전의 WordPress 를 실행하고 있지만 사이트가 여전히 충분히 빠르게 로드되지 않는 경우 다음을 수행할 수 있습니다.
가장 중요한 내용은 명확하지 않습니다(Most Important Content Isn’t Obvious)
일부 웹 사이트는 데스크탑에서 열 때 빈 공간을 채우기 위해 불필요한 콘텐츠가 많이 로드됩니다.
모바일 사용자를 의식하지 않고 개발된 웹사이트는 일반적으로 이 범주에 속합니다. 이러한 사이트는 로드하는 데 더 많은 시간과 대역폭이 필요합니다.
페이지가 모바일 장치에 적합하게 디자인되지 않은 경우 많은 스크롤 없이는 콘텐츠의 일부가 모바일에 표시되지 않을 수 있습니다.
대부분의 경우 웹페이지의 요소는 컴퓨터에서는 한 방향으로 보이고 모바일 장치에서는 완전히 다릅니다.
예를 들어, 3개의 열이 있는 가격 책정 페이지는 컴퓨터에서 나란히 표시됩니다.
그러나 모바일 장치에서는 화면 크기가 더 작기 때문에 열이 서로 겹쳐집니다. 이 동작은 예상할 수 있습니다.
(Make)가격표가 웹페이지 상단에 위치하여 모바일에서 볼 때 가장 먼저 표시되도록 하세요 . 테이블 위에 많은 텍스트가 있는 경우 모바일 사용자는 아래로 스크롤해야 볼 수 있고 그렇지 않을 수도 있습니다.
최적의 모바일 사용자 경험을 위해 가장 중요한 콘텐츠를 페이지 상단에 배치하세요. 사용자가 콘텐츠를 보기 전에 많이 스크롤해야 하는 경우에는 그렇지 않을 것입니다.
너무 많은 정보(Too Much Information)
표, 다단계 양식 및 고급 검색 기능과 같은 복잡한 사용자 인터페이스 요소가 있는 사이트는 모바일 사용자 경험을 저하시킬 수 있습니다.
이러한 요소에는 모바일 화면을 복잡하게 만들고 사용자가 원하는 정보를 찾는 데 방해가 될 수 있는 너무 많은 정보가 포함되어 있습니다.
한 가지 접근 방식은 모바일 사용자로부터 일부 콘텐츠를 제거하거나 숨기는 것입니다. 그러나 이것은 이러한 요소에 액세스하려는 방문자에게 이상적인 솔루션이 아닙니다.
이 문제를 방지하려면 모바일 친화적인 사이트를 최대한 최적화하십시오. 또한 웹 사이트의 핵심 구조에 집중하면서 불필요한 요소를 제거하십시오.
작은 화면용 데이터(Data For Small Screens)
많은 행과 열이 있는 복잡한 테이블은 작은 모바일 화면에서 볼 때 문제가 될 수 있습니다. 가장 좋은 해결책은 반응형 테이블을 사용하는 것입니다.
WP Responsive Table 과 같은 플러그인 을 사용하면 이를 쉽게 수행할 수 있습니다.
위의 가격표와 마찬가지로 모바일 장치에서 볼 때 열은 작은 화면에 맞게 누적됩니다.
휴대기기에 데이터를 표시하는 다른 방법은 다음과 같습니다.
- 수평 스크롤의 필요성을 피하기 위해 그리드 레이아웃 없이 더 작은 테이블을 만듭니다.
- 작은 화면에 더 잘 맞도록 테이블을 옆으로 뒤집습니다.
- 더 큰 테이블을 정식 버전에 연결되는 더 작은 테이블로 교체합니다.
- 테이블을 원형 차트로 변환.
모바일 사용이 기하급수적으로 증가함에 따라 비즈니스 웹사이트는 모바일 친화적인 버전으로 최적화되어야 합니다. 위의 단계에 따라 기능을 희생하지 않고 사용자 경험을 향상 시키십시오.(Enhance)
또한 항상 사이트의 성능을 모니터링하고 성능과 사용자 경험을 개선하기 위해 필요할 때 조정해야 합니다.
7 WordPress Tips For a Mobile Friendly Website
There is nothing worse than having a great-looking desktop website and a mobile sіte 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.
- Refresh your browser several times on your desktop and mobile device.
- Test your website on different mobile devices.
- Clear your site with a caching plugin.
- 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:
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.
