BullGuard Antivirus Sale - 60% Off with openElement !
openElement Website Homepage
Forum Home Forum Home >

openElement

> User Tutorials
  New Posts New Posts RSS Feed - Responsive Websites
  FAQ FAQ  Forum Search   Register Register  Login Login

Responsive Websites

 Post Reply Post Reply Page  12>
Author
Message
Chris OE View Drop Down
Admin Group
Admin Group


Joined: Jan 22 2013
Location: New York
Status: Offline
Points: 186
Post Options Post Options   Thanks (0) Thanks(0)   Quote Chris OE Quote  Post ReplyReply Direct Link To This Post Topic: Responsive Websites
    Posted: Jul 18 2013 at 2:08pm
[Edit Dmit OE: this tutorial is quite old and there are now new tools in OE - media queries etc. - that help to do the job much easier; but you may still consult it to learn certain techniques and tricks]

We've gotten a few comments about options for responsive design. This is a tutorial that was posted on the French forums by user: MichelH.  This is a user-created workaround and not supported in any official capacity by openElement, but it may come in handy until we can offer a proper mobile solution.

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/en/docs/Mobile/Viewport_meta_tag

 

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.



Edited by Dmit OE - Mar 11 2016 at 3:58pm
Back to Top
arronlee View Drop Down
Newbie
Newbie


Joined: Nov 12 2013
Status: Offline
Points: 7
Post Options Post Options   Thanks (0) Thanks(0)   Quote arronlee Quote  Post ReplyReply Direct Link To This Post Posted: Aug 20 2015 at 5:51am
Thanks for your nice sharing. I am looking for a good way to resize images. Any suggestion will be appreciated. Thanks in advance.
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group
Avatar

Joined: May 31 2012
Status: Offline
Points: 5271
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Aug 20 2015 at 8:39am
Hi,

Please create a new subject, and give more details / examples.

Have a nice day
D
Back to Top
gator_hyde View Drop Down
Newbie
Newbie
Avatar

Joined: Mar 11 2016
Location: miami fl usa
Status: Offline
Points: 6
Post Options Post Options   Thanks (0) Thanks(0)   Quote gator_hyde Quote  Post ReplyReply Direct Link To This Post Posted: Mar 11 2016 at 3:31am
I'm considering simply using OE as the editing tool primarily for desktop/laptop machines resolutions and using appsbar  for mobile devices. 

I'm also considering learning how to integrate into my future OE site a feature called spreadsheet converter which in my site's case will be the backend server processing engine for users to input numbers as estimates into fields which in turn then are calculated into projected cost-estimates for services, that the client, hopefully based on that data will more likely contact my company and proceed from there.  Variable input, similar to variables like booking a hotel room, such as varying length-of-visits, varying # of beds needed in room,  etc etc. I need the user to be able to feel as if they did a lot of the "homework" interfacing directly with my "corporate backend server" and that they know nearly to the penny what they are expecting to pay rather than have to endure further time-consuming salesperson wrangling and not really have a frame of reference what kind of deal they're getting better or worse. 

I need a responsive site, which a user can input that data and being javascript-based, can be staring right back at the screens in fractions of a second at the results they were hoping to find.

I think I can build that here, if I can adapt the right elements in the right ways..

I like OE precisely for what it is named after though, that's what I was drawn to it by.  For those who may not be so versed in this area, OE is a very strong editing tool in the respect of allowing elements to be rapidly constructed -- i.e. individual element bits & pieces like specifications for height and width including minimums and maximums etc -- this is stuff that is really hard to find in a completely free resource.  You have to pay several hundred U.S. dollars plus the learning curve to get this in the higher end commercial web editing "brand name" that I will conspicuously remain nameless.

I'm looking forward to getting to know the program better.  I haven't seen this much power and feature-richness all so well organized like this before, anywhere. 

If you have a comment about this post, you can reply here or PM me. I do have enabled in my profile settings the option to notify me thru personal email if a member here has sent me a PM (which stays here until I open & read it, is not automatically forwarded to my personal email)

Impressed with OE overall very nicely, so far.
Great Job.

Thank You. 
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group
Avatar

Joined: May 31 2012
Status: Offline
Points: 5271
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Mar 11 2016 at 7:28am
Hi.

The latest OE versions gives you control over media queries, Free Code property in Styles->Customize, page "sections" (like lateral columns) and possibility to work in "relative" positioning mode directly on the page, not just in Groups of Elements. All this simplifies responsive development a lot.

Then, if you have certain coding experience (at least enough to understand where should each piece of third-party solution be put) OE lets you integrate both server-side and client-side code through Code Blocks and through the Element Editor. So I think you can achieve what you want. If stuck, you can always ask here for help, though we can't write too much project-specific code for you.

Have a nice day
D
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group
Avatar

Joined: May 31 2012
Status: Offline
Points: 5271
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Mar 11 2016 at 10:08am
@gator_hyde I moved your last post to a separate thread in the Error Reports subforum.
Back to Top
user1001 View Drop Down
Newbie
Newbie


Joined: Mar 11 2016
Status: Offline
Points: 13
Post Options Post Options   Thanks (2) Thanks(2)   Quote user1001 Quote  Post ReplyReply Direct Link To This Post Posted: Mar 11 2016 at 1:11pm
Here is a good tutorial for responsive web design using the tool
 

Back to Top
StrawberryF View Drop Down
Newbie
Newbie


Joined: Apr 24 2016
Location: US
Status: Offline
Points: 3
Post Options Post Options   Thanks (0) Thanks(0)   Quote StrawberryF Quote  Post ReplyReply Direct Link To This Post Posted: Apr 26 2016 at 12:06pm
A good website is a key factor in starting and leading then a successful business. [Edit Dmit OE - text deleted, it is against forum rules to post info on competitive products]

Edited by Dmit OE - Apr 26 2016 at 3:26pm
Back to Top
Marcelo123 View Drop Down
Newbie
Newbie


Joined: Mar 22 2019
Status: Offline
Points: 1
Post Options Post Options   Thanks (0) Thanks(0)   Quote Marcelo123 Quote  Post ReplyReply Direct Link To This Post Posted: Mar 22 2019 at 5:47pm
I'm looking for great knowhow about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices. I have a problem with my own web so I want to explore new ways. Thank you
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 4326
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Mar 23 2019 at 2:05am
Hi,

You are talking about creating a responsive WEB site.

OpenElement allows to dictate the look of a site depending on the visiter's screen size.

OpenElement Edit media functionnality was designed to fulfill this need.

It uses CSS media queries on the background to do so.


Edited by Hobby001 - Mar 23 2019 at 2:10am
Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,047 seconds.