Futurama Logo

Welcome to the Futurama Support Site

The Futurama Support Site is the website where you can find Futurama and Futurama Vision documentation. If you have any questions about the support pages or if you want to provide us feedback please send us an e-mail.




Index Responsive Design
Previous  |  Next

 1      About Futurama
 1.1        Version information
 1.2        Getting Started
 1.2.1          Futurama Website
 1.2.1.1            Behavior of Futurama regarding TimeOuts, Login and Logoff
 1.2.1.2            Replacing an existing Futurama Session
 1.2.2          Futurama Webservice
 1.2.2.1            warmUpDocuments
 1.2.3          Futurama Export
 1.3        Overview - Futurama Modules
 1.3.1          Overview - Futurama Accounts
 1.3.2          Overview - Futurama Server
 1.3.3          Overview - Futurama Monitor
 1.3.4          Overview - Futurama Insight
 1.3.5          Overview - Futurama Console
 1.3.6          Overview - Futurama Webservice
 1.4        Loadbalancing Futurama applications
 1.4.1          Getting the most out of Futurama Web using the Load-Balancer
 1.4.2          Application Request Routing
 1.5        Text management and Multi-language
 2      Installation – Configuration – Testing
 2.1        Installation - Futurama Website Edition
 2.1.1          Installation Futurama HTML
 2.1.2          Installation Futurama Monitor
 2.1.3          Installation Futurama Insight
 2.1.4          Installation Futurama Accounts
 2.1.5          Installation SAML2LoadBalancer
 2.2        Installation - Futurama Export Edition
 2.2.1          Installation Futurama Console
 2.2.2          Installation Futurama Server
 2.3        Installation - Futurama Webservice Edition
 2.3.1          Installation Futurama Webservice
 2.4        Installation Futurama Editor
 2.5        Configuration
 2.5.1          Configuration - Cache
 2.5.2          Configuration - Calculation
 2.5.3          Configuration - Debug
 2.5.4          Configuration - File manager
 2.5.5          Configuration - Fileproviders
 2.5.6          Configuration - Format
 2.5.7          Configuration - History
 2.5.8          Configuration - Identity Provider
 2.5.9          Configuration - Log
 2.5.10           Configuration - Mail
 2.5.11           Configuration - Mapping
 2.5.12           Configuration - Monitor
 2.5.13           Configuration - PlugIns
 2.5.14           Configuration - Rendering
 2.5.15           Configuration - ScenarioRecording
 2.5.16           Configuration - Security
 2.5.17           Configuration - Server
 2.5.18           Configuration - Vision
 2.5.19           Configuration - WebAPI
 2.6        Logging
 2.7        Troubleshooting
 2.8        Security - hardening
 3      Updating and file compatibility
 3.1        Updating Futurama - Compatibility behavior
 3.2        Converting Futurama documents
 3.3        12819 - DataTable file updates
 3.4        12889 - DataTable file updates
 3.5        Conversion web.config to .NET Framework 4
 3.6        Deprecated conversion formulas
 4      Futurama Editor - How to
 4.1        At first glance
 4.2        Developing in the Futurama Editor
 4.2.1          Working with objects
 4.2.2          Evaluating objects
 4.2.3          Finding objects
 4.3        Transferring objects
 4.4        Testing objects
 4.5        Validating objects
 4.6        Troubleshooting objects
 4.7        Advanced/special functionality
 4.8        Checking the layout of objects
 5      Futurama - Formulas
 5.1        Futurama Formulas - Date and time
 5.1.1          Date
 5.1.2          Day
 5.1.3          Days360
 5.1.4          Days360Excel
 5.1.5          DaysInMonth
 5.1.6          DaysInPeriod
 5.1.7          Min
 5.1.8          Max
 5.1.9          Month
 5.1.10           Now
 5.1.11           WeekDay
 5.1.12           Year
 5.2        Futurama Formulas - Math
 5.2.1          Abs
 5.2.2          Add
 5.2.3          Divide
 5.2.4          Floor
 5.2.5          Ln
 5.2.6          Log
 5.2.7          Log10
 5.2.8          Mod
 5.2.9          Multiply
 5.2.10           Pi
 5.2.11           Power
 5.2.12           Rand
 5.2.13           Round
 5.2.14           RoundDown
 5.2.15           RoundUp
 5.2.16           SquareRoot
 5.2.17           Subtract
 5.3        Futurama Formulas - Statistical
 5.3.1          AverageDeviation
 5.3.2          Beta
 5.3.3          Binomial
 5.3.4          Covariance
 5.3.5          Factorial
 5.3.6          Gamma
 5.3.7          GeometricMean
 5.3.8          Lognormal
 5.3.9          Max
 5.3.10           Median
 5.3.11           Min
 5.3.12           Normal
 5.3.13           StandardDeviation
 5.3.14           Uniform
 5.3.15           Variance
 5.4        Futurama Formulas - Text
 5.4.1          CalculateBase64Hashcode
 5.4.2          CalculateXmlHashcode
 5.4.3          Concatenate
 5.4.4          ConcatenateBase64
 5.4.5          ContainsText
 5.4.6          Convert.CSV.2.XML
 5.4.7          ConvertFromBase64
 5.4.8          ConvertToBase64
 5.4.9          ConvertXml
 5.4.10           DecodeURL
 5.4.11           DecryptXml
 5.4.12           EncodeURL
 5.4.13           EncryptXml
 5.4.14           Find
 5.4.15           HashBase64EncodedFile
 5.4.16           HashBase64EncodedFileWithBase64
 5.4.17           HashText
 5.4.18           HashTextWithBase64
 5.4.19           Left
 5.4.20           Len
 5.4.21           Linefeed
 5.4.22           Lower
 5.4.23           Mid
 5.4.24           Proper
 5.4.25           ReadConfigKey
 5.4.26           ReadDirectoryNames
 5.4.27           ReadFile
 5.4.28           ReadFileAsBase64
 5.4.29           ReadFileNames
 5.4.30           ReadFileWithEncoding
 5.4.31           ReadXPathScalar
 5.4.32           ReadXPathVector
 5.4.33           Repeat
 5.4.34           Right
 5.4.35           Substitute
 5.4.36           Trim
 5.4.37           TrimLeft
 5.4.38           TrimRight
 5.4.39           Upper
 5.4.40           ValidatePattern
 5.4.41           XsdMessages
 5.5        Futurama Formulas - Logical
 5.5.1          And
 5.5.2          IsEmpty
 5.5.3          If
 5.5.4          IsEqual
 5.5.5          IsEven
 5.5.6          IsGreater
 5.5.7          IsGreaterEqual
 5.5.8          IsIBANChecksumValid
 5.5.9          IsLess
 5.5.10           IsLessEqual
 5.5.11           IsMemberOfGroup
 5.5.12           IsNotEqual
 5.5.13           IsOdd
 5.5.14           IsValidXml
 5.5.15           Not
 5.5.16           Or
 5.5.17           ValidateNPR
 5.6        Futurama Formulas - Table
 5.6.1          FindNextRow
 5.6.2          FindPreviousRow
 5.6.3          FindRow
 5.6.4          Sort
 5.6.5          VLookUp
 5.7        Futurama Formulas - Document
 5.7.1          CountErrors
 5.7.2          GetPathToDataFiles
 5.7.3          GetPortNumber
 5.7.4          GetRelativePathToDataFiles
 5.7.5          GetSessionID
 5.7.6          IsLicenceAvailable
 5.7.7          ReadError
 5.7.8          ReadIdentityProviderResult
 5.7.9          ReadRequestIP
 5.7.10           ReadRequestParameter
 5.7.11           ReadUserAgent
 5.7.12           ReadVersionNumber
 5.7.13           SessionTimeOut
 5.7.14           URL
 5.7.15           UserName
 5.8        Futurama Formulas - Conversion
 5.8.1          Convert.Excel.to.XML
 5.8.2          ConvertJSONtoXml
 5.8.3          ConvertTextToDate
 5.8.4          ConvertTextToNumber
 5.8.5          ConvertToBoolean
 5.8.6          ConvertToDouble
 5.8.7          ConvertToLong
 5.8.8          ConvertToString
 5.8.9          FormatDate
 5.8.10           FormatNumber
 5.8.11           Value
 5.9        Futurama Formulas - Matrix
 5.9.1          AddMatrices
 5.9.2          AddScalarToMatrix
 5.9.3          Cumulative
 5.9.4          CumulativeProductMatrix
 5.9.5          Distinct
 5.9.6          DivideMatrices
 5.9.7          DivideMatrixScalar
 5.9.8          DivideScalarMatrix
 5.9.9          Exponent
 5.9.10           First
 5.9.11           Floor
 5.9.12           If
 5.9.13           Index
 5.9.14           Inverse
 5.9.15           IsEqual
 5.9.16           IsGreater
 5.9.17           IsGreaterEqual
 5.9.18           IsNotEqual
 5.9.19           IsLess
 5.9.20           IsLessEqual
 5.9.21           Join
 5.9.22           Last
 5.9.23           Length
 5.9.24           MatrixProduct
 5.9.25           Max
 5.9.26           MaxScalarMatrix
 5.9.27           Mean
 5.9.28           Mid
 5.9.29           Min
 5.9.30           MinScalarMatrix
 5.9.31           MultiplyMatrices
 5.9.32           MultiplyMatrixVector
 5.9.33           MultiplyScalarMatrix
 5.9.34           Percentile
 5.9.35           PowerMatrix
 5.9.36           PowerMatrixScalar
 5.9.37           PowerScalarMatrix
 5.9.38           ReadMatrixFromXml
 5.9.39           Repeat
 5.9.40           Replace
 5.9.41           Reshape
 5.9.42           ReverseCumulativeProductMatrix
 5.9.43           ReverseMatrix
 5.9.44           Size
 5.9.45           Split
 5.9.46           SquareRootMatrix
 5.9.47           Step
 5.9.48           SubtractMatrices
 5.9.49           SubtractMatrixScalar
 5.9.50           SubtractScalarMatrix
 5.9.51           Sum
 5.9.52           Transpose
 5.9.53           UnitMatrix
 5.9.54           Vector
 5.10         Creating custom formulas in Futurama
 6      Futurama - Objects
 6.1        Action
 6.2        Aggregation
 6.3        Button
 6.4        ChangeValue
 6.5        CheckBox
 6.6        ClearCache
 6.7        DatabaseField
 6.8        DatabaseView
 6.9        DataTable
 6.10         DateBox
 6.11         DocConverter
 6.12         Document
 6.13         Download
 6.14         DropDownList
 6.15         EmailConverter
 6.16         ExcelConverter
 6.17         FileSaver
 6.18         FileUploader
 6.19         Fixed
 6.20         Formula
 6.21         GraphConverter
 6.22         HTMLInclude
 6.23         InterfacesNode
 6.24         LogMessage
 6.25         Navigator
 6.26         Node
 6.27         RadioButton
 6.28         RadioGroup
 6.29         Range
 6.30         Reference
 6.31         SubDocument
 6.32         TextBox
 6.33         UserTable
 6.34         UserVariable
 6.35         WebLabel
 6.36         WebListBox
 6.37         WebPage
 6.38         WebPanel
 6.39         WebReference
 6.39.1           WebReference - WCF Configuration
 6.40         WebService
 6.41         WebSlider
 6.42         WordConverter
 6.43         XmlBuilder
 6.44         XmlConverter
 6.45         XmlField
 6.46         XmlNode
 7      Futurama - Vision References
 7.1        Data
 7.1.1          ReadData
 7.1.2          WriteMessage
 7.1.3          GetPersonIdentifiers
 7.1.4          CreatePerson
 7.2        DataStore
 7.2.1          DeleteDataItem
 7.2.2          DeleteDataItemHierarchy
 7.2.3          DeleteDataItems
 7.2.4          GetDataItem
 7.2.5          GetDataItemHierarchy
 7.2.6          GetDataItems
 7.2.7          StoreData
 7.3        Accounts
 7.3.1          Activate Account
 7.3.2          Change Account
 7.3.3          Create Account
 7.3.4          GetQuestion
 7.3.5          GetQuestions
 7.3.6          Login
 7.3.7          ReadData
 7.3.8          ReinitializeAccount
 7.4        General
 7.4.1          TestConnection
 8      Futurama Vision
 8.1        Installation Futurama Vision
 8.1.1          Installation Futurama Vision Management Site
 8.1.2          Installation or Upgrade of the Futurama Vision Database
 8.2        Futurama Vision Management Site
 8.2.1          Futurama Vision Management Site - Admin
 8.2.2          Futurama Vision Management Site – Security
 8.2.3          Futurama Vision Management Site – Skinning
 8.2.4          Importing data into Futurama Vision
 8.2.4.1            Importing data by webservice
 8.2.4.2            Importing data from a Zip-file
 8.2.4.3            Importing data with Futurama Vision Batch
 8.2.4.4            Futurama Vision Webservice Security
 8.2.5          Further processing of data into Futurama Vision
 8.3        Futurama Vision File manager
 8.4        Activity overview
 8.5        Storing data in Vision from a Futurama application
 8.6        Futurama Vision – Data
 8.7        Futurama Accounts - Management Site
 8.7.1          Futurama Accounts - Table in Vision Database
 8.8        Futurama Server - Management Site
 8.8.1          Special Futurama Server Jobs
 8.9        Futurama Register - Management Site
 8.9.1          Configuration - Futurama Register
 8.10         Retrieving AppEvents from Futurama Vision
 8.11         Adding CustomPages to Vision
 9      Futurama Intermediate Control Output (FICO)
 9.1        FICO example - Change/Add HTML headers
 9.2        FICO example - Change Graph
 9.3        HTML5 Template
 10       Futurama Web API
 10.1         Postbacks of Futurama webcontrols
 10.2         Retrieving Resources using Web API
 10.3         WebAPI Session management
 11       Tutorials - Overview
 11.1         Tutorials - Examples and Downloads
 11.2         Beginners
 11.2.1           Creating formulas with Futurama
 11.2.1.1             Exercise 1: Pythagorean Theorem (Easy)
 11.2.1.2             Exercise 2: Newspaper stall (Medium)
 11.2.1.3             Exercise 3: Recursive functions (Difficult)
 11.2.1.4             Exercise 4: Leap Year (Difficult)
 11.2.1.5             Exercise 5: The Guessing Game I (Medium)
 11.2.2           Creating a Website Application
 11.2.2.1             Exercise 1: Creating a Website (Easy)
 11.2.3           Styling your website with CSS
 11.2.3.1             Exercise 1: Adding CSS (Easy)
 11.2.4           Adding interactivity to your website
 11.2.4.1             Exercise 1: Summation (Easy)
 11.2.4.2             Exercise 2: The Guessing Game II (Medium)
 11.2.4.3             Exercise 3: Nationality (Medium)
 11.2.4.4             Exercise 4: Nationality - RepeatTarget (Medium)
 11.2.4.5             Exercise 5: Reversed Guessing (Difficult)
 11.2.5           Working with Tables
 11.2.5.1             Exercise 1: Average (Easy)
 11.2.5.2             Exercise 2: Boundary values (Difficult)
 11.2.5.3             Exercise 3: Standard Deviation (Medium)
 11.2.6           Reading and processing XML-data in Futurama
 11.2.6.1             Exercise 1: Shares (Medium)
 11.2.7           Adding Graphs in Futurama
 11.2.7.1             Exercise 1: World Population (Easy)
 11.2.8           Working with Actions in Futurama
 11.2.8.1             Exercise 1: Changing Colors (Easy)
 11.2.8.2             Exercise 2: On and Off (Medium)
 11.2.8.3             Exercise 3: The ChangeValue object (Difficult)
 11.2.8.4             Exercise 4: The Guessing Game III (Medium)
 11.2.8.5             Exercise 5: CheckBox (Medium)
 11.2.9           Multiple Pages and Navigation
 11.2.10            Using XSLT to display data
 11.2.10.1              Exercise 1: Overview Summation (Easy)
 11.2.10.2              Exercise 2: Persons (Medium)
 11.2.10.3              Exercise 3: Leap Year Overview (Difficult)
 11.2.11            Webservices in Futurama
 11.2.11.1              Exercise 1: Example (Easy)
 11.2.12            Creating a Webservice Application
 11.2.12.1              Exercise 1: Add (Easy)
 11.2.12.2              Exercise 2: Webservice Nationality (Medium)
 11.2.13            Creating a Console Application
 11.2.13.1              Exercise 1: Adding extra fields (Easy)
 11.2.14            Generating Documents
 11.2.14.1              Exercise 1: Tax Rate (Medium)
 11.2.14.2              Exercise 2: Tax Rates Table (Difficult)
 11.3         Advanced
 11.3.1           Responsive Design
 11.3.1.1             Exercise 1: Orientation
 11.3.1.2             Exercise 2: Target different screen sizes
 11.4         Older Tutorials (Futurama Version 3.2)
 11.4.1           Futurama Editor Tutorial 1: The first sum
 11.4.2           Futurama Editor Tutorial 2: An annuity
 11.4.3           Futurama Editor Tutorial 3: Working with tables
 11.4.4           Futurama Editor Tutorial 4: Modelling a DB pension plan
 11.4.5           Futurama Editor Tutorial 5: Working with XML
 11.4.6           Futurama Web Tutorial 1: Hello world
 11.4.7           Futurama Web Tutorial 2: Buttons and Actions
 11.4.8           Futurama Web Tutorial 3: Textboxes
 11.4.9           Futurama Web Tutorial 4: DropdownLists
 12       Miscellaneous
 12.1         Responsive website
 12.2         Reducing memory usage for XmlNodes and XmlFields
 12.3         Explaining caching for websites and webservices
 12.4         Certificates - basic information
 12.5         Performance XML operations
 12.6         Creating XSD files and using them in combination with Futurama
 13       Templates
 14       Safe2Save WebAPI Sample
View  |  Print  |  PDF

451 documents found.


Responsive Design

Developer
Tutorial

Module: Editor

Version: 4.4.10 +

User: Developer

Level: Advanced

Introduction
In this tutorial we will show the principle of responsive design, using the Safe2Save example of the Beginners tutorials.

 

Prerequisites
- The Futurama Editor must be installed.
- A Text-editor (e.g. Notepadd++) must be installed.
- Download the safe2save website and install it in the inetpub folder on your computer. ( See description )
- Mobile phone or mobile phone emulator ( Opera mobile emulator ) that is able to connect to the safe2save website.

 



  

 

 

Description

Nowadays there are a lot of different devices which people use 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.

In this tutorial we will show the basics of how you can create a basic Futurama application responsive. We will use the end result of the Beginners tutorial website, and make this website easy accessible for both mobile and desktop devices. Therefore, you should download the Safe2Save website endresult, and install it, to be able to complete this tutorial.

Because there are several subjects that need to be discussed, this tutorial is divided into three chapters.

  1. Webpage with two responsive webpanels
  2. Include header tags
  3. CSS - How to apply CSS on different screen sizes


1. Webpage with two responsive webpanels

This first part will show you how responsive webpanels can be made in Futurama depending on the visitors useragent.
The useragent contains information about the visitors browser, operating system and type of device.

Note(1): If you are using the Opera mobile emulator, we recommend to test your results in the Samsung Galaxy S3. Our results and screenshots are based on this configuration. Your results may diverge if you're working in a different way.
Note(2): Add a bookmark to the mobile emulator and your browser. This makes it easier to test your results.
Website path: http://localhost/[Save2Safe website folder]/default.aspx?folder=SavingsAccount

First, we want to create different webpanels to be able to have different functionality for mobile and desktop.

  1. Open the website.xml from the folder; (C:\inetpub\wwwroot\Safe2Save_Websites) \SavingsAccount in the Futurama Editor.
  2. Create 2 new webpanels in Main Page/Content; Mobile and Desktop
  3. Copy the rest of the content in Main Page/Content and paste them in both Mobile and Desktop ( Header, Center and Footer )
  4. Delete the copied files in Main Page/Content ( Header, Center and Footer )
  5. Check if your references are still ok. In Center/Left/Calculate/Set Visible, the TargetControl link could be broken because of the copy execution. Make sure the TargetControl refers to the Right Panel below. (This malfunctioning could have been prevented by using a relative path in the reference)
  6. Create 2 actions in Main Page/Content; setMobileVisible and setDesktopVisible.
  7. Select setMobileVisible and open the property TargetControl in the properties window.
  8. Click on new and select the webpanel named: Main Page/Content/Mobile
  9. Repeat step 7 and 8 with setDesktopVisible and set the TargetControl to Main Page/Content/Desktop and put the Actions above the Mobile and Desktop webpanel, in the tree structure of the Document.

    image

    We now have 2 sections, intended for mobile or desktop usage.
    Note: You can subdivide between mobile and desktop device on any level in your treestructure. If difference are small, you will to subdivide on a lower level, so a lot of the content will be shared. You can also use references to still share content when you are within a specific platform implementation.
    In this example we will only introduce a small difference in the footer of the website. This is just so show the functionality. For this example only, it wouldn't have been necessary to create two copies of the entire content (it's even inefficient).

    We will now create the formulas needed to detect which device you are using.

  10. Create a new Node in your SavingsAccount - Website application, named 'Device detection'
  11. Within this Node, create a formula 'getUserAgent'. Change the type of this formula to String and open the text property.
  12. Select a formula; Document -> ReadUserAgent and click OK
  13. Within the same node, create a fixed string named Device
  14. Open the Text property and type 'Mobile' when your testing on a mobile phone. If your testing on Opera Mobile Emulator, type 'Android'. Click on OK. 
    Note: this Fixed should contain a text that will surely be contained in the user agent text description of the device(s) you want your website to vary on.
  15. Now create a boolean formula 'isMobile', again in the Node 'Device Detection'
  16. Select a formula; Text -> ContainsText
  17. Add a reference in the Text property to /SavingsAccount - Website/Device detection/getUserAgent
  18. Add a reference in the Lookup_text property to /SavingsAccount - Website/Device detection/Device and click OK

    image    image

    We are now able to detect what kind of device is visiting the website. With this, we can show either the desktop webpanel or the mobile webpanel:

  19. Create a reference in Main Page/Content/setMobileVisible and name it 'Visible'. This is a reference to SavingsAccount - Website/Device detection/isMobile
  20. Create a boolean formula in Main Page/Content/setDesktopVisible, name it 'Visible' as well and open the text property
  21. Select a formula; Logical -> Not and add a reference to Main Page/Content/setMobileVisible/Visible

    image

  22. We have now made the webpage a little more responsive in Futurama. To see this, in the mobile panel, change the text in the weblabel named Copyright ( Main Page/Content/Mobile/Footer ) to "Copyright (c) Safe2Save Mobile version"

    Try now to visit the website with a desktop and a mobile device. The footer on the desktop contains "Copyright (c) Safe2Save" while the footer on a mobile device contains "Copyright (c) Safe2Save Mobile version".

    Desktop:
     image

    Mobile:
    image

 

2. Include header tags

Because of the small screen sizes for mobile phones, header tags can be included which will zoom in on the website. These header tags are applied to the website before the content is loaded. In the example below, jQuery ( JavaScript library ) is used to apply the code to the <head> </head> section of the webpage. The content of the webpages are then easier to read and the website is more mobile-friendly. The visitor doesn't have to manually zoom in anymore.

  1. Add an HTMLInclude element to the top of the webpanel: Main Page/Content/Mobile and name it Viewpoint
  2. Open the dialog box from the HTMLCode property in the properties window.
  3. Add the following code in the dialogbox:

    <script language="JavaScript" type="text/javascript" src="SavingsAccount/scripts/viewpoint.js"></script>

    In this example a JavaScript file(viewpoint.js) from the location SavingsAccount/scripts/ will be loaded in the webpanel.
    The next step is to create the JavaScript file.

  4. Navigate to the following path in windows explorer; (C:\inetpub\wwwroot\Safe2Save_Websites) \SavingsAccount and create a new folder named scripts
  5. Open your text editor (Notepad++) and create a new file.
  6. Save this empty file as JavaScript (*.js), name it viewpoint and save it to the directory you created in step 4.
  7. Open the Viewpoint JavaScript file in Notepadd++ and add the following code:

    $('head').append('<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> ');
    $('head').append('<meta name="viewport" content="width=device-width , user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />');
    $('head').append('<meta name="apple-mobile-web-app-capable" content="yes" /> '); 
    $('head').append('<meta name="MobileOptimized" content="340" /> ');
     
     
  8. Save the file and open the website in a mobile browser

Now look at the mobile website and notice how the screen has changed after applying this code.

image

 

For more information about viewport check: http://www.w3.org/TR/css-device-adapt/#the-viewport-rule


3. CSS - How to apply CSS on different screen sizes

In this chapter we'll explain how to apply CSS on different screen sizes.
The best way to accomplish this is by using media queries. This is a feature of CSS3 so before you start to include this into your website, keep in mind that older browsers don't support this feature.

We'll now apply basic media queries to the save2safe website:

  1. Open the style sheet file named content.css in (C:\inetpub\wwwroot) \Safe2Save_Websites\SavingsAccount
  2. Scroll to the bottom of the file and add the following rule:

    @media only screen and (max-width: 640px) { 
    }
    

    The content overwrites or adds CSS for devices which have a maximum screen width of 640 pixels.
    Because the letters are falling of the screen on the right side, we'll add some CSS to make the left div smaller.

  3. Add the following code inside the brackets of the media screen that is created in step 2:

    .left{
    margin-left: 20px;
    width: 300px;
    }

    After saving this file you will see that the style sheet is only applied to devices with a maximum screen width of 640 pixels. There is less whitespace on the left of the screen and the words are getting wrapped so it fits into the screen.

    A couple of rules can be added like step 3 to make the safe2save website even more mobile friendly:

    .output_future{
    margin-bottom:5px;
    }
    .navigation{
    position: static;
    bottom:0px;
    right:0px;
    }
    .right{
    float:left;
    }
    .content{
    width:100%;
    margin:10px auto;
    }
    .overview, .results{
    width:200px;
    }
    .copyright{
    width:200px;
    margin-left:50px;
    font-size: 14px;
    }

    Copy this into your CSS file and notice the difference before and after. We recommend to inspect each div element that is added into the media query so that you will understand how to use them.

  4. The graph may not fit in your mobile screen or the graph is to small for your designated device screen size. Therefore you could alter the height and width of the graph in the mobile section. In the Futurama Editor, go to: Main Page/Content/Mobile/Center/Right/ and select Graph. Change the height and width of the graph in the Properties window to: Height = 180px , Width=300px

Desktop:
image

Mobile:
image

 

Note: In this example there is only 1 targeted screen size ( All devices that have a maximum screen width of 640px ). It is recommended to target multiple screen sizes like this:

 

@media only screen and (min-width: 300px) and (max-width: 480px) { 
/* Your CSS for device with maximum size of 480px */
}

@media only screen and (min-width: 481px) and (max-width: 640px) { 
/* Your CSS for device with a minimal size of 480px and a maximum size of 640px */
}

@media only screen and (min-width: 641px) { 
/* Your CSS for device with a minimal size of 641px */
}

 With this you always have the right CSS rules for the designated device.

For more information about media queries you can consult http://www.w3.org/TR/css3-mediaqueries/.

 

We have now shown the basic steps to make a website responsive. Of course this is only the basis, there are still a lot of improvements that can be made. For instance:
- We now have copied the entire content of the application in both a mobile and a desktop version. This means there's still a lot of double work when general changes have to be made. To prevent this double maintenance, you should use references for items that are not device dependent. For instance, as the content of the 'Left' panel in Futurama is exactly the same in both the mobile and desktop version, you should create it only once, and refer to it in the second version. 

 

Download solution

You can download our solution for this tutorial by clicking the image at the right. (Futurama 4.4.10)
Download files

 

Related Topics

- Futurama website tutorials: Futurama website tutorials.

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

 

Exercises

- Exercise 1: Orientation : Exercise to learn how to adapt the website to the orentation of the phone

- Exercise 2: Target different screen sizes : Exercise to learn how to adapt the website to the orentation of the phone


External links

- Viewport headertags(W3C): Viewport headertags explanation

- Media queries(W3C): Media queries explanation

Updated: 2013-07-08


Previous  |  Next