How to make an HTML webpage the correct size on a mobile device

I have written about this a few times (just last week) and I wanted to add some details to the discussion. Basically when designing a webpage for the mobile device you want your page to show up as the correct size on the device so the user does not need to zoom. To do it you would use the viewport code. Today I am adding some more details to that:

General width. Keep in mind the ‘780’ changes depending on the size of your actual page:

<meta name="viewport" content="width=780">

This code just matches their device regardless of what you set:

<meta name="viewport" content="width=device-width">

The following disables zooming altogether:

<meta name="viewport" content="width=device-width, user-scalable=no" /> 

This sets the zoom level when the page is first opened:

<meta name="viewport" content="initial-scale=1">

This creates no zooming and the user has to move the screen around:

<meta name="viewport" content="maximum-scale=1">

I encourage you to try them all out to see what works for your site and so that you get a better idea of what they all look like.

Developing for the mobile web – size

This is an update to a previous blog post of mine that has now been updated (https://raypastore.com/wordpress/2011/05/developing-a-website-for-the-mobile-web/)

So when developing a website for the mobile web we need to take into consideration the screen’s size. Obviously since we develop on a computer we need to test a lot to make sure our page looks right on the mobile device. So here are a few quick tips which are updated from my previous post:

1. Most phones compress the page (display) 980 pixels in width. That means that a page that is 980 pixels on a browser (desktop) will be compressed to the fit the phone. However, that is not always the case so we add this line of code:

2. The line of code, which is placed in the header (<head>):

<meta name=”viewport” content=”width=780″>

Will make the page compress to 100% of the phones width (a %) rather than a strict defined width. This is a good option for those developing for multiple devices which is usually the case when developing for the mobile web…otherwise you would just develop an app.

Google announces nexus 4, 7, and 10

The nexus 4 is a phone and 7 and 10 are tablets. I am going to talk about the nexus 4 because this is the device that both amazes and disappoints me.

First of all, here is the information on all 3 devices: http://www.google.com/nexus/

Now onto the nexus 4:

8mp camera
Quad core processor
2 GB Ram

So what disappoints me: NO 4G. I really wish this phone had 4G. And since this phone is HSPA I am not 100% sure it will run on verizon (rumor is that it will not work on verizon) but it will definitely with ATT.

Now why is this phone the best phone on the market right now: I can buy an unlocked version for $299. Thats right, under no contract with a carrier I can buy this phone outright for $299.

Now for those that do not know what this means let me share with you….When you normally get a phone under contract through verizon/att you pay $299 for a phone that normally costs $650. So you actually pay for that difference in your contract, meaning that your plan is higher than what it really should be so that you pay back that difference in the 2 year contract you sign. So technically when you buy a phone outright, your monthly plan should be significantly cheaper. But its not, why? Phone companies are making money off of you not knowing this information. Well the information is well known just not by the general consumer so no one complains. So if we start buying phones off contract then companies will have no choice but to get rid of their ridiculous monthly fees that we are currently paying.

Developing for the mobile device chart

I made this little chart for my students as a guide to help them know what options are available for mobile device development:

Developing for the mobile device

  Native Apps Mobile Web
  Apple Android Android
Browsers
Apple
Browsers
xCode x      
Eclipse   x    
HTML(5) Mobile Packaging software

(ie software that outputs to xCode and Eclipse such as PhoneGap)

x x x x
HTML (5) Development Software (ie software that outputs HTML/HTML5 such as dreamweaver)     x x
Flash (any Adobe Air compatible software) x x x x

Apple vs. Samsung: When does it stop?

If you have been following tech news or my blog you know about the patent war going on between these two companies. Here is a good article by mashable describing the ridiculousness that these patents claim. For instance, the article explains how patents are so broad that its impossible to build a phone without copying. This would be equivalent to Ford claiming that a mercedes was copying it.

The article uses this example from history with the wright brothers:

“Everyone knows the story of the Wright brothers and their historic flight in December 1903. What you may not know is that the Orville and Wilbur Wright submitted a patent for their invention months earlier, which was eventually granted in 1906. Then the airplane patent wars began.

The Wrights sued Glenn Curtiss (among others) for infringing on their patent with his company’s aircraft designs. The thing was, the Wright brothers’ patent was so broad, it was virtually impossible to build any kind of aircraft without infringing on it. Eventually the two sides were forced to settle their differences at the advent of the First World War, when the U.S. government stepped in and created a temporary patent pool for wartime production, which eventually became permanent.”

Here is the full article: http://mashable.com/2012/08/21/apple-samsung-copying/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Mashable+%28Mashable%29

Want to build apps for iPhone and iPad? Start with Xcode

Once your purchase the license to develop for Apple ($99) you are ready to download Xcode, which is the program used to develop you Apple apps. Xcode is a development tool created by Apple. With Xcode you can create your app, test it with an emulator, and publish it to the iTunes app store (after extensive apple review of course).

How difficult is Xcode? If you are new to programming, its going to be very difficult. Xcode allows you to use C/C++ to program your app. In addition to knowing the language you need to understand Xcode interface as well as design for iPhone/iPhone, so it can get complicated very quickly. For the experience object oriented programmer, Xcode should not be too difficult to pick up. Overall, this software is not made for designers, rather experienced programmers.

Apple sells 2x as many iPads as iMacs to schools – Is this a good thing?

Article: http://mashable.com/2012/07/24/apple-ipad-education-sales/

While I think it is great that schools are adopting new technology I have to wonder, did schools jump the gun here? I know that some schools are definitely using the iPad for some really cool things and I love to see innovation. However, I wonder, and this really only applies to schools who bought iPads to replace computers, do all of these schools have enough computers for each student already? I ask because you can purchase a PC for the same price as the iPad (there is no educational discount on iPads so they are $500 for schools). If a school does not have a computer for each student, I would question their purchase of iPads for each student (if that is what they did because just purchasing some iPads is not what I am talking about here in this post). Computers are significantly more powerful than iPads and can do much more. I only recommend that my students by a computer first and if they have more money, then get the iPad. Do not just get the iPad and expect it to replace their laptop. So while I like mobile/tablet technology and think it does have a place in education, I would question anyone who is using that technology to replace computers because it does not and I do know that some schools are replacing computers with iPads which I believe is not a good way to use this technology.

How is Google Chrome doing on iOS?

It has 1.5% of the market share. The thing is, its only been available for a few weeks and its already grown that much. Will Safari stay king on iOS though? My guess is yes. Most people will not download another browser when safari comes with the iPhone/iPad. I do not even download browsers either and just use the default on my Android device although maybe I should change.

Source