Search

Module: Editor

Version: 4.4.10 +

User: Developer

Introduction

In this manual we'll try to inform about the veriaties of developing a responsive website in Futurama. There are a couple of subjects that are discussed. See Description for more information.

 

Prerequisites

- Known with the Futurama editor

 



  

 

 

Description

Nowadays there are a lot of different devices which people are using to connect to the internet. For developers, this can be challenging, as you want your website to look good on each different platform. When people visit a desktop website on a mobile device, they can be overwhelmed by the amount of information that is displayed on a small screen, in a user-unfriendly way.
One option for this would be to develop a whole new application for mobile devices. However, this would make your functionality less easily maintainable, as you'd have to implement each new or improved feature twice from that point on.

Our solution to support different devices therefore is 'responsive design'. With responsive design the layout of a website is adapted depending on the size or characteristics of the visitor's device. You could also differentiate in functionalities between for instance mobile and desktop devices. For example:

On a mobile website, you prefer to have a small header and footer so that the center of the site is able to contain most of the information the visitor requests. On the desktop website, you prefer to have a large header, because this also contains for instance a picture and menu.

Because there are several subjects that need to be discussed, this manual is divided into chapters:

1. What kind of responsive website you want to create 

  • Steps before developing
  • Different methodes

 

2. Development methodes that can be used to create a responsive website

  • Webapp
  • Small differences in mobile and desktop website
  • Big differences in mobile and desktop website
  • Medium differences in mobile and desktop website

 

3. Different subjects that are needed to create a responsive website

  • Futurama
  • UserAgent
  • Media query
  • Viewpoint


4. Platform specific behavior that contributes to "look and feel" of an app.

  • Fullscreen
  • Icon on desktop
  • Supported features on platforms

 

5. Testing on a mobile device

  • Testing environment
  • Tools

 

We have also created a tutorial where you can find some basic examples of getting your website to be responsive. 

 

1. What kind of responsive website you want to create

The first thing that we want you to notice is that there are always multiple ways to develop a responsive website. You should choose what is the best option for your own situation. In this manual we'll explain a couple of scenarios and a possible solution for it. 

We advice you to think carefully about the responsive website that you want to create. Do you want to create a new webapp that has totally different functionality from the desktop version? Do you want to create a minor difference responsive website where, for example, only a graph has a smaller size on a mobile screen and the rest of the website is the same ? Or, do you want something in between? It's all about what you desire when developing responsive websites. 

 
 

2. Development methodes that can be used to create a responsive website

As discussed in the previous paragraph, there are different ways to develop a responsive website in Futurama. We'll now discuss the different ways of developing a responsive website.

Note: We do not advice you to choose from these options, your own solution can be better for your situation than the ones we discussed.


  • Webapp
    With Futurama a developer is able to create a webapp. This is a small website that is optimized for mobile devices with a small screen and are able to use low bandwidth. These webapps look like an app that you can install on your mobile device but in fact, the browser is used to connect to the app. Thats why it is called "Web App". 

    There are two types of webapp that can be created with Futurama:

    -  An independent webapp that is developed only for mobile devices
    This webapp has a different URL than the desktop version of the website. It is a standalone website which behaves as a webapp and'mostly they look totally different then the desktop version.

    An example of the URL is:
      Desktop: testwebsite.nl
      Mobile: m.testwebsite.nl

    - A webapp that is integrated in the desktop version of the website.

    A webapp that is integrated in the desktop version shares functionality with the desktop website. The differences can vary from only very small to a totally different lay-out and functionality. Depending of the impact, you can choose what is the best way to get your website to be responsive:  

 

  • Small differences in mobile and desktop website
    Some developers want to create small differences between a website for a desktop or mobile device.

    For example:
    A graph that is shown has to be smaller on a mobile device then on a desktop. Therefore a changevalue can be created depending on if the website is viewed by a desktop or mobile device. The changevalue changes the width and height of the graph so that it's user-friendly for the targeted device.

 

  • Big differences in mobile and desktop website
    Because a webapp and desktop version of a website can differ a lot from eachother, there is also a possibility to have two totally different websites but they are using a small amount of the same funcationality.

    For example:
    Both websites are using the same login screen. After logging in the webapp will be displayed when a visitor is using a mobile device, otherwise the desktop version is displayed.

 

  • Medium differences in mobile and desktop website
    In the last two sections we discussed small and big differences between a mobile and desktop version of a website. For some situations you want to create a website that differentiate somewhere in the middle of the website structure.

    For example:
    When a webapp doesn't need a certain webpanels to be displayed, these can be excluded very easily with Futurama, using device detection (see below: User Agent). 

 

 

3. Different subjects that are needed to create a responsive website

  • Futurama
    Futurama is able to recognize what type of device visits the website. In Futurama a formula can be created that reads the useragent ( explained in the next section ). Depending on this, differences can be made between desktop and mobile use. For instance, parts of the website can be made visible or invisible. 
     
  • UserAgent
    The UserAgent formula is a new feature which is included in Futurama verson [4.4]

    A UserAgent is a string of information about the device which is visiting the website. This string contains information about the visitor's browser, operating system and some other information about the device.
    With the formula 'ReadUserAgent' you can read the UserAgent of the device on which a user is visiting your application. Depending on this, differences in functionality can be made. For instance, the UserAgent of a smartphone will  contain the string 'Mobile'. In this way the formula can be used to create a desktop and mobile version of an application.

  • Media query CSS3
    There are many different devices which have different screen sizes. Therefore, we want to be able to apply different CSS to certain screen sizes. In CSS a media query string can be added which is only applied when the visitor's screen specifications are met.
    Media queries are supported by all the new versions of the most commonly used webbrowsers. Check the link for further information about the browser support of CSS3 Media Queries.

  • Viewport
    A viewport can be added to the mobile version of the website.
    The viewport is the area in which your web page is drawn. It can be used to 'zoom in' on your website, so that (in mobile use) the content is adapted to the device's dimensions.
    You can define properties of the viewport for your web page using the "viewport" property in an HTML  tage, which must be placed in your document . 


4. Platform specific behavior that contributes to "look and feel" of an app.

There are a couple of features that make an app feel like one. These features are mostly platform specific features like:

  • Fullscreen

    iOS:
    A user is able to install the website as an app to the desktop of the mobile device. When openening the website, it is displayed fullscreen
    (The URL is hided). To accomplish this a Futurama developer need to include some header tags:
      
    Other platforms:
    This feature is only added on iOS. There are some tricks to hide the URL on other platforms which are making use of Javascript. Be careful with this, it can be very user-unfriendly when it's badly implemented.

5. Testing on a mobile device

 

  • Testing environment
    It can be difficult to test websites because there are so many varieties of mobile devices and screen sizes.
    Because you are not able to test on each device that is available you need to set up a reliable testing environment.

    When you are developing for mobile devices there are a couple of possibilities to test your website. Devices can be divided into a couple of groups that have similar properties like:
    Devices like a HTC One X or Samsung Galaxy S3 have the same device-screen size of 720 x 1280. Therefore you can target both devices with the same CSS media query. This can also be done for devices that contain a smaller or bigger device-screen size.


  • Tools
    There are many different tools that can be used to develop responsive websites. Please note that there is a lot of testing software such as mobile emulators. We do not recommend one of these, we advice you to do some research to know what is the best emulator for your situation.  

Related Topics

- ReadUserAgent:  Formula that reads the User Agent of the user's device

- Futurama and Styleheets (CSS): Styling your website with CSS.

- Installation Futurama Editor: Explains how you can Install the Futurama Editor and get it to work.

 

Relevant Tutorials

Responsive Design: This tutorial shows some basics of getting your website to be responsive.

 

External links

- Viewport headertags(W3C): Viewport headertags explanation

- Media queries(W3C): Media queries explanation

Updated: 2013-08-08