1. Be responsive.
"Use a responsive technology framework," .
"There are several of these available (we use Bootstrap).
"These frameworks are basically simple ways to lay out elements in a grid and then shift that grid based on different screen sizes, so that elements on a large monitor are spaced just as well as they would be on an iPad [or smartphone],"
"Frameworks like Bootstrap are open source (free), well documented and very easy to implement."
"Responsive is a more unified approach to Web development that allows you to create a similar experience for the user no matter how they are accessing the site (desktop, tablet or smartphone),"
2. Think with your thumb (or index finger).
"This is one of the most important tips for any mobile site as you want users to be able to navigate your site with their 'phone hand' without the use of a second hand. Additionally if you have to pinch to zoom, your content is probably too small or not perfectly optimized for that browsing device,"
"Most users visiting a mobile website will be using a touchscreen device, so ensure that the buttons and menu navigation are big enough even for fat fingers,". "Too often a mobile friendly website will simply resize the screen using CSS (media queries) and not take into account that fingers might cause misplaced clicks."
"The average index finger for most adults is 15 to 20 mm, which translates to 45 to 57 pixels. Our 'rule of thumb' (pun intended) is to give buttons or tap elements at least 45 pixels of space for selection areas,"."This allows the targets on screen to be easily selectable and removes many of the accidental taps from the user experience."
3. Keep the design simple.
"A clean design and focused copy can go a long way,"
"Remember that you only have a few seconds to convey who you are as a company. This is true for any website design, but is particularly important when you are designing for smaller devices."
Too many bells and whistles (i.e., graphics, copy, video) can hamper the site's ability to load quickly - and distract from your message. If you plan on using images, "try and serve images that are smaller in byte size as this will reduce the amount of time that users spend waiting for the page to load,"
4. Keep content short and sweet.
"The screen on a smartphone is much smaller than that on a desktop computer, so try to minimize the amount of text on your mobile website. Mobile users are interested in scrolling quickly so include only essential copy to keep the reader's attention."
5. Remember, an icon is worth a thousand (or, okay, a dozen) words.
"To keep your site from looking cluttered, use conventional mobile [icons], rather than words for tap to call, connect socially or find the menu,". "Using these symbols helps viewers know that the site is optimized for mobile."
6. Make it fast -- by serving images that are optimized for mobile.
"So be sure to strip down the heavy media files that exist on your desktop site, such as videos,"
"Use media queries to repurpose your desktop site's retina-ready images into lower res versions. And consider replacing bulky JavaScript libraries like jQuery Mobile with standalone JavaScript."
"Mobile device resolutions and aspect ratios are very fragmented -- [ranging] from 240 x 320 to 2560 x 1440 and above,"
"Also consider that mobile devices operating under a 3G network are still considerably lagging behind in download speeds and that many mobile users out there pay for bandwidth use. Factoring all of this in means that it is crucial to resize, crop and optimize images to best fit the specific device resolution and aspect ratio,"
"This can save a huge amount of bandwidth, dramatically reducing mobile Web pages loading times while greatly improving visitors' browsing experience."
7. Don't go overboard with Java.
"Avoid excessive JavaScript in your mobile websites where possible, because it runs differently across different browsers and devices,"
"Even different models of the same phone can often behave quite differently when it comes to JavaScript,"
8. Make it easy to find your phone number, location and contact info.
"Often, users are looking for store hours, a contact or booking number or perhaps the business's nearest location. The easier it is for users to access and take action on this information, the better the user's experience,"
9. Consider video, but add it wisely.
"Video is an absolute must-have for any mobile site,".
"That's because consumers using mobile devices are three times as likely to watch videos than laptop/desktop computer users,"
"use a video technology that provides a flawless mobile experience. Your mobile video player should run HTML5 to ensure that it can play on most mobile devices,"
"In addition, use a video player that's lightweight (doesn't consume valuable bandwidth and processing resources) so that you can significantly improve page loading time and provide a better overall experience."
10. Make sure forms are designed for mobile.
"Minimize the number and size of form fields as much as possible, and leverage the technology built into mobile devices to optimize usability,"
"For example, GPS is usually accessible. So don't ask someone to enter their city, state and ZIP if you can prepopulate it instead."
11. Consider geolocation.
"Businesses can use geolocation to give directions, allow visitors to check in-store availability at the nearest store location, offer targeted promotions, offer online shoppers prices in their local currency and connect to social communities such as Yelp."
12. Test to ensure your content can be properly viewed on different devices, platforms and operating systems.
"Remember to test the mobile user experience by operating system to improve overall site experience with usability testing,"
"Some of the mobile testing tools that are emerging include Solidifyapp, UXRecorder, POP and delight.io."
Source: http://www.cio.com/article/2377938/online-marketing2-tips-for-creating-a-mobile-frien/online-marketing/12-tips-for-creating-a-mobile-friendly-website.html
"Use a responsive technology framework," .
"There are several of these available (we use Bootstrap).
"These frameworks are basically simple ways to lay out elements in a grid and then shift that grid based on different screen sizes, so that elements on a large monitor are spaced just as well as they would be on an iPad [or smartphone],"
"Frameworks like Bootstrap are open source (free), well documented and very easy to implement."
"Responsive is a more unified approach to Web development that allows you to create a similar experience for the user no matter how they are accessing the site (desktop, tablet or smartphone),"
2. Think with your thumb (or index finger).
"This is one of the most important tips for any mobile site as you want users to be able to navigate your site with their 'phone hand' without the use of a second hand. Additionally if you have to pinch to zoom, your content is probably too small or not perfectly optimized for that browsing device,"
"Most users visiting a mobile website will be using a touchscreen device, so ensure that the buttons and menu navigation are big enough even for fat fingers,". "Too often a mobile friendly website will simply resize the screen using CSS (media queries) and not take into account that fingers might cause misplaced clicks."
"The average index finger for most adults is 15 to 20 mm, which translates to 45 to 57 pixels. Our 'rule of thumb' (pun intended) is to give buttons or tap elements at least 45 pixels of space for selection areas,"."This allows the targets on screen to be easily selectable and removes many of the accidental taps from the user experience."
3. Keep the design simple.
"A clean design and focused copy can go a long way,"
"Remember that you only have a few seconds to convey who you are as a company. This is true for any website design, but is particularly important when you are designing for smaller devices."
Too many bells and whistles (i.e., graphics, copy, video) can hamper the site's ability to load quickly - and distract from your message. If you plan on using images, "try and serve images that are smaller in byte size as this will reduce the amount of time that users spend waiting for the page to load,"
4. Keep content short and sweet.
"The screen on a smartphone is much smaller than that on a desktop computer, so try to minimize the amount of text on your mobile website. Mobile users are interested in scrolling quickly so include only essential copy to keep the reader's attention."
5. Remember, an icon is worth a thousand (or, okay, a dozen) words.
"To keep your site from looking cluttered, use conventional mobile [icons], rather than words for tap to call, connect socially or find the menu,". "Using these symbols helps viewers know that the site is optimized for mobile."
6. Make it fast -- by serving images that are optimized for mobile.
"So be sure to strip down the heavy media files that exist on your desktop site, such as videos,"
"Use media queries to repurpose your desktop site's retina-ready images into lower res versions. And consider replacing bulky JavaScript libraries like jQuery Mobile with standalone JavaScript."
"Mobile device resolutions and aspect ratios are very fragmented -- [ranging] from 240 x 320 to 2560 x 1440 and above,"
"Also consider that mobile devices operating under a 3G network are still considerably lagging behind in download speeds and that many mobile users out there pay for bandwidth use. Factoring all of this in means that it is crucial to resize, crop and optimize images to best fit the specific device resolution and aspect ratio,"
"This can save a huge amount of bandwidth, dramatically reducing mobile Web pages loading times while greatly improving visitors' browsing experience."
7. Don't go overboard with Java.
"Avoid excessive JavaScript in your mobile websites where possible, because it runs differently across different browsers and devices,"
"Even different models of the same phone can often behave quite differently when it comes to JavaScript,"
8. Make it easy to find your phone number, location and contact info.
"Often, users are looking for store hours, a contact or booking number or perhaps the business's nearest location. The easier it is for users to access and take action on this information, the better the user's experience,"
9. Consider video, but add it wisely.
"Video is an absolute must-have for any mobile site,".
"That's because consumers using mobile devices are three times as likely to watch videos than laptop/desktop computer users,"
"use a video technology that provides a flawless mobile experience. Your mobile video player should run HTML5 to ensure that it can play on most mobile devices,"
"In addition, use a video player that's lightweight (doesn't consume valuable bandwidth and processing resources) so that you can significantly improve page loading time and provide a better overall experience."
10. Make sure forms are designed for mobile.
"Minimize the number and size of form fields as much as possible, and leverage the technology built into mobile devices to optimize usability,"
"For example, GPS is usually accessible. So don't ask someone to enter their city, state and ZIP if you can prepopulate it instead."
11. Consider geolocation.
"Businesses can use geolocation to give directions, allow visitors to check in-store availability at the nearest store location, offer targeted promotions, offer online shoppers prices in their local currency and connect to social communities such as Yelp."
12. Test to ensure your content can be properly viewed on different devices, platforms and operating systems.
"Remember to test the mobile user experience by operating system to improve overall site experience with usability testing,"
"Some of the mobile testing tools that are emerging include Solidifyapp, UXRecorder, POP and delight.io."
Source: http://www.cio.com/article/2377938/online-marketing2-tips-for-creating-a-mobile-frien/online-marketing/12-tips-for-creating-a-mobile-friendly-website.html
Nhận xét
Đăng nhận xét