Today, how can we turn your existing website into a mobile Internet]

Now everyone is fascinated by developing mobile sites. We may not be impressed by the small and outstanding mobile devices in our pockets, but we will be amazed by the experience of our websites.

Here are some ways to turn your website into a mobile Internet. The important idea is to find a balance point. You can:

• Do nothing.Your website may run on mobile devices, but it will look worse and worse in the increasing expectations of discerning users.
• Use the configurable \ Corresponding design.This is my favorite choice. If most of your website's content is displayed (relative to data entry), you can render the page layout based on the screen size to enjoy a good browsing experience on various devices. If you are more concerned about performance, you can add a server component to resize images for mobile devices. For more information, visit the http://mediaqueri.es.
• Use a framework designed for mobile devices.Now there are many powerful frameworks, such as Sencha, Kendo, and jQuery Mobile. These frameworks help you use html 5 to develop products that look similar to native apps.
• Develop native apps.At this stage, it is very difficult to develop apps with native experience without using native app technology. To get the best native app experience on mobile devices, you must create a native app. This requires a lot of work to get a good experience. However, if you use other technologies, you can use less than 90% of your energy for a 90-95% experience. In addition, users do not need to be forced to download annoying mobile apps, just like browsing mobile Web pages.

PS: optimized the relationship between experience and effort

If you visit my site http://hanselman.com with a cell phone or zoom out the browser size, you will see this blog using Jeremy Kratz's responsive design. The blog will change the screen size of different devices to change their appearance layout. For example, you can note that when the browser becomes very narrow, the navigation bar will become a drop-down menu.

This change is relatively small, but it is very user-friendly, so that my blog can allow those 8% who use mobile phones to visit more effectively.

For those data-based sites, or consider making them the mobile application version of the existing site. You can usually use the mobile application frameworks mentioned above. Here I will use jQuery Mobile as an example. Suppose I have a conference browsing system program. It looks like this on a desktop browser. You can view the date, speaker, tag, and meeting details.

If I browse the same page in a Mobile browser or Mobile device Simulator like Electric Plum Mobile Simulator, it looks terrible.

I can only define custom styles for mobile phones, or I can use CSS3 media query to make my existing styles more friendly to mobile devices, such:

Or I can use the ASP. NET MVC mobile feature to display different types of views (existing websites and mobile versions) using the same controller logic ). For example, I can have _ Layout. cshtml and add _ Layout. Mobile. cshtml to a Mobile device.

Here is a new _ Layout. Mobile. cshtml, which serves as the starting point for migrating the conferencing Browsing System Version. You can select a file in Visual Studio --> Create project --> ASP. NET MVC4, and select a mobile site to create a project.

Now I have created a custom _ Layout for the mobile version. mobile. cshtml will automatically identify and use _ Layout when I access it on a mobile device. mobile. cshtml instead of _ Layout. cshtml.

In this step, my application has used the mobile layout version, but the existing interface looks terrible. The reason is that the layout structure of my mobile version is still the same as that of the desktop version.

The desktop version uses the table layout. In the desktop browser, even if the table does not have a css style, there is no problem at all. It is just a display of the information table.

But in a smaller screen size, I need a mobile app layout that can display content more clearly. I can copy SessionsTable. cshtml to create and modify SessionsTable.Mobile. Cshtml, as follows:

Pay attention to the following points in the HTML section. First, I like the tag elements that are expressed by HTML5 data-attributes instead of CSS that describes and shows the appearance. For example, UL uses data-role = "listview" to tell you that this is a listview, but you don't have to worry about its appearance.

I added some LI in UL. LI contains semantic tags such as A, H3, P, and STRONG, and uses the default topic. It looks much more beautiful now, on mobile devices.

 

Not complete...

Address: http://www.hanselman.com/blog/CreateAGreatMobileExperienceForYourWebsiteTodayPlease.aspx