Differences

This shows you the differences between two versions of the page.

--- tutorials:design_adv:convert_design_rwd [2013/10/02 16:30]
jonyo [Instructions] fixed syntax
+++ tutorials:design_adv:convert_design_rwd [2014/09/25 16:55] (current)
@@ Line 1: / Line 1: @@
 {{indexmenu_n>81}}
 ====== Make your Template Set Use RWD ======
-<tip c w>**THIS IS A WORK IN PROGRESS** - don't go following these instructions just yet, we're still working on them!  We'll have this tutorial finished for you by the time 7.3 final ships.</tip>
 ===== Warning / Info About These Instructions =====
@@ Line 66: / Line 64: @@
     * main_page/layout-2-column.tpl <
     * main_page/layout-3-column.tpl <
-You can use **FTP** or the admin interface at **Design > Manager**, whichever you are more comfortable with. <
+You can use **FTP** or the admin interface at **Design > Manager**, whichever you are more comfortable with.  Note that later in the tutorial we will be using these 3 as "starting points" for re-organizing each of your own custom overall templates (like the **basic_page.tpl** template). <
-  - Edit each of the files you just copied, and copy in any customizations. The "head" contents are now part of the overall template instead of being in **head.tpl**, this way it is a lot easier to have meta tags or title or things like that change based on what page you are viewing.
+  - Edit each of the files you just copied, and copy in any customizations. The "head" contents are now part of the overall template instead of being in **head.tpl**, this way it is a lot easier to have meta tags or title or things like that change based on what page you are viewing.  To do this:
+    * Open up your own **head.tpl** file, and any customizations such as meta tags added, custom JS, things like that: copy the customizations in to the **<head>** section in each of the 3 files you copied in the last step. This may only apply if you have custom JS (for instance, adding a 3rd party script for a fancy slider or similar), or if you have some other custom changes to **head.tpl**. **Many sites may not need to make any changes at all**, if you do not have anything customized in your head.tpl there will be nothing to copy in. <
-So open up your own **head.tpl** file, and any customizations such as meta tags added, custom JS, things like that: copy the customizations in to the **<head>** section in each of the 3 files you copied in the last step. This may only apply if you have custom JS (for instance, adding a 3rd party script for a fancy slider or similar), or if you have some other custom changes to head.tpl. **Many sites may not need to make any changes at all**, if you do not have anything customized in your head.tpl there will be nothing to copy in.
+    * When doing this, do not change the //doctype//, //head//, or //html// tags in the layout templates, and it is a good idea to NOT remove anything from the template. You should only be **copying in your customizations, not modifying or removing what is already there**.  Otherwise you may accidentally remove or break something required for RWD layouts. <
+<
+  - For the **header.tpl** template file, if you have not changed the top part very much from the default design, use **Design > Manager** to edit the file and click the blue back arrow, to reset the contents to the new version from the default template set.  If on the other hand, you have customized the top section, you will need to make some adjustments by hand to make the top have a responsive look.  Here are a few guidelines for customizing this:
+    * If you plan to part with the default look, be sure to use different CSS classes to avoid having to reset the built-in behavior. <
+    * Start with designing the small (mobile) look.  Keep in mind this will be at top of the page on every page, so ideally it should be very compact and take up as little room as possible. It is probably a good idea to tuck any menu links into a hidden section that is revealed with a menu link similar to how the default works, or perhaps an "off canvas" menu like Facebook and other apps use. <
+    * With smaller screens it is best to get to the "meat" of the page first, don't make your visitors have to scroll through a long menu or similar on every page. <
+    * Once you have the small version of the header working, work on the larger version.  Keep in mind, you are using same exact HTML for both, but the layout / look is changed through CSS to accommodate the screen size. <
+    * To do so you will need to set up a "media breakpoint", see how such breakpoints are accomplished in the default CSS file for a reference.  The best practice is to base everything around "em" not "px", that way it will scale very well when zooming and such. <
+    * For the header, start the "large version" out pretty small just while you are working on it. <
+    * Once you have the larger view like you like it, change the size of your browser, and find what the "smallest" window size is that the larger menu still "looks good" and doesn't require scrolling.  Once you find that width, use that for the breakpoint value.  (Remember to convert it to use EM for the value not PX to make it scale better) <
+<
+  - For the **footer.tpl** file, well it's pretty much the same as the instructions for the **header.tpl** file.  Either replace yours with the contents of the new default **footer.tpl** template, or you will need to make it work from scratch.  Most of the tips for customizing the **header.tpl** apply here as well. <
+  - Customize the 1, 2, and 3 column templates that you copied into your custom template set a few instructions back.  Insert "placeholder" text in each of the columns, then customize it to look like you want for each general layout.  You will be using these as a starting point for the rest of your overall templates.  You will likely need to also change or add in custom CSS as well to adjust things to your liking.  Here are some tips for that:
+    * As with the rest of this, work on the mobile version first.  Then add a "small size" media breakpoint and work on the larger version.  Then do the browser resize thing to figure out the best breakpoint value to use based on your own custom design and how small it can be and still look good. <
+    * We recommend to **not limit** your visitors using smaller screens, meaning that we advise against hiding parts of the page from mobile devices in an effort to "un clutter" the mobile view.  Sure go ahead and hide them in such a way that the user taps on the title to reveal a section of the page, but we advise against making something totally inaccessible to mobile devices.  <
+    * Be sure to get it just like you like it now before you start using this as the starting point for all of the rest of your templates! <
+<
+  - For **basic_page.tpl** - In your custom design, do you use 1 column layout, 2 columns, or 3 columns?  Note that the basic_page.tpl normally uses a single column unless you have changed it.  Depending on how many columns you use, copy the contents of the appropriate starter template((Such as **layout-1-column.tpl**)) to the top of your existing **basic_page.tpl**.  Then proceed to copy in the various section of your own basic_page.tpl contents to where they belong in the new layout.  The largest changes are going to be to the order of the content, in RWD you typically put the "meat first" meaning you put the main column first in the HTML markup before the sidebars. <
+  - Repeat the last step for the rest of your "overall" templates, such as front_page.tpl, user_management_page.tpl and others.  The same basic steps will apply to pretty much every overall template. <
+  - Browse the site and make sure everything looks good.  Be sure to test every nook and cranny to make sure everything looks like you want, both in desktop size and in mobile size. <
-When doing this, do not change the //doctype//, //head//, or //html// tags in the layout templates, and it is a good idea to NOT remove anything from the template. You should only be **copying in your customizations, not modifying or removing what is already there**.  Otherwise you may accidentally remove or break something required for RWD layouts.<

Geodesic Solutions Community Wiki

User Tools

Site Tools

Differences

Page Tools