Reponsive layout for mobile

I used the Blog Post from the Responsive Starters template and discovered it almost works. My site properly responds to maximum screen, (1580 x 1050) down to tablet (768 x 1024) but it falls apart when it scales down to mobile. I read that I have to create a seperate mobile specific website. Does this mean I need different domains, one for 1580 x 1050 and 768 x 1024 screens and another for mobile? If so, how do I host this and how do I combine two different URL's into one site?

Indie767 wrote:
I used the Blog Post from the Responsive Starters template and discovered it almost works. My site properly responds to maximum screen, (1580 x 1050) down to tablet (768 x 1024) but it falls apart when it scales down to mobile. I read that I have to create a seperate mobile specific website. Does this mean I need different domains, one for 1580 x 1050 and 768 x 1024 screens and another for mobile? If so, how do I host this and how do I combine two different URL's into one site?
Does the template have any media queries for smartphone size? Some developers don't bother much once down beyond tablet size.

Similar Messages

  • Fixed vertical layout for mobile

    Hi, I have done the design mobile site by using adobe muse.  I want to keep the fixed vertical layout, how can I set to disable the auto rotation funcation for mobile only?
    Thanks,
    Andy

    Hi
    I believe you want to restrict the orientation of site when opened in phone browser to vertical.
    With native Muse features we cannot stop orientation changing when user rotate its phone to landscape ,though can be done using custom code.
    View port helps to change the orientation of the site in device browser. Its not advisable to restrict users from using the orientation they want to use the site, but you can try the suggestions mentioned in the documents :
    http://stackoverflow.com/questions/10975387/mobile-site-force-landscape-only-no-auto-rotat e
    http://stackoverflow.com/questions/3501510/blocking-device-rotation-on-mobile-web-pages
    http://stackoverflow.com/questions/6052400/disable-auto-rotate-in-jquery-mobile-or-phonega p
    If this is not what you are looking for , please let me know.
    Thanks,
    Sanjit

  • Creating separate online shop layouts for mobile

    Is there any way to create separate shop layouts (catalogue.html, small_product.html, large_product.html, etc) for use on a mobile site. I want to limit some of the information posted to the mobile site--e.g., eliminate custom tags used in large product page-- in addition to having the ability to specify different catalogs per row, for example, on the desktop version, I have my catalogs listed 3 across--on the mobile site, I want them listed 2 across. How do I go about specifying these differences in layouts, desktop versus mobile. What is the protocol for something like this?

    Hi Anne,
    You should be able to o this with custom templates and the {system_visitorDeviceClass} tag. If you want no coding at all, you should be able to do the following: Create templates for mobile in the same folder as the standard ones (root > Layouts > OnlineShop. Rename all of them to something like mobile_small_product / desktop_small_product
    Then you can just use any module by referencing the custom template as {module_product,63882,5450055,_top template="/Layouts/OnlineShop/{system_visitorDeviceClass}_small_product.tpl"
    Kind Regards,
    Alex

  • Modify news, web apps layouts for mobile site?

    I am modifying an existing website to create a mobile version, placing my mobile pages in a /mobile subfolder. I am having an issue with the news and web apps, as I have already designated my templates and layouts for the full desktop version, and because my news and webapp items cannot be placed into my /mobile folder. So, now I need to display that information differently for mobile and cannot figure out how, since I am limited to a single List Layout and a single Detail Layout (for news. At least the web apps give me an Backup List Layout, which was helpful). How have others accomplished this type of thing??
    An example: On my desktop version, I have announcements shown on the homepage as short blurbs (using the list view). My detail view I already have formatted for the full screen desktop version and does not work well for mobile screens. After many attempts at workarounds, I decided that I would simply show the complete announcement for mobile as a List Layout and not use a Detailed Layout at all so that I don't even have to bother with it. My thought was to code both my desktop and mobile list layouts in the List Layout of my Announcements module, and use css to show/ hide the appropriate one.
    E.g.--
    html in my List Layout:
    <div id="standardnews">
    <h3>{tag_subject} - {tag_eventfromdate}</h3>
    <p>{tag_body, 140}</p>
    </div>
    <div id="mobilenews">
    <h3>{tag_subject_nolink} - {tag_eventfromdate}</h3>
    <p>{tag_body}</p>
    </div>
    on my desktop css stylesheet:
    div#standardnews { display:block; }
    div#mobilenews { display:none; }
    on my mobile css stylesheet:
    div#standardnews { display:none; }
    div#mobilenews { display:block; }
    The css works just fine, however, on my mobile site instead of rendering the event from date, it actually rendered the tag itself "{tag_eventfromdate}".  So, apparently I can't have multiple instances of a tag within a single page??  Is there a way around this?
    I would be grateful for any input here on the best way to handle this type of thing, given the limitations I am running into.

    You can make as many list templates as you like now.
    You can have a different template per device - phone, tablet, desktop so if modules are in that template they will then render those different templates and thus different layouts.
    If you have modules in pages that page can be differnt per device as outlined under site settings and mobile section.
    Unlimited list layouts - http://www.businesscatalyst.com/_blog/BC_Blog/post/Video_Create_custom_list_templates_for_ BC_Modules/
    You CAN NOT though have conditional tags in BC yet and you can not in one list layout have tags render differently based on the device.
    Style and presentation you use media quries and the System tag for device provided by BC.

  • Adobe Muse CC 2014 - Sizing/Layout for Mobile Devices

    I have designed previous sites with Adobe Muse and have never had any issues designing or sizing for any of the three devices whether desktop, tablet, or  phone versions. However, due to the most recent updates I decided to design a site through Adobe Muse CC 2014 (www.movemoreheadforward). I went ahead and designed tablet and phone versions of the desktop site as well but unfortunately I ran into the problem below.
    The first image is what the phone site comes up as and the second image is what I would like it to look like. I didn't touch the page width so I'm confused as to why the site comes up so small. Would this have anything to do with the new 100% page width option?
    The same goes for the tablet version however I do not have images to give as an example at this time. Does anyone know why this issue may be happening and how to go about fixing it? Thanks!

    You have an object to the right of your page. (blue block), that's what's making your page smaller.

  • In Fluid Grid layout, I have hidden 2 div for mobile layout. How do I unhide them?

    In Fluid Grid layout, I have hidden 2 <div> for mobile layout. How do I unhide them?

    Hi there,
    I visited your site using Dreamweaver CC and tested it using the default Desktop, Tablet and Mobile sizes, followed by the Smart Phone Size.
    The CSS you currently have sets the featurest <div> to 'display: none' when viewed on screen sizes lower than 480px:
    Another helpful way to find out what is going on with your CSS is to test the site with Firefox using Web Developer Tools to inspect the element (or alternatively, Adobes Inspect tool). You can right-click the image and "Inspect Element" then resize the browser window so you can see exactly which CSS rule is being applied and overrided.
    My suggestion would be to add an additional media query in Dreamweaver to handle all screen sizes below 480px and then set divs or elements you want to hide or show display property to visible.
    Hope this helps!

  • ProductList layout vs. ProductFeatureList? for Mobile?

    Hi folks,
    I'm running into a very bad problem for mobile.. When viewing catalogs in the Overall Template for ecommerce,  the table layout is a total mess.
    The problem does not occur for example on the  home page   (http://joden.businesscatalyst.com)   where the featured images are liquid and work very well:
    {module_productfeaturelist,featured,6,Alphabetical,_blank,}
    But on the overall catalog layouts,  the default {tag_productlist}   creates  an illiquid table that does not display at all properly on mobile.
    http://joden.businesscatalyst.com/antique-jewelry
    Is there a way to fix this problem for Module Templates> Online Shop> Overall??
    Thanks
    Jeff

    You can set the tag_prouctlist to display as an unordered list instead of a table. Here's the docs on the tag:
    {tag_productlist,productsPerRow,targetFrame,resultsPerPage,sortType,hideEmptyMessages,useL i}
    Just set the useLi to true.
    Dan

  • 3 bar icon for mobile layout

    On the mobile layout for my website, I want to have a 3 bar icon to click on which will make the menu bar slide out.  How can I do this?
    Thanks,
    Johnathon

    This video explains the steps :
    https://www.youtube.com/watch?v=Thm8bsNccvI
    Thanks,
    Sanjit

  • When will Adobe Reader for Mobile Devices support 3D PDF files?

    When will Adobe Reader for Mobile Devices support 3D PDF files?

    There are two basic varieties of LiveCycle XFA...Static XFA and Dynamic XFA, which are very different in terms of their future for potential support in Adobe Reader for iOS. Which variety of XFA are you using?
    Static XFA uses the PDF markup language for content and form fields, so users can view the documents in Adobe Reader for iOS, but we currently do not properly handle filling, saving, and submitting those forms. I have improving our handling of Static XFA on my roadmap, but cannot offer any specific date yet (sorry, policy plus actual uncertainty). I know that there are some other apps that partially support Static XFA, though I do not know how complete their support is. If you can even open the XFA document in Adobe Reader for iOS, it is likely Static XFA.
    Dynamic XFA is effectively a JavaScript application packaged inside a PDF wrapper, which generates layout and form fields via code and requires a significant engine to support this. Support for Dynamic XFA is unfortunately not currently on our roadmap for iOS due to the nature of the technology, and our concern that any implementation we try likely will not pass Apple's restriction against installing something that allows other "apps" to be downloaded and executed from within it. The LiveCycle team is exploring solutions for our enterprise customers wanting to use Dynamic XFA from mobile devices as part of their server offering, but I cannot offer any insight here. To my knowledge, there are no applications that handle Dynamic XFA other than Adobe Reader for the desktop platforms (Windows, Mac, Linux).
    Dennis

  • E-commerce for Mobile Interface

    Hi
    This is my first attempt at have an existing shopping cart at BC to offer its customers the ability to view and order through their mobile phone. I have been doing regular, non-commerce pages for quite some time now. But when I apply the support for MOBILE and redirect everything to the /mobile folder, I can't find the means to over-ride the click-through to the standard pages of the shop.
    Here is the site's store home page with the catalog list on it
    http://www.copenhagenpastry.com/our-pastries
    Here a page in the mobile folder with the same file name, but nothing happens
    http://www.copenhagenpastry.com/mobile/our-pastries
    I thought that was all I had to do along with setting a new set of styles for the mobile device. How does one override the Modulestylesheet.css?
    Please advise and many thanks in advance!
    Teejay

    In my opinion the mobile/tablet redirect option isn't the best option for you if you use a lot of built-in modules that have their own URLs like the shop.  You have to have every page that is on your regular site have a version in the /mobile/ folder and that's not possible with the eCommerce module.  There's no way to setup an alternate layout for your shop.  You can create unlimited module templates for {module_catalog} and {module_shop} (http://helpx.adobe.com/business-catalyst/partner/using-custom-templates-modules.html) in which case you'd have to build separate pages for your shop manually and not rely on the default shop view which is controlled by your overall shop layout.
    And, even then, you cannot have multiple product detail layouts-- you can only use one.
    I think your best bet is to make your site responsive so that you can use the same layouts but they flex based on media queries in CSS if you are going to be using a lot of BC's modules.  The mobile/tablet redirection script works great for sites that are just static HTML with maybe some incontext editing, etc. but not advised for eCommerce functionality.

  • Layout for ZOrder

    Hi All,
      We have created a layout for orders in the layout we have choosen the subtype as "Standard Order" but for our Ztransaction this layout is not visible however the same layout is visible for the Standard transaction.

    1) Also in the MSY, In the Layout Maintenance subtype field there are only 3 entries available for the sales transaction layout, Quotation, standard Order and sublayout. My Zorder is not present in the drop down here.
    2) I have created a new BDOC in the CRM System and few data elements associated with this bdoc. Bdoc is properly replicated in the Mobile. However when i run the generate to print the layout the dataelement is not getting properly executed and there are no error messages. Is there a way to debug if the data is properly coming.
    Please kindly suggest.

  • Contribute for Mobile????

    Hi folks, I'm bidding on a project that uses a joomla calendar but everything else is static, DW Template created pages that the client updates with Contribute.  Aside from the fact that their Contribute is out probably out of date and that it is no longer really supported by development with Adobe, they want to add mobile to their site and are not asking for a redo of their current pages. 
    The best solution, which I will propose, is to redo the current site as a mobile friendly site, rather than do a separate one for mobile. However, I am wondering if Contribute would even work well with or at all with a mobile layout. Sounds incompatible to me.
    They are talking about m.clientsite.com  for the alternate site.
    The question is also if they want to update the pages, they will have to do double entry, if Contribute will even work.
    The other is how to tie just the calendar to the mobile as it is already displayed on the static site. I assume a joomla plugin for mobile would work, though not sure of the integration for one area.
    The other option may be moving to Business Catalyst...

    to clarify
    Since I doubt that Contribute thinks its media type is "handheld",  Contribute must think that it's media type is "screen and (max-width: 480px)" or "screen and (max-device-width: 480px")... those have to be included for the iphone to use my handheld style sheet which simplifies the site...
    Please tell me I'm missing something (and what it is) -- or if there is a workaround other than using some script to detect the devices by their zillion different names...
    thanks again

  • Embedded video HTML won't work for mobile

    Hi,
    I have a video successfully embessed on my desktop site but I can't get it to work for mobile:
    You can see it here on the desktop: MTV ART HOUSE MOSCOW
    I put the same code in for the mobile version, all I did was change the width and height, can someone please help me fix this?
    <video controls="controls" preload="auto" width="1010" height="581" autoplay="autoplay">
      <source src="assets/trailer.mp4" type="video/mp4">
    </video>
    For mobile I changed it to:
    <video controls="controls" preload="auto" width="290" height="171" autoplay="autoplay">
      <source src="assets/trailer.mp4" type="video/mp4">
    </video>

    Hello,
    Please try to enter the code below in phone layout. (I have marked the change in bold)
    <video controls="controls" preload="auto" width="290" height="171" autoplay="autoplay">
      <source src="../assets/trailer.mp4" type="video/mp4">
    </video>
    Muse create phone layout content in a new folder named as "Phone"  as there is no asset folder there we need to correct the directory path in phone layout. I have corrected that in your code.
    Regards
    Vivek

  • Designing for Mobile Applications

    I have a basic 6 page web site for our organization.  Since many of our members now use their smart phones for web browsing I am thinking of adjusting my site to accomodate them.  Since I have never designed for mobile applications I just wanted to get some professional feedback so I know the proper path to take. The site is a simple three-column layout with header and footer, primarily text with scattered graphics.
    My first thought is to just redesign the site with a smaller overall size so it would be viewable in smaller devices, such as smart phones and IPods.  Although it would require a total re-design change as far as layout and reduced use of graphics, it wouldn't take me long to create since the site is small to begin with.
    My second option is to use a mobile template via jQuery.  However, I have never used jQuery and am wondering if re-designing my site using jQuery would be the preferred route to go, or overkill due to the small size of my site.
    I guess my question is this:  At what point does it become preferable to use jQuery to design mobile web sites, as opposed to just re- creating a smaller physical version of  my current web site?  Or does using jQuery for mobile design the accepted common practice?
    I'd appreciate anyone's professional opinion on the subject.  Thanks.

    Your application's main module structure can contain different sub-modules like common/base, BCC/versioning and other sub-modules. As you mentioned all of your common piece of server-side functionality, common components and repository definitions can go in the common/base sub-module within your main module structure. There can be one common-ui kind of a sub-module also which can hold common front-end stuff like JS, common CSS, images etc. Then there can be one sub-module for the actual customer facing application. These sub-modules can declare dependency on the common/base sub-module.
    I would also go with having a single EAR for the customer facing app sub-module. Now within that EAR you can have different web-apps (WARs) with different context-roots as per your requirements. Having different web-apps will also allow you to bring in device specific changes to the application e.g. adding a device specific filters in case required.

  • Illustrator app for mobile (Android and iOS)

    Would you like an Android (iOS) Illustartor App?
    I wish:
    That there was an Android (and iOS) app of illustrator so I could work on Layouts for Websites on the go, like while I'm riding the train for 1 hour to go to work.
    There is an app which I tried (Autodesk Sketch Pro) but it's no good enough it is focusing too much on freehand drawing and it's layer based. You can't move a shape itself, you have to move the whole layer.
    What I need:
    I need an app for my Android phone and tablet which enables me to make layouts of websites which after I will send to my designer and developer. The thing is, I need to send good layout sketches to my designer.  With that the whole process would be more efficient.
    I'm not a good at freehand drawing thats why I would like to work with all the standard vector shapes, snap to grid, different kinds of splines and the possibility to add open fonts.
    What Adobe (Illustrator) should do:
    I think the way you should do this mobile app is:
    1. Check Autodesk Sketch pro (what can you to better than them)
    2. Make a great vector app
    3. Include a function that is useful to a lot of people to get more potential customers. (include: a nice drawing function, the ability to make nice flowcharts and/or infographics)
    4. Sell it to a fair price 8-12$
    I hope I didn’t forget anything if I did please let me know in the comments below Thank you.
    Twitter: RandomDomain.ch (randomdomainch) | Twitter  #Illustartor4mobile

    Am still waiting. Anyone out there who got new info on this?
    I am also wondering if it will be part of the creative cloud I already pay for on a monthly basis.

Maybe you are looking for