Skip navigation
lizmcnally
Currently Being Moderated

AP Divs

Oct 18, 2013 8:09 AM

I am planning my website and I've read that AP DIvs are not the way to go. My thought was to make two separate sites - one for mobile, one for tablet/desktop. I have tried the fluid grid layout with limited success because I want to have completely different elements, navigation bar and positioning for each format. I was thinking I would use a centering and resizing container of AP Divs for the tablet/desktop and the fluid grid for the mobile - will this work?

 
Replies
  • Currently Being Moderated
    Oct 18, 2013 8:38 AM   in reply to lizmcnally

    APDivs are Absolutely Positioned Divs. This means that they always appear a specified distance from the top/left, top/right, bottom/left or bottom/right of a browser window (or a relatively positioned parent element). This makes them an absolutely horrendous (pun intended) choice for primary layout, especially if you are new to designing websites.

     

    What you should be concentrating on is controlling your site's style and layout with CSS using floats, margins and padding and then using "Media Queries" to reposition/restyle everything for handhelds vs tablets vs desktops.

     

    Media queries essentially load separate styles into the  html elements of a page based on the device or viewport size.

     

    Fluid Grids in DW use them, but have a few quirks that can be hard to work with at first. When you make a fluid grid page, the same html file is used for all of your various viewer sizes, the css styling of those elements is all that changes. So you have one site that simply changes based on the viewer's device.

     

    If you run into trouble using the fluid grid, post back, there are a few resident experts that would be happy to help you.

     

    As for having "completely different elements" that is pretty simple to work around using display:none and display:block in the css. if you want something to show up on a desktop but not the handheld, you add display:none in the handheld's css for that element Then add one of the other display settings, like display:block, in the css for the tablet and desktop version.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 18, 2013 10:56 AM   in reply to lizmcnally

    Actually, you don't need to make two websites any more.

     

    Here's the problem I have found on dual sites: The Mobile version always lacks something and the desktop version, which may be just fine on a tablet, tends to not come up if the server is thinking that it has to route a tablet to a mobile site.

     

    You need to look into what is a coming trend: A responsive design.

     

    Responsive websites will change their characteristics, depending on what you are looking at them on. They look at the size of the browser window and accomodate themselves to that.

     

    There are a bunch of examples here: http://mediaqueri.es/

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 11:23 AM   in reply to lizmcnally

    Responsive Web Design requires some compromises.  Things you could do previously inside fixed width layouts often have no place in RWD.  These include but are not limited to image maps, absolute and fixed positioning.

     

    RWD often frustrates web designers because they must learn to think outside the box and adapt to new methods.

     

    You need to think  about what's most important to the site.

     

    • Solid Navigation that works in all devices.
    • Usability across all devices. 
    • Content that is well presented and easy to find. 

     

    Everything else is incidental.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 19, 2013 12:50 PM   in reply to lizmcnally

    I do not recommend building 2 sites.  One site is sufficient for all devices. 

    See CSS Flexbox

    http://css-tricks.com/snippets/css/a-guide-to-flexbox/

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points