Tagged: mobile devices Toggle Comment Threads | Keyboard Shortcuts

  • Juliette Cook 4:47 am on February 5, 2014 Permalink |
    Tags: mobile devices, ,   
    Categories: Project Coordinators | Wordpress Developers ( 113 )

    Do all responsive themes display the same type of 'responsive' navigation on mobile devices? 

    Hi

    I am running into issues with responsive themes – the TRIM theme from ELEGANT themes shows up this way on mobile devices –
    http://screencast.com/t/8RECoMfnetB

    but client wants it this way:

    http://screencast.com/t/HlG10HkhH

     

    I have seen other responsive sites (wordpress) that display all menu items automatically: like this one – twenty eleven –

    http://awesomescreenshot.com/079th7c7d

    Is there a quick workaround, like doesn’t cost a thing,  for displaying all nav items on mobile devices for a responsive WP site?

    If not, I have had an estimate of about 1 hr to make it so. Are there any other tricks to display the nav item.

    What is the standard (if any) navigation for responsive sites?

    THANK YOU ALL

    thanks.

     

    • Juan Villegas 12:37 pm on February 5, 2014 Permalink | Log in to Reply

      Actually, the mobile menu isnt automatically created on any theme. Whats happening is that navs are duplicated: one for desktop and tablets, and one for mobile. So if you inspect header.php for exampleyou may find that two navs are created, but in the css one of them will be hidden depending on the device’swidth. This is the technique used in Trim, I have highlighted both menus in the code: http://prntscr.com/2pnkdq

      Other times the same menu is used and the floats are cleared in mobile, so that each nav item extends the whole line. However, not always this is possible, and thats why we have to resort to the option above..

    • Daryl Monte 1:41 pm on February 5, 2014 Permalink | Log in to Reply

      Another possible solution is to overwrite the css codes that displays and hides the menu depending on the device’s width.

    • Juliette Cook 4:50 pm on February 5, 2014 Permalink | Log in to Reply

      ok to overwrite the css codes or change the classic default css on a mobile device, how long does this take???

    • Daryl Monte 1:45 am on February 6, 2014 Permalink | Log in to Reply

      Around an hour or two depending on the codes used in the theme

  • Juliette Cook 8:16 pm on February 4, 2014 Permalink |
    Tags: mobile devices,   
    Categories: Wordpress Developers ( 19 )

    Responsive sites – can we put a link to ‘see full version’ on the mobile site 

    Hi smart developers

    if a site is responsive – on the mobile device is there a way we can place an option on the mobile site to say ‘view full version of site’ to link to the desktop version??

    thanks.

     

    • Juan Villegas 8:35 pm on February 4, 2014 Permalink | Log in to Reply

      Yes, if the css is properly designed you should have (at least):
      -css file with main styles
      -css file with media queries and device specific rules
      In a traditional request you would load all the css files, and let the browser apply them. If the user requests the desktop version, you should only load the css files that apply desktop rules (usually, main file and the device-specific file that correspons to desktop.. 968-1200px wide)..

      To decide wether to force desktop or not, id create a link as follows:
      –“>Go to Desktop version of this site

      In the php code:
      if( isset( $_GET[‘force’]) OR IF THERE IS A COOKIE ALREADY SET){
      // here we should set a cookie set_cookie(‘force’, …. ), otherwise the user will see original site in subsequent requests

      // get desired version
      $version = $_GET[‘force’];
      }else{
      $version = ‘all’;
      }

      in header.php or wherever you are loading css:

      //load main css
      …

      //decide wehter to load device-specific css
      if( $version == ‘all’ || $version ==’desktop’){
      //load desktop
      }
      if( $version == ‘all’ || $version ==’mobile’){
      //load mobile
      }

      Thats a quick draft but it could be shorter if we think a little about it hehe

      • Juan Villegas 8:36 pm on February 4, 2014 Permalink | Log in to Reply

        WordPress removed my php code.. to create the link use:

        href=” CODE HERE”

        CODE HERE = PHP>> echo add_query_arg(‘force’,’desktop’) <

    • Juliette Cook 10:08 pm on February 4, 2014 Permalink | Log in to Reply

      thanks – a lot of that makes no sense to me but the developers will get it 😉 . So here is another question – a client wants his site ‘responsive’ but wants the top navigation items visible as opposed to a responsive site saying ‘Navigation Menu” so that a user can see his specialties right away. Can we do this – alter what is responsive and what is not>????? how long would this take and what would it entail?

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel