it-swarm.cn

一个网站可解决多种客户问题

我一直在想,尽管为多个客户端分辨率或屏幕尺寸创建一个网站可能很辛苦,但与为每个设备或分辨率创建一个单独的网站相比,它的维护性要强得多。

我可以使用哪些设计或网站编辑应用程序(如果有)来帮助创建特定的CSS甚至标记给给定大小的目标设备?

6
Bernhard Hofmann

Dreamweaver CS5支持HTML 5媒体查询,使您可以使用特定的CSS并按屏幕分辨率预览。那是我想到的唯一一个,但是我从来没有喜欢过Dreamweaver,也不会推荐它。

2
fluxd

一个供多个客户使用的网站肯定可以维护。

首先要做的是让浏览器根据 media 属性获取多个CSS文件:

<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">

您可以调整元素的布局,元素的大小,甚至为较小的设备隐藏其中的一些元素。

如果必须在小型设备上剥离布局的大部分内容,则最好在服务器上将其删除以节省一些带宽。

屏幕分辨率和窗口大小可以使用Javascript在客户端上确定(这是最可靠的测试screen.width/screen.heightdocument.body.clientWidth/document.body.clientHeight),而在服务器上则主要依靠HTTP_USER_AGENT标头(与其他标头一起测试 此处 )。

另一个重要技术是放弃使用HTML表进行页面布局,而使用 浮动块 ,这样可以更好地适应不同的屏幕分辨率或调整窗口大小。

还应注意实际的屏幕尺寸,因为小型设备的分辨率往往更高(DPI,每英寸点数),这会使事情变得不可读。

两种技术必须结合使用(客户端和服务器端)才能获得最佳结果。 响应式Web设计 示例令人印象深刻,但您实际上必须掌握实现此目标的技术,并且仍然存在局限性。

我认为,即使是因为连接了新的移动设备而提出的问题,也应该考虑在计算机上使用,因为用户可以调整浏览器窗口的大小。

5
Mart

这是一个必看的演示,它涵盖了许多人使用媒体查询的方式的不足: 重新思考移动Web

简而言之,不支持媒体查询的手机(其中有很多)最终可能会为台式机浏览器设计样式。这里推荐并由我自己使用的方法是从所有人的基本样式开始,然后逐步为do支持媒体查询的浏览器添加样式。

请参阅 我对Stack Overflow相关问题的回答

3
David Oliver

仅CSS对此不起作用,因为对于移动UI和PC/Mac,您可以有非常不同的布局。服务器端布局只是一个小想法。例如,您需要呈现页面的某些部分(数据网格,侧栏,导航栏等)。例如,您将ASP.NET用作服务器端处理器。然后在页面布局中编写:

对于导航栏:

<acme:NavBar runat="server">
  <MenuItem Name="<%$Loc: News%>" />
  <MenuItem Name="<%$Loc: Products%>">
    <MenuItem Name="<%$Loc: Project1%>" />
    <MenuItem Name="<%$Loc: Project2%>" />
  </MenuItem>
  <MenuItem Name="<%$Loc: Support%>" />
  <MenuItem Name="<%$Loc: Contacts%>" />
</acme:NavBar>

对于数据网格:

<acme:Grid ID="grid1" runat="server">
...
</acme:Grid>

然后在代码背后:

grid1.DataSource = dao.GetProducts(filter);
grid1.DataBind();

等等。

然后,您必须为不同的分辨率(移动/等)编写不同的渲染器。 *对于大分辨率,您呈现可排序的标头,搜索器,过滤器,排序器,可滚动内容,JQuery插件等。*对于小分辨率,您仅呈现一个简单的html。

希望主要思想清楚。

0
Genius

您不需要为不同的客户端使用多个“网站”(我认为没有人这样做),但是您应该为不同的访问者群体提供多个门户,例如:台式机/笔记本电脑,上网本/ ipad /智能手机以及其他移动。

尽管CSS允许您为不同的设备类型指定不同的样式表,但实际上这是有问题的。许多智能手机无法获取移动样式表,或者它们同时使用移动样式表和屏幕样式表。

其次,您不同的受众群体将寻找不同的信息。例如,移动用户可能对阅读长文章或查看高分辨率图像或视频不感兴趣。因此,具有目标用户体验的单独门户将是最佳选择,这就是为什么大多数流行的服务为移动用户提供单独的门户的原因。

第三,可维护性不仅仅是数量,更是关于组织和简单性。当然,您可能只有一个大的样式表,使用大量的级联和浏览器黑客将您的主站点刺入所有客户端。但是,与维护2-3个针对特定客户类别的简单样式表相比,维护起来可能更加困难。

最后,如果使用域隔离对应用程序进行了适当的模块化,并且设计时考虑了关注点的分离,那么为不同类别的设备设置新的定制门户非常容易。如果您使用的是MVC模式,那么您所需要做的就是添加新视图并继续使用相同的模型和控制器。如果您正在设计AJAX)应用程序,那么您甚至可以通过创建Web服务来重用大多数视图。

0
Lèse majesté

这取决于您的内容,但是您可以模块化您的内容。

每个内容元素可以显示在一个狭窄的模块中,该模块可以在宽屏幕上显示为三列,而对于较低的分辨率,您可以使用较少的列。

一个很好的例子是: http://colly.com/ 当您减小页面宽度时,会进行三种布局调整。以此为您自己的站点的指南,您可以设计每个模块和页面布局,并提供3种变体,以适应每种宽度。

为此,您可以在调整大小的容器中安装固定大小的模块(也许是li的模块)。您可以使用jquery调整容器的大小以检测屏幕宽度(和宽度变化),然后添加/删除类。您可以在容器中的元素上创建变体,例如:ul.product_list liul.product_list_wide li

0
Leah

正如其他人所说,我将使用CSS3媒体查询来定位多种分辨率。根据您的站点/应用程序,这可能无法实现。这假定您将对所有体验使用相同的内容,只是根据屏幕的大小不同地显示它(这并不总是适合移动体验)。

使用此技术的一些资源将是:

有关响应式Web设计的列表列表文章: http://www.alistapart.com/articles/sensitive-web-design/

重新思考移动Web幻灯片共享: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiib

用于为本身不支持CSS3的浏览器启用CSS3媒体查询的JavaScript: http://code.google.com/p/css3-mediaqueries-js/

针对不同设备和大小的媒体查询选项: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

其他一些示例: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-网站/

不幸的是,没有所见即所得的东西可以做这些-您需要知识和技能才能手工实现。

尽管我建议不要使用它们,但是如果您仅关注桌面/移动视图,则可以使用Mobify之类的服务。 http://mobify.me/

0
RussellUresti