Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-10-28
19
Medium Priority
?
645 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 500 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 500 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 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 54

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 54

Expert Comment

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

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 500 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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
It’s time for spooky stories and consuming way too much sugar, including the many treats we’ve whipped for you in the world of tech. Check it out!
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

609 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