This article records the steps I followed to convert my mobile phone app into a Universal app good for mobile and tablet screen sizes.
Normally, on the mobile device, the user follows this navigation paradigm: screen showing article categories, tap through to show article headings (titles) for that category, then tap on the article heading to show article. For the mobile version, I want to retain this path. For the tablet version, though, I want to show the article headings at left and article detail pages at right, side by side. For both mobile and tablet, I can show the article categories on the home page as large graphical buttons. A text footer with copyright information will stretch across the bottom; this footer will not be fixed.
How do I create both navigation types without duplicating pages for both? By using responsive web design (RWD) techniques, in which the layout changes with the screen width, repositioning the content at certain “breakpoints” of screen widths. Normally, when you narrow the browser window for sites that did not implement RWD techniques, the browser will cut off the site at the right end. As a positive example of RWD, go to the Microsoft web site and narrow your browser, and you’ll see the content adapt to fit. So I want one set of files to work across several screen widths, specifically various sizes of mobile screens and tablets. Continue reading
iPhone Dev Log 