移动和响应式设计

Responsive Mobile Website Templates

响应式模板是网页设计行业中一种流行的设计方法，因为并非所有内容管理系统 (CMS) 都能提供专门的移动模板选项。响应式设计意味着模板经过特殊设计，能够根据不同的浏览器窗口宽度自动调整布局。由于每个元素都需要单独设计，用户自行编辑响应式模板可能会比较困难。

For example, menus might be condensed, or relocated off page, and pulled in when needed. Responsive websites tend to be slower to download on mobile devices, as the mobile device needs to download all the styles/themes that are used in the desktop version, even if not used in the mobile version. Some web designers focus on making great looking templates, but they forget about these download speed issues. 

如果您的网站面向旅游用户，您的客户可能身处手机信号覆盖范围之外，他们可能难以下载所有移动端体验不需要的额外 JavaScript 和 CSS 库。响应式模板的下载速度通常较慢，但我们一直在努力提升新响应式模板的加载速度，其渲染速度比普通 WordPress 主题快约 3 倍。我们的响应式网站支持自定义颜色、字体和图片。

Dedicated Mobile Website Templates

专用的移动网站模板是我们为所有桌面网站提供向后兼容性的传统方式，旨在为您的客户提供移动体验。移动模板使用与桌面网站相同的导航站点地图和内容。但是，我们精简了所有不必要的元素，确保您的客户能够快速找到所需信息。例如，他们可以轻松地在小屏幕上访问您的联系方式、查看地图链接或浏览产品并进行购买。随着时间的推移，我们添加了横幅、徽标，并自动匹配了与桌面模板相同的颜色。通过对专用移动模板设计的精细调整，您的客户将获得绝佳的体验，因为这种方法是…… 最快的选择 for customers using slow rural mobile connections. 

Completely Separate Mobile Websites

Having a whole website crafted just for mobile might give a really good mobile experience at first, but more often than not, the webmaster forgets to maintain it (or cannot maintain it) , and the information become out of sync in each website. If you are running an online shopping site, you really need to have both your mobile experience and your desktop experience powered by the same shopping cart engine. We advise our customers not to use this approach. 

How to Convert Your Existing Website to A Responsive Template

We have lots of different responsive templates that you can choose from. We are updating more all the time. When you change to a responsive template, it will update both your desktop and mobile layouts. 

1. In the CMS, go to the DESIGN tab
2. 选择“更改主题”
3. 浏览所有主题，并留意“响应式”或“移动端”按钮。点击此按钮即可预览主题的响应式或移动端版本。只有带有“响应式”按钮的主题才是响应式模板。
4. 选择一个主题继续。
5. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
6. 勾选此框以备份您的旧设计设置，以防万一出现问题。
7. 保存主题更改。
8. 有时，由于浏览器缓存设置，在更改主题后预览网站时，网站可能显示不正确。您可能需要发布网站并清除浏览器缓存，才能看到正确的显示效果。
9. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

How to Select A New Dedicated Mobile Template

我们有 8 款不同的专用移动模板，但每款模板都会使用您桌面主题的颜色和字体。

1. In the CMS, go to the DESIGN tab
2. Select MOBILE TEMPLATES
3. 点击“选择新的手机主题”
4. 浏览所有主题，并留意“响应式”或“移动端”按钮。点击此按钮即可预览主题的响应式或移动端版本。只有带有“响应式”按钮的主题才是响应式模板。
5. 选择一个主题继续。
6. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
7. 勾选此框以备份您的旧设计设置，以防万一出现问题。
8. 保存主题更改。
9. 有时，由于浏览器缓存设置，在更改主题后预览网站时，网站可能显示不正确。您可能需要发布网站并清除浏览器缓存，才能看到正确的显示效果。
10. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

调整 CSS 使其适应移动设备

If you are technically minded, you might like to just hack your existing template into CSS responsive mode. 

在样式表中查找尺寸最大的为 600px、750px 或 900px 的行：

#container { width: 750px; margin: 0 auto; }

并将它们更改为这样，使其占据屏幕宽度的 90%，最大可达 960。

#container { width: 90%; max-width: 960px;  margin: 0 auto; }

然后找到列，将它们的宽度或边距从固定宽度更改为百分比宽度，但仅在屏幕宽度允许的情况下应用这些宽度。当屏幕宽度小于 600 像素时，列将堆叠在浏览器的整个宽度上。

@media (min-width: 600px) { .leftColumn { width: 20%; float: left; }