5 rules for building a mobile-friendly website It's annoying to visit websites using mobile devices like iPads, iPhones, Motorola Zoom, Atrix, and Blackberry Torch. And searching for sites tailored to the desktop isn't easy. However, it's unpleasant to be oversimplified and lead to a website that has lost its original site value. These things happen all too often.
But the truth is, there is no reason for that. The first scenario occurs because we don't use a very simple web template technology that automatically displays a website to fit the small screen of a mobile device. And the second scenario is that the website essentially simplifies the web page or introduces a mobilization service that takes an RSS feed and then creates a WAP-compatible version of the site that can be used on almost any mobile device.
There is a problem with the WAP method. This is because, in order to support older mobile phones that are not intended to be able to access the web, in many cases, they are aligned with the least common denominator in a way that simplifies basic content such as links. Most of the mobile devices, such as Nokia phones and BlackBerrys that came before Bold, use the Internet with only 0.5% of the total.
Therefore, it is foolish to optimize for older phones at the expense of iOS, Android, BlackBerry OS 5 or later, Windows Mobile, Windows Phone, Web OS, and Nokia's Symbian.
The method is simple. In a word, you don't have to do anything stupid. Instead, the five rules I will introduce from now on should be applied to the website to effectively handle the increasing number of mobile web users.
1. Detect equipment accessing a website
Perhaps, to detect numerous anomalies in Internet Explorer, the browser is being detected using an on-page JavaScript or server-level Apache script. This user-agent is used to detect mobile devices. In this regard, the tools from Zytrax are useful because they are updated frequently and provide a comprehensive user agent.
Tip: Motorola Mobility's Zoom tablet classifies itself as an Android device. Therefore, if you are not careful, it can be processed with a smartphone to provide a screen. This is a very important part of zoom users. It also needs to detect the browser window size and use this information to distinguish between Android smartphones and tablets. But for the iPad, you don't need to take this into account. This is because the user agent is different from other iOS devices.
2. Disassemble the web page
Once it detects a mobile device accessing a web page, it needs to properly render the page. The first thing to do for this is to design and build pages into components using DIV. It is not possible to display a web page set in 1024X768 resolution through a 320X480 mobile device.
Therefore, after making the elements into DIV, it is necessary to display the screen for each device. This is the most important part of creating a website that fits automatically.
Tip: Do not use absolute values when determining page width and table width. Instead, use percentages if possible. This avoids creating elements that are larger than the screen of the mobile device (after reducing the large elements, the page is shrunk to fit). The exception is embedded objects such as images. You may want to reduce the size, in which case you can give an absolute value for the width or height.
3. Prepare a layout scenario and program using AJAX and CSS
There are areas that require design skills. You need to figure out how to display the page in a normal browser window. There are actually only three sizes to care about.
-Smartphones are 320 or 480 pixels. This depends on whether you are optimizing for a vertical or horizontal screen. Personally, I recommend optimizing it with a vertical width of 320.
-The tablet is 768 or 1024 pixels. In this case, it is recommended to optimize to 1024 pixels based on the horizontal width.
-In the case of a desktop browser, it is highly likely to be 1024 pixels. Especially if you are designing your site based on the most common 17-inch monitor.
When it comes to smartphone and tablet screen sizes, don't worry about small differences. Because these three sizes fit overall. If you want to optimize it for widescreen tablets like Motororo's Zoom, add 1280 pixels to those sizes.
Now it's time to decide for each of the three (or four) layout scenarios. In some cases, you may decide to subtract certain elements of the page so that it doesn't look too complicated for a smartphone. Instead, you can link some of the removed elements to a new page via a link. Or, you can prevent mobile users from seeing it.
In another case, you are moving components. To optimize for smartphones, stack these components vertically in a single column, or keep more traditional horizontal columns to optimize for tablets or desktops.
Next, it hides the DIV decided not to show it, replaces the version if necessary, and generates CSS while applying the appropriate layout parameters for each device type. After detecting a mobile device using JavaScript, the appropriate CSS is called for each device. Alternatively, you can use an Apache script to detect the mobile device and then link back to the page.
This approach means that each device has to maintain a separate page for management and reporting. However, it avoids the overhead of JavaScript and the complexity of putting everything on one page. You can also use JavaScript or PHP code to modify layouts that CSS does not handle.
Of course, the web page should be based on a template with these DIVs and additional CSS and JavaScript links. This eliminates the need to manually code each page for different cases. Of course, pages that need to be customized require separate coding. However, most pages should be based on templates. Especially if you are using a content management system to create pages.
Tip: After completing the CSS for each device type, you may want to expand the font section to accommodate the fonts available on popular mobile devices. For example, you can add Lucida Grande and Palatino fonts to CSS to take advantage of the iOS system fonts. (For Mac desktop users too). You can also add BBAlpha Sans and BBAlpha Serif fonts for BlackBerry users. The advantage of CSS font items is that it ignores fonts that the browser does not have. So you can itemize all possible fonts in one CSS.
Tip: For web pages that can't be made mobile-friendly, but you need to make them accessible, there are a few things you can do. This is a method of displaying a guide page indicating that it is not compatible with mobile so that they cannot be connected or sending a desktop page to the user as it is. In the latter case, it is also possible to include a guide page that informs that the movement of the web page is not an error.
4. Eliminate exclusive skills if possible
A well-designed website sticks to HTML 4, core HTML 5 features that are widely introduced, JavaScript, and CSS. So it works great on all of the many popular desktop browsers. But the reality is a little different. Many websites were created during a time when Internet Explorer was no different from the standard.
And for this reason, I am using ActiveX or other technologies that only work in IE. We need to get rid of our dependence on this particular technology. It does not support mobile devices and desktop browsers such as Firefox, Safari, and Chrome.
Also, sites that use Adobe Flash may have similar problems. Most desktop browsers support this plugin. However, only Android OS 2.2 currently supports mobile devices. Therefore, most smartphones and tablets cannot reproduce the flash video. This isn't specific to iOS.
It doesn't make sense to get rid of the existing Flash video, which is already available for desktop and Android 2.2 users. But you shouldn't add any more flash videos. You'll also need to use JavaScript or CSS to decide whether to remove Flash video from mobile web pages. This is because it cannot provide a video that cannot be played. And gradually, you have to change the video to a format like H.264. This is because browsers with HTML5 capabilities (most common desktop and mobile browsers today) have codecs.
5. Give users a way to access web pages for their desktop
Many users don't like websites that are automatically optimized for mobile. They want to use all of their desktop browser features, regardless of device. So, you have to give them a choice to switch to a desktop site. If you want to provide a more sophisticated service, store a cookie showing your preferences. And the next time the user visits the site, it automatically presents the desired type of site. However, be prepared in case your mind changes later. To do this, put a'mobile settings' link on the page.
Standards-based mobile
You can also pay for a service that analyzes and simplifies an existing website, or absorbs an RSS feed to create a website for mobile. However, this not only continues to incur costs, it does not produce very satisfactory results.
Using standard web technologies, it makes more sense to redesign a mobile-friendly website. If you do this at the template level, you can quickly create a mobile-friendly site. The number of people using tablets and smartphones is increasing. Therefore, it is necessary to anticipate their utilization and create a website. editor@iddg.co.kr
0 Comments