为您的企业设计移动网站的3种方法

目录:

Anonim

智能手机和平板电脑的采用正在全球范围内加速,预计移动商务(移动商务)销售在未来几年也会更大,更多零售商有兴趣建立移动网站以获取额外利润。

$config[code] not found

移动网站设计很复杂,因为网站的一个移动版本可能与每个设备不兼容。设计师必须了解最佳设计实践,以使您的移动存在变得有意义和有价值。

Web开发人员一直在争论创建移动优化网站的最佳方式。开发移动网站有三种主要方法。

这些是:

  • 响应式网页设计。
  • 专用的移动网站。
  • RESS:服务器端编程呈现CSS和HTML,具体取决于设备类型。

每种方法都有其优点和缺点。 Web开发人员必须了解每种技术,以实现最佳情况。

3种设计移动网站的方法

响应式网页设计(RWD)

RWD依靠CSS3媒体查询来将网页的布局与设备的查看区域的大小对齐。相同的HTML代码用于为平板电脑,移动设备,桌面和其他小工具呈现不同的网页布局。

优点:

  • 您的网站将具有类似的内容和HTML标记,因此移动访问者将获得相同的体验,无论他们使用何种设备。
  • 单个URL使用户可以更轻松地链接和共享内容。 (如果网页在多个URL地址下可用,则用户可能会感到困惑。)

缺点:

无法单独优化移动内容。因此,使用RWD的设计人员无法为移动用户单独定制内容。

根据HTTP存档的2013年1月数据,平均网页大约为1.3 MB。但是,大多数RWD站点相对较大。这种较大的尺寸会降低移动网站的性能,使其速度变慢。

移动用户更关注移动专用的用户界面设计模式。此外,移动用户习惯于多任务处理。除非为特定设备定制导航结构,否则用户在尝试同时完成多个任务时可能会遇到问题。

专用移动网站

此方法通过创建完全独立的网站来改善移动用户的体验。

优点:

  • 管理简单:移动和桌面站点需要单独更改。所做的更改仅限于各个版本。这意味着无法从桌面访问针对移动平台的更改。
  • 在开发特定于移动设备的网站时,专门为该受众群体简化和优化它会变得更加容易。
  • 可以为移动用户定制内容和导航结构。

缺点:

通过社交媒体共享网页变得更加困难,因为对于专用移动网站,页面有多个URL。当桌面用户点击社交媒体平台上共享的移动网址时,他们可能会无意中收到网站的移动版本而非桌面版本。

为了避免重复的内容问题,Web开发人员必须使用rel =“alternative”和rel =“canonical”元标记。如果移动用户搜索Google并点击桌面网址,则用户将查看桌面版本或重定向到网页的移动版本。如果移动版本不存在,用户将收到错误消息。

为移动用户创建一个完全不同的网站意味着该网站将专门为移动用户量身定制。但是,为了实现这一目的,Web开发人员必须削减功能和内容,这对他们来说是一场噩梦。

响应式网页设计+服务器端组件(RESS)

此方法依赖于服务器端编程,以便为不同的设备提供自定义HTML和CSS。移动用户的代码将与桌面用户的代码不同。

此实施背后的主要目标是改善网站的性能。与响应式Web设计结合使用时,此方法效果很好。因此,该实现可以称为响应式Web设计+服务器端组件(RESS)。

优点:

  • 可以为桌面和移动用户执行的不同任务定制导航结构。
  • 开发人员可以从HTML和CSS中删除页面元素以实现所需的显示。
  • 可以从HTML中删除不必要的JavaScript,从而释放移动设备的CPU资源,内存和缓存。

缺点:

  • 动态HTML会增加服务器的负载。
  • 不能依赖设备检测。
  • HTML和CSS针对移动性能进行了优化。桌面版使用更多HTTP请求和Java脚本。

选择哪种方法?

设计移动优化网站的决定取决于您销售的产品,目标受众,所需投资,竞争对手,转换率等。最有效的设计方法在很大程度上取决于屏幕格式,操作系统,浏览器和决议。

大多数响应式Web设计站点都没有以最佳方式实现,因此,这些站点需要更多时间来加载。由于竞争激烈,如果您的网站运行速度较慢,您可能会失去客户。用户只需切换到另一个开放时间较短的网站。尽管可以使用专用移动站点创建具有较短加载时间的网站,但是该实现也存在各种缺点。

RESS提供了RWD的优点,克服了它的两个主要缺点。 RESS的主要缺点是设备检测不可靠。您必须经常测试新设备,以确保该过程继续正常运行。

有一些服务,如DeviceAtlas,WURFL和其他可以检测新设备的服务。更新数据库中的新设备将是一个很好的帮助。

只有在移动设备上正确显示网站时,移动网页设计才会成功。虽然设计师在小型移动窗口中代表桌面网站的所有重要部分是一项艰巨的任务,但每天都会出现新的技术,使移动网站更好,更快,功能更全面。

移动网站照片通过Shutterstock

15评论▼