Today’s websites are
accessed from a wide variety of devices (smartphones, iPhones, tablets, etc.)
with varying screen sizes. Pages designed normally with openElement (or any other
graphical editor) are not naturally optimized for smaller screens and may
require zooming, scrolling, etc.
To avoid this problem
there is a solution that consists of:
- Creating web pages with
elements of variable width
- Adding a META tag that modifies the width of the page depending
on the device the website visitor is using.
Using this method, pages
can be viewed comfortably and ergonomically regardless of the device. This
saves the trouble of designing two separate pages for normal screens and smaller
screens.
Instructions:
1.
First: Make sure you have a good grasp on openElement and know how to make
advanced changes to each element’s properties:
- By modifying its
properties (some) in the Properties tab
(right-hand column)
- By modifying its
properties (most) using the Styles tab
> Customize (also in the right-hand column)
- By checking, before
changing a property, the Style Zone
and Cursor State selected in the
Styles tab (it’s usually, the "Main Frame" zone and the
"Normal" state, except when a specific effect is sought)
2.
Create a new project without a template (Blank). Once on the home page, modify
its properties: Styles > Customize > Width:
auto ; Maximum Width: 900
(or any other fixed value, to be adjusted according to the desired result on a
classic screen)
Note: If a maximum width
is not set, the page will not be centered.
Important: Save this
page after each change, otherwise certain values ("auto" width, or
maximum page width, for example) risk being erased.
3.
Move the "Lower Content" (empty) to the very bottom : Elements
Explorer > Non-Visible Elements : select the dotted line at the bottom
of the Editing Pane and drag it up against the line just above it. Then select
this second line (the line above the dotted one) and drag it down at
least one screen’s height.
4. Do
not use a layer to add visible elements (header, navigation bar, etc.). You
will understand why after having applied this tutorial. However, a layer
will still be used to add some HTML code (hidden element) – the
instructions for which will be provided at the end. So, the BaseLayer must be
kept blank for now and associated to each page of the web site.
5. Add
a Container element > Group of Elements, then change the
property Behavior > Positioning: Relative.
Explanation (for those new to CSS): By default, all elements in oE
have "position : absolute", which means their position if fixed
to a specific position on the page (which is the point of drag-and-drop
design). However, in this case, we want blocks of text to have a variable
width, which in turn will also make their height vary depending on the
size of the screen. In order to avoid the overlapping of elements, we must let
the software manage their position on the page : all elements will
automatically pile up from top to bottom in the order they were created. This
is exactly what "position : relative" is for, and the only place
this option is available in OE is within a "Group of Elements".
6. Add
each element (text, button, image…) by dragging it into the newly created Container
7.
Change the dimensions and position of each element (except the Container itsef
or other special cases listed below) : Dimensions > Width and Height : auto ;
Positioning > Top Distance and Left Distance: delete
whatever value is in there.
8. For
each element (except the Group), assign a top
and right exterior margin (5 pixels,
for example), to space out the layour.
9.
After adding a few elements in the Container (named "panel" in the
Elements Explorer), modify the properties of the Panel such that: Width:
auto ; Height: 1200 (or any
other fixed value, to adjust according to its content) ; Distance Top and Distance Left : Erase
those values
Note : A weird thing sometimes happens : the
dimensions of the page and of the Panel sometimes change on their own and
replace the values first entered. If you notice that the layout is wonky and
can’t understand why, just take a quick look at these properties : width
"auto" for the page and the Panel, fixed maximum width
(example : 900px) for the page.
10. Images unfortunately cannot be given
variable dimensions (in "auto" they aren’t displayed, and in
"%" instead of "pixel" the height/width proportions are
warped). They must therefore be assigned a fixed width (i.e. 320 px).
11.
Other Elements : some of them (like Google Maps, for example) adapt well
to a variable width, and must be assigned a width and height in percentage (example : 100%).
Variable resizing was not
tested on all elements. Proceed at
your own discretion (try by setting width and/or height to "auto" or
"100%")
12.
From time to time, check on how the site is rendered by simulating a smaller
screen : in OE, resize the editing
zone (make it smaller) by moving the left column (Site Explorer) from left
to right. If your text frames are automatically resized, and paragraphs read
normally as a whole, that’s great ! However, if you see a horizontal
scroll bar, then there is an error somewhere : go over the instructions
again.
13.
Avoid creating a horizontal navigation
menu with the element "accordion menu." Even if it technically
works, because of the property "display : inline" (see
earlier remarks), there comes an inconvenience on smaller screens where the
break at the end of the line (the return to the next line) does not happen
cleanly (the right-most button is cut in two). Instead, try using Button Links or Image Links. Just like
with images, they will need to be assigned fixed values.
14. Changing the order of the elements on
the page is a bit tricky because all the elements pile up in the order they
were added. So here’s the trick : You can Cut and Paste (Ctrl+X then
Ctrl+Z) elements you want to move to the bottom (each time you Cut, the element
gets taken out of the list, and Pasting it adds it to the bottom of the
list). OR you can also drag the element
from the Element Explorer (lower left of editing pane) and drag the elements in
the order you would like (but this method is a bit buggy ; make sure every
element’s Left Distance and Top Distance is blank and has no value entered.)
15.
Each time you cut-paste an element this way (or make a copy by copy-pasting),
you will notice that the newly created element has been assigned a Top Distance
and Left Distance (0px, 5px, whatever it may be). These values must then be
deleted (again, in some cases).
16.
Note that most mobile phones don’t support the following animation
effect :
Animated gifs (except
iPhone), flash animations, the cursor state hover/mouseover on a button… and
probably more.
17. For
now, here is a way to align buttons and smaller elements on the same line, left
to right :
- Having gotten this far,
you have probably noticed that all the elements pile up vertically, but that
you are unable to put multiple elements
on the same line. Doing so might be necessary when creating a horizontal
navigation bar with buttons, for example.
Here’s what you do :
- Normally, it’s the
property "Float:Left" that does the trick, but it doesn’t work
because the software automatically inserts a separator before each element
using the CSS property "Clear:Both", which effectively overrides any
floating. Here is a workaround :
- With Notepad (or
Notepad++), open the file :
/openElement/(My-Website)/WEFiles/Css/openElement.css
Then, make these
changes :
In the section called
"XBodyLineSeparator", replace "clear:both" with "/*
clear:both */" which will ‘comment out’ the property. Also, for it to work
properly in Firefox, in the same section (.XBodyLineSeparator), change width
from 100% to auto.
- Now back in OE, save
the page : you’ll notice that all the smaller elements in the Panel/Group
are now lined up from right to left, within the limit of the page’s maximum
width, then top to bottom like before.
- Now, to bring elements
to a new line (if you don’t want them to float), select the Property Clear:both from Styles >
Customize.
18.
Everything working up til now ? Great ! Now you know how to create a
"floating" web page… For other pages, you can create them easily by
just duplicating the home page. Tip: First create a complete navigation menu on your home page, that is a Button-Link for each anticipated web page. That way, you will not have to re-copy
the buttons on all pages, once this one has been created, just change the
links.
19. After
creating one or several pages, open the Layer you want to link and add a Hidden Code Block element (Scripts
category) that will contain the META tag meant to reduce the screen size for
smaller screens:
- In Script Type select HTML.
- In Placement, select in HEAD
- Copy-Paste the following line of code:
<meta
name="viewport" content="width=device-width">
- Save the element and
save the Layer page
- Open each page of the
site and save it, otherwise the changes to the Layer will not be applied to the
page.
Note : Instead of "width=device-width" other
values are possible, such as "width=320" to force the page width in
pixels. But the result may vary depending on the device (smartphone, iphone…)
and browser. Read more about viewport syntax : https://developer.mozilla.org/fr/docs/Mobile/Viewport_meta_tag" rel="nofollow -
20.
After publishing your site using the "Publish" button in OE, you will
still have to manually publish – using FileZilla for example – the file
openElement.css (that you modified above). OE did transfer the file, but from a
different folder. So you’ll have to
replace it with the one you modified personally.