EverWeb Widgets

Mobile Website Testing

There's little point in even contemplating a web design without a means of testing it in the various devices. Mac users are fortunate in having access to the iOS Simulator to test their full site designs for compatibility with tablet devices and the "mobile" version in the various sizes of smart phone in both portrait and landscape mode.
For those that find this too technical, the major browsers - Firefox, Chrome and Safari - have options for tesing in various devices using the Developer Tools.
NOTE: This page uses the Mobile Infinite Scroll widget which can accept up to 100 items with an infinite scroll option. It is similar to the Mobile Blog List widget.
The optional sticky footer has controls for auto update of the copyright year and a smooth scrolling, back to the top button.

  • iOS Simulator

    iOS Simulator

    The iOS Simulator is part of Xcode - a free app for designing software for Apple devices.
    Using your Apple ID, sign in or register as a Developer and then Download Xcode.
    Once installed, you should see it in the Applications folder. Control (right) click it and select to show the package contents.
    Drill down through the folders: Contents/Developer/iOS Simulator Select iOS Simulator.app and do a Command L to create an alias. Drag this alias onto the desktop or put it the Dock or somewhere convenient like in the Applications folder.

    Use the "Preview" button in the EverWeb toolbar to open the page in Safari. Click in the center of the URL box to highlight it and then hold down the mouse on the favicon and drag the URL onto the Simulator App window.
    Click the image above to enlarge it and see how to select the device type.
    Use Command + Arrow Right to view in landscape mode. Use Command + Arrow Left to return to portrait mode.

  • Firefox

    Firefox

    Firefox has a "Responsive Design Mode". This is accessed from …
    Tools > Web Developer > Responsive Design Mode
    or by using the keyboard shortcut …
    option + command + m

    There are no device types as such although there is a menu at the top left for selecting screen size.
    Click the "Rotate" button to the right of the screen size selector dropdown menu to change between portrait and landscape mode.

  • Safari

    Safari

    Apple’s Safari browser for desktop is the least well equipped for testing since it doesn’t have an option to change the viewing mode between portrait and landscape. It is useful for quickly checking the page design on all Apple devices from the smallest iPhone through iPads to a desktop.
    It is necessary to implement the Develop drop down menu by opening Safari > Preferences > Advanced and checking the box Show Develop menu in menu bar.

    The responsive design mode is opened from …
    Safari > Develop > Enter Responsive Design Mode
    or …
    option + command + r
    Select the required device icon.

  • Google Chrome

    Google Chrome

    Google Chrome is the best desktop browser for previewing pages designed for touch devices. It has a large choice of device types and manufacturers. It also allows the device to be switched between portrait and landscape mode by clicking "Swap dimensions" (refresh icon) situated to the right of the screen size in the toolbar …
    View > Developer > Developer Tools option + command + i Select the device type from the menu at top left.

    Chrome has a large selection of both smart phone and tablet device types from all the major manufactures which makes it much more useful than the other browsers.
    For advanced level users, Chrome also displays the page source code and styles in a panel to the right of the device view.

  • mobile device viewing mode

    Viewing Mode

    The widget used for this demo is the Mobile Image Grid Gallery. This is to illustrate how important it is to test all the items in both portrait and landscape mode.

    Note how the image grid appears when viewed in the different modes in the Chrome and Firefox examples above.
    The lightbox enlarged image should be viewed in landscape mode to make sure that the chosen image aspect ratio gives the best possible result. In this case, the image could have been given a higher aspect ratio so that it fills the screen in landscape but it wouldn’t be very satisfactory in portrait mode.

© EverWeb Widgets -