Main Differences between HTML and Responsive Web Design

This item describes the main differences between a Web Panel developed using HTML design versus another made with a Responsive Web Design (RWD).

  1. GeneXus Web Form Editor

    The Web Form Editor of HTML is completely different from the editor for generating Web Responsive applications, as it is an abstract layout Editor.

    HTML Editor
    MainDifferencesbetweenHTMLandRWDImg01

    Abstract Layout Editor
    MainDifferencesbetweenHTMLandRWDImg02

    As you can visualize, the editors are different, so if you would like to migrate manually a Web Panel developed without WorkWithPlus from HTML to Responsive Web Design you would have to throw the web form, and start the form from scratch. This is detailed in the following link: Migrate a WebPanel to Responsive Web Design without WorkWithPlus

  2. Responsive Table
     

    There is a new kind of control that is available only in Abstract Layout Editor. At runtime, it will draw a DIV element in the Web Form.

    This means that this table will not have columns with a specific width like in a TABLE element, but will provide much more flexibility.

    Each control within the Responsive table will define its width (as a percentage) and its mandatory to specify for each control its percentage width (in TABLE element it wasn't mandatory).

    So, you can have a Responsive Table with 2 columns in which two different elements of the same column have different percentage widths, like the following example:
     

    Responsive Table with 2 columns

                  Control1 (width: 50%)             Control2 (width:50%)

                  Control3 (width: 75%)             Control4 (width: 25%

    The posible widths (%) for one control within a Responsive Table are:

    8%, 17%, 25%, 33%, 42%, 50%, 58%, 67%, 75%, 83%, 92%, 100% (so, it lets you divide some space in up to 12 divisions)

    You can configure the width of some control within a Responsive Table for each of the 4 sizes:

    - Extra small
    - Small
    - Medium
    - Large

    In most cases, you will configure two scenarios:

    - Extra small for phones
    - Small, médium and large for larger browsers. All in just one configuration (by default when you configure something for small size, it is inherited for medium and large)

    Also, you will be able to configure whether some control within a Responsive table will be visible or not in each scenario. Both the width and the visible properties are configured by making right click over the responsive table -> Responsive Sizes

    MainDifferencesbetweenHTMLandRWDImg03
    MainDifferencesbetweenHTMLandRWDImg04
     

  3. Attributes and Variables

    In Responsive Web Design, each attribute will contain its description in the same field. So, it is no longer needed to insert a text block next to the attribute control in order to show the field with a description. 

    With HTML Design
    MainDifferencesbetweenHTMLandRWDImg05

    There is a textblock control which displays the description of the attribute. Is independent of the attribute
     

    With Web Responsive Design
    MainDifferencesbetweenHTMLandRWDImg06
     

    The attribute includes its description and has some extra properties:

    - Label Position (left, none)
    - Label Caption

Now you can follow the steps in order to migrate a KB with WorkWithPlus from HTML to Responsive Web Design.