close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Mobile friendly web sites

Thread began 6/05/2015 4:33 am by Cheyanne | Last modified 8/12/2015 11:04 pm by Ray Borduin | 5720 views | 13 replies |

Cheyanne

Mobile friendly web sites

We all know that web site design has changed dramatically over the recent years. The latest trend is to make web sites mobile friendly. My question is simply this "Are WebAssist" products mobile friendly?. I have a large commercial web site which has a CSS Menu attached to it. How would I make a large menu, like this, which has sub menus and sub-sub menus mobile friendly?

Sign in to reply to this post

Ray BorduinWebAssist

There is more than one way to make a menu responsive.

A popular option is to display a menu icon and make the menu hidden until accessed (see our site on mobile).

This is a relatively easy adjustment you can make to a WebAssist menu built with menu writer. It hasn't been integrated directly into the tool yet, but if you post a site with a menu you want help converting we can help you with the necessary CSS from this forum.

Sign in to reply to this post
Did this help? Tips are appreciated...

Cheyanne

Responsive menus

Many thanks for your prompt reply. The web site in question is www.alanco-alalamtic.com. I was unsure as to exactly what you wanted me to post do you need the CSSMenuWriter folder or simply files from within it? If so please enlighten me as to what you want me to send you.

Sign in to reply to this post

Ray BorduinWebAssist

That web url doesn't seem to work for me. Please check for typos and post back.

Sign in to reply to this post
Did this help? Tips are appreciated...

Cheyanne

Hi Ray

The domain is http://www.alanco-alamatic.com/ - taken directly from the browser window. Apologies for the previous typos.

Sign in to reply to this post

Ray BorduinWebAssist

OK, so here is an example of how to make this page mobile friendly.... first you add a viewport meta tag to the header:

<meta name="viewport" content="width=device-width, initial-scale=1">

Then you define a mobile css file (attached)

Then add a menu icon to open and close the menu just above your menu UL tag like:

<div id="phoneMenu"><img src="Images/menu_white.png" alt="View Menu" onclick="hideshowmenu()"></div>



I've attached the image you can add to your images folder for the menu icon.

Then add javascript to open and close the menu when it is clicked (attached)

Attached Files
responsive.css
responsive.js
Sign in to reply to this post
Did this help? Tips are appreciated...

mrobben375515

I like the idea of keeping the responsive css and js outside in separate files like you appended to this tread. I am using ecart6 and it seems to make sense for me to add that call to css and js in my main.dwt file. Do you agree? If so, what code should I add to my main.dwt and where should I place that code?

Sign in to reply to this post

Ray BorduinWebAssist

The code is going to be different based on your template.

The code I gave to the previous user was very specific to their site. The menu portion may work if you used our menu writer, but other than that you would have to create your own responsive.css to match your template.

Yes, you would add it to your template. Most likely adding the .css file to your head tag and the script reference just above the </body> tag.

Sign in to reply to this post
Did this help? Tips are appreciated...

mrobben375515

I am using the ecart6 files as extracted from the zip, and I using the WA tools included in Design Extender, Data Bridge, and MySQLi Server Behaviors. In the existing main.dwt.php template, in the header section I see @import url("../css/common.css"), @import url("../css/content.css"), @import url("../css/content_print.css"), @import url("../CSSMenuWriter/cssmw_home/menu.css"), <link href="../SpryAssets/SpryAccordion.css">, @import url("../css/home.css"), @import url("../css/spry_custom.css"), and finally @import url("../css/mystyles.css"). Does the @import url("../css/responsive.css") in the header need to go above or below any of these so as not to conflict with any of the existing .css calls?

I only see (2) .js references in this template and both are in the header so I don't anticipate any problems placing the other script before the </body>

Sign in to reply to this post

Ray BorduinWebAssist

I'd put the responsive css at the bottom. For the most part you want to make sure it overwrites any css defined earlier.

Sign in to reply to this post
Did this help? Tips are appreciated...
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...