Solved

what is the difference between mobile website and normal pc website?

Posted on 2013-10-28
19
575 Views
Last Modified: 2014-10-23
Dear sir,
we have one website working well for the PC to access.
Unfortunately, the web page can not be displayed well by iPhone.
What is the different between the web page for pc and for mobile smart phone technically?

Thanks for any information
0
Comment
Question by:matiascx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
  • +4
19 Comments
 
LVL 10

Accepted Solution

by:
Owen Rubin earned 125 total points
ID: 39606038
As simple as it sounds actually.

A mobile website is one optimized to be viewed on smaller screen mobile devices. Typically, the mobile design will eliminate wide pages, and represent the page in a longer, less wide format.

A Standard "PC" website is typically optimized for a larger screen as you would find on a desktop or laptop computer, say 1024x768 or larger.

Many modern web design tools, like WordPress and Joomla (and their themes) often contain both a mobile theme and a standard theme, and will detect the device and re-layout the page for the proper screen size.

At a minimum, if you do not support a mobile screen directly, your screen should properly resize when resized so that a mobile device user can at least scroll about the screen and see everything. Not optimal however.

Also note that iOS devices to not run Flash, so some mobile website designs will eliminate Flash so that it runs on iOS devices.

So the question back is how was this website created? (what tools, etc.)
0
 
LVL 11

Expert Comment

by:Guru Ji
ID: 39606046
Mobile browsers are essentially scaled-down versions of standard HTML web browsers viewed on a computer. If you do opening a website which contains or run using Adobe Flash, it won't work on any apple mobile devices because Apple mobile devices don't support Flash.

Rest if its just a static HTML website, it can be viewed in any mobile browser.

Hope that helps
0
 

Assisted Solution

by:FutureIOSGuru
FutureIOSGuru earned 125 total points
ID: 39606055
The difference is in how the content is formatted.  Most mobile-optimized sites are simply styled differently via CSS (http://www.w3.org/Style/CSS/learning).  Where you would have a CSS file that will display the site on a larger screen type for "PC" viewing, and the smaller device display will use the "mobile" style sheet. (http://www.w3.org/standards/webdesign/mobilweb.html)
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 125 total points
ID: 39606066
>web page can not be displayed well by iPhone.

What does this mean?  Is the page too wide and you have to scroll?  What you want to today is a responsive site.  This means the pieces can resize and move around as the screen size (viewport) changes from desktop, to ipad to phone.

https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design

There are some projects you can use as a base so you don't have to reinvent the wheel.  I use http://getbootstrap.com/ more and there is also http://foundation.zurb.com/.  Both have a grid, responsive css and media queries and other js/jquery options.    They are not meant to be a ready to go template, but rather a base of options you would use from site to site.

Making a responsive site does take more thought and planning as on a full screen you may plan to have 3 columns where an ipad/tablet you may have 2 columns and one stacked and 3 stacked on the phone.  In some cases, a full size image needs to be larger on a phone.  They key is you plan for all of this on one page.  It can be confusing for people starting out.
0
 

Author Comment

by:matiascx
ID: 39606069
Thanks a lot for your information.
My mobile website seems does not support resize feature.
That site is developed by other guys.
I want my site can resize by iphone brower. How to do that?
What is more, is there any difference between the mobile brower and pc browser?
Are the html standard totally supported by mobile browers?

Thanks!
0
 

Author Comment

by:matiascx
ID: 39606097
The page does not look well means:
It can not be resized, the page fonts always looks big on the mobile iphone. We must scroll down a lot to see the full page.
I'd like one page who can be resized by iphone two fingle drag to zoom in/out .
Is that the so called responsive site?

Best Regards/robert
0
 
LVL 19

Expert Comment

by:Richard Daneke
ID: 39606124
Each browser has some peculiar behavior.  Better web developers test on the browser requesting the page and adjust their code for the browser.

Screen size is the major difference.  A test on screen size in the web page can redirect the html to a different set of html files for the mobile screens.

If you do not have control over your web page development because it is handled by another firm, you have to let them code the changes for mobile devices.  Or, change developers.
0
 

Author Comment

by:matiascx
ID: 39606153
How to determine web browser is mobile or pc?
I will change the dev team if i know what should do then.
0
 
LVL 19

Expert Comment

by:Richard Daneke
ID: 39606178
One of the web sites I work with uses this test in the <HEAD> to redirect:
<!--
if (screen.width <= 699) {
document.location = "http://your domain name here.com/mobile";
}
//-->

Open in new window

Some people test to see if the requestor is using iOS (Apple device) and more.   Internet searches can show several different examples.   This is a simple test for web pages where the width is less than 700.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39606211
If the site was done a few years ago, chances are it was not made using "responsive" media queries although it has actually been around for some time.  

Most (new) sites now are made to be responsive.  There are probably 40%+ using some form of "mobile" if you include tablets.   It may not be the team, but the process.  If you have a large site with a large userbase, you may want to consider a native app as well.
0
 
LVL 10

Expert Comment

by:Owen Rubin
ID: 39606270
If this site was built by others, you will either have to hire them again to fix it, or learn how to add the proper formatting yourself.

If the site is not resizing properly now, there are many reasons, most of which have to do with absolute size styles being used in the design.

If you post a link to your site, we can look at the source and see as well.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39606848
We can spend days speculating about this, or you can post a link to the page and then experts will be able to give you specific advice.  

Without seeing the page it is like asking an auto mechanic why your car won't start over the phone.  You might get lucky, but results are generally better with a hands on approach.

Cd&
0
 

Author Comment

by:matiascx
ID: 39607548
my website is : www.guozhiyin.com 
I 'd like to the web page should be resized by two finger dragging.


Best Regards,
robert
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39607716
It seems to work fine on my android when I pinch.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39607740
The validator shows some issues http://validator.w3.org/check?uri=http%3A%2F%2Fwww.guozhiyin.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0


COBOLdinosaur can probably answer this better, but I believe the first error will is typically ignored or you can send it in your htaccess.  
 
Line 4, Column 65: Bad value X-UA-Compatible for attribute http-equiv on element meta.
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

You also have duplicate id's. You can have duplicate classes, but only one unique id.

Go through your errors and if you you are not sure how to fix, then post a new question.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 125 total points
ID: 39610094
The meta tag is non-standard but it is an acceptable hack for keeping IE 8 out of quirksmode.

The structural errors may or may not be contributing grief, but they need to be cleanup up in any case.

The page is so over scripted that it is impossible to tell how anything is going to react cross-device without doing a detailed tour of the DOM.  I'm not even sure if media queries will save it.

I see two red flags that tell me it is never going to be maintainable cross device.  there are style sheets down in the body, and there is inline styling using !important.  Even in a styleheet most Experts consider !important to be last chance desperation and a hack.  I cannot think of any case where it should be necessary inline unless the scripting has shredded the markup to the point that it is impossible to determine what is being applied to given elements.

Your best option here is to do separate pages for mobile devices.  Do them tp standard and get rid of all the unnecessary scripting.  After you have that working you need to re-visit the pc version to rationalize it and get rid of all the scripting that cannot be justified. The way it looks right now a directory of script libraries was just dumped in in case some of it might be needed.

Cd&
0
 
LVL 10

Expert Comment

by:Owen Rubin
ID: 39610188
So looking at the site we are back to my original comment of what you expect from a mobile device. This page is readable on a mobile device, you just have to scroll around a lot. This was not a mobile optimized page, but it can, for the most part, be read on a mobile device.

I agree with COBOL, given the dynamic nature of this site, I would have a separate  design for mobile and PC.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
easy to understand video about affiliated marketing for a beginner 3 52
Designing forms 3 43
Understanding UserAgent String 2 46
Drop Down not working in mobile- Bootstrap 14 31
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question