≡ Menu

Optimizing for Mobile

First of all, make sure you understand the concept of the viewport!

Updates for smartphones and large screen displays

Considering that the mobile computing landscape changes quite dramatically and very quickly the specifications of a 480px wide device is actually rather limiting. An iPhone 4 actually has a screen resolution of 640×960 @ 326dpi while a DROID 2 Global by Motorola, A956 is 480×854. You can see all the specs in the Smartphone Front-End Matrices.

Therefore, we can adapt the basic rules for designing for mobile with an additional set of media queries. There is also a Mobile HTML 5 Boilerplate CSS sheet.


	/* Smartphones (portrait and landscape) ----------- */
	@media only screen and (min-device-width : 320px) and (max-device-width : 569px) {
	/* Styles go here */
	}
	
	
	/* Smartphones (landscape) ----------- */
	@media only screen and (min-width : 321px) and (max-device-width: 569px) {
	/* Styles go here */
	}

That being said, it is possible to extend this set of rules to be ready for smartphones (both in landscape and portrait mode), iPads (both in landscape and portrait mode) as well as very high resolution phones such as the iPhone 4 (in both modes):


/*
* Media queries for responsive design - http://goo.gl/fdFdf
*/


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 569px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-device-width: 569px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) and (max-device-width: 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

What to do for the eportfolio

Please use the following checklist to implement a mobile friendly version of your eportfolio.

First of all, please add your mobile CSS rules near the bottom of your style.css stylesheet. There is no need to add a different stylesheet (it just slows the download and loading of the web page). On the HTML 5 Boilerplate CSS sheet, you place the rules on line 235: below the reset and author rules but before the print rules.

Your main objective: Create a set of CSS rules that apply to the HTML as is (do not change your HTML!). A successful mobile version will be defined by being able to start reading the page without having to spread your fingers to zoom in! (zooming out: pinch; zooming in: spread) The images, text size and layout should all be at the correct scale so that no zooming in or scrolling sideways would be necessary to be able to start reading the contents of the portfolio.

  1. Add this meta tag to the <head> within header.php: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  2. Remove any float CSS rules from your elements. For example, set the figure tag to display: block instead of float: left. In other words, make sure everything lines up top to bottom. There is no room for sidebars or side-by-side positioned elements.
  3. Set the width of the container div to a value around 300px or so. Please remember that if you add margins, borders, or padding substract these values from the width you set.
  4. Set the top and bottom margins for your figure tags so that they display nicely one on top of the other on a phone.
  5. You can set new font-size values for your text in figcaption.
  6. You can force set the image size of the thumbnails like this: #container figure.thumbnail img {height: 200px; width: 300px; display: block; margin: 0 auto 10px auto;}
  7. If you find that your rules need to be forced use the !important attribute. Insert it within the rule before the semicolon.
  8. You may need to set the width of elements like <header> and <footer>.

How to test

Obviously, we do not have many different smartphones at our disposal to be able to test our sites as we would like. If you have a Mac, you can always sign up to become a Registered Apple Developer (free) so that you can download the iOS Software Development Kit (SDK) and use the iPhone Simulator. It is the next best thing to having a real iPhone. You can also get the Android simulator
(warning: geekiness required).

Dreamweaver

Add a new size to the Window Size pop‑up menu

Window Size Popup menu

  1. Select Edit Sizes from the Window Size pop‑up menu.
  2. Click the blank space below the last value in the Width column.
  3. Enter values for Width and Height.

    To set the Width or Height only, simply leave one field empty.

  4. Click the Description field to enter descriptive text about the size you added.

    For example, you might type iPhone 3 / iPod Touch next to the entry for an 320 x 356 pixel monitor, or MacBook Pro 17 next to the entry for an 1920 x 1018 pixel widescreen LCD. Most monitors can be adjusted to a variety of pixel dimensions.

Firefox and Chrome

Resize

If you use Chris Pederick’s Firefox Addon Web Developer Toolbar or the Google Chrome version you can use the Resize function to set the dimensions of the Viewport.