How to make my net objects fusion 2013 site into mobile responsive

[danw700]

Hi, is there a way to turn my existing website into a mobile responsive one. I do not want to have to pay a monthly fee I just want when someone lands on my page, I have my own server, with a mobile device to have some sort of set up that they will see the site as one long page. Is there a way I can redesign or something?

Google rankings seem to have dropped my site down a well :-).

Is there an easy solution for all this?
Cheers
Dan

[gl33]

(Hi, is there a way to turn my existing website into a mobile responsive one. I do not want to have to pay a monthly fee I just want when someone lands on my page, I have my own server, with a mobile device to have some sort of set up that they will see the site as one long page. Is there a way I can redesign or something?)

Sure there is. Several programs now available pending your meaning of "responsive". Or you could wait for NOF's version coming to theater near you.


(Google rankings seem to have dropped my site down a well :-).

Welcome to the club!

(Is there an easy solution for all this?)

Sure, just copy and rename your site and set the width to 360, 480, or 600, rearrange everything and check the results. As most will now auto fit the site to the screen width. You could also use a program that has templates with breakpoints built in.

There seems to be 3 basic camps about this:

1.) It must auto fit to any screen with breakpoints along the way. So a system of grids/containers along with the breakpoints must be used.

2.) A site with fixed widths using breakpoints that is not really fluid but will adapt to the screen width and most likely have borders on the sides.

3.) A separate mobile site that may have a redirect to a desktop/tablet site using either of the above.

The qualifier for all three is just how much content is removed, if any, as the site becomes thinner and more vertical.


DAN, PLEASE NOTE:

This subject has been chopped, sliced, diced, hacked and wacked on this forum and any other web design software forum. Not to mention the net in general. So unless you have been living "under the dome" or in a biosphere I can't believe you haven't seen something about it.
This is probably the reason no one has responded to you post. So do some searching and check out NOF's and other forums. You should know how you want your site to "respond" before you start.

Good Luck!
Donald

[franko]

Donald gave you a pretty good response. This will give you a better idea of the coding requirements if you want to modify your site after it's been published by NoF. Of course, you can't then go back to NoF without re-coding the newly published site.

If you site isn't too large or complex (and you shouldn't even be thinking about responsive design if it is; use a responsive home page or a couple other pages and then link to the rest of the pages in your site) then it shouldn't be too onerous a task to recode it.

[Thomas Frei-Herrmann]

Hi,

since I read this the past months here, I just wanted to show you one of my first adaption of a NOF site which I have modified inside the NOF existing options to be responsive:

http://www.nof-tutorials.com/Responsive-Website/

... and Google Ranking will not drop me for this




This means a little bit of CSS.

img {
      max-width:100%;
      height:auto;
      width: auto; /* IE 8 */
    }

In this case I have just given the body this additional style to give it a width of 100% (instead of 990px used in this page):

<div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%;">

Then I have drawn all my text fields to the full layout width and added the CSS-option of 100% width.

This is not really complicated and - yes - NOF should be able to create something as a template


P.S.:

Here is another example, done by a user of our forums after an similar idea of mine:

http://www.fotoatelier-essen.de/Responsives-Layout-mit-NOF/


you can do this also with Parallax:

http://www.nof-tutorials.com/Paralla...kt-Responsive/

or for instance with full screen video or YouTube backgrounds

http://www.nof-tutorials.com/Respons...kground-Video/

... or whatever you want

[mscotgrove]

Hi,

What you have in your responsive website is exactly what I would like to do.

How can I set up a new NOF 2015 page to work this way? Can I import your page and change it, or do you have a template that I can use?

I have a new, small website that I be happy to change entirely (ie recreate) if I could get your type of output. My current one is based on Broadcast - Blue, and Google is not very happy with it.

[Thomas Frei-Herrmann]

*** template deleted by myself ***

... I have deleted my download file of this template here again, because I want to have control over this template. In case you have not downloaded it yet - send me a personal message and will give you a link to download this .zip file.

[mscotgrove]

I do have your template - but I think I will start with your tutorial first. I will respect your 'copyright'. The template is always useful as a crib, so thanks.

I wish NetObjects could give better support for what is now a very important issue.

[Thomas Frei-Herrmann]

... just be aware that I have not written a tutorial for this template. The tutorial I have written is for a similar idea but a bit different, because I have given in this case a percentage to an layout area (instead of the body). You can do this in many different ways. This tutorial is done for the example:

http://www.nof-tutorials.com/Layoutb...ert/index.html

My tutorials for this are anyway very short and not as detailed as done normally, because I was hoping that Fusion will come out with something responsive soon and I did not want people to invest all this work before Fusion is done with this.

[mscotgrove]

Many thanks, I have followed your tutorials, and looked at what you have done. I now have a website that Google says is AWESOME, ie it is mobile friendly. www.goprorecovery.co.uk It woks on PC, iPad and Samsung phone (with small screen).

The area I am stuck on is the top banner bar. I have designed a simple JPEG image, but I cannot find your magical way of making it resize. Can you possibly point me in the correct direction

[TSP]

I use NetObjects Fusion 2015 to maintain two golf websites, one for a club and the other for the local union. I do not receive any payment to do so and am NOT looking to get any payment in the future.

From the reply relating to www.goprorecovery.co.uk I see that the “responsive design” of the website was developed from a template and tutorial on this thread. The template, however, is no longer available and I have tried to follow the tutorial with limited success. Your website seems to do all the things that I want mine to do.

Could you create a template of it and send it to me or give me some pointers on what you did, especially:-
- setting up the navigation bar, the tutorial makes it sound like you have to create your own via individual images rather than use a standard one
- do you need multiple layout areas on each page as the tutorial seems to suggest
- getting text to resize (I have managed to get images to resize)

I would be happy to put some sort of acknowledgement to on my websites in return for your help.

Regards,
Trevor Pickles