法律之星--法律论文--程序性制裁制度研究
正文关键字:
标题关键字:
法学基础理论
行政诉讼法
刑事诉讼法
知识产权法
民事诉讼法
国际经济法
律师制度与实务
比较法和外国法
劳教劳改监狱所
∷【来源】《中外法学》&& 第2003-4期&&第
以下是您选择论文文件的摘要&&&&&&&&&&
&&用户名：
程序性制裁制度研究
一、引言
有违法则必有制裁。一部法律如果要在......
很显然，实体法所确立的法律责任几乎无一例外地......
但是，如果一项发生在刑事诉讼......
相比之下，中国......
然而，......
而在“检察监督”之外，......
从法律规则的构成要素上看，......
1996年，中国立法机关对......
毫无疑问，第二审法院对于第一审法院“......
应当说，在过去根本没有任何程序性制裁......
这是迄今为止有关非法证据排除规则的惟一规定。......
有鉴于此，本文拟对程序性制裁制度作一较为系统的研究......
二、什么是程序性制裁
要研究程序性制裁问题，首先就要明确程序性违法......
（一）程序性违法
与犯罪、侵权和行政违法等实体性违法行为不同......
作为犯罪案件的调查者，警察的违法......
与警察的非法调查活动不同的是，法官......
在实体法中，无论是犯罪行为还......
与此同时，程序性违法也必须以行为人客观......
几乎在所有建立了刑事诉讼制......
例如，我们之所以要对警......
因此，对于建立程序性制裁机制而言，适当......
（二）程序性制裁
在确定了“程序性违法行为”的构成要......
当然，违反刑事诉讼程序的法律后果经常是多方面......
对“程序性违法”追究其实体性法律责任，固然......
显然，即使在对程序违法者追......
与“实体性制裁”不同，“程序......
上诉法院对初审法院所作有罪裁决的撤销，当然也是一......
这些“程序性制裁”措施既是针对不同的程序性......
需要指出的是，“权利救济”具......
三、为什么要建立程序性制......
为什么要对程序性违法行为加以......
（一）程序法实施的需要
“无制裁则无法律规则”。这是一个得到......
在法理学中，法律规范按......
例如，作为“授权性规范”，“被告人有权......
根据......
很显然，如果立法者确实......
（二）权利救济的保证
程序性违法行为之所以要受到制裁，除了有有效实施......
事实上，“元救济则无权利”。英国普......
美国......
表面看来，将程序性违法与......
尽管如此，程序性违法与侵权行为之间的联系......
很显然，与“法律明文规定的无效”不同，“实......
通过对程序性违法者实施程序性制......
因此，法律规则要得到实施，就必须建立制......
（三）程序正义的制度保障
建立程序性制裁与实现法律程序的价值，这本......
当然，一部充分按照程序正义......
与民事诉讼和行政诉讼都不同的......
刑事诉讼中的很多制度设计都具有维护控辩双方“平等武......
事实上，刑事诉讼中的程序性制......
首先，审判前的程序性制裁所针对的是......
其次，即使在法庭审判阶段，法院在就被告人的刑事责任......
再次，上诉审程序中的程序性制......
（四）程序性制裁之独特......
在作出上述三个方面的论证之后......
有的学者早已意识到这一问题，并......
这一论证基本是可以成立的。但是......
以刑讯逼供的情况为例。根据......
那么，对这些无法受到刑事追究的大多数刑讯逼供行为......
如果说国家赔偿无法被用来制裁绝大多数刑......
在中国刑事司法制度下，侦查人员在上述第一种情......
而在后一情况下，由于警察的刑讯逼供行......
由此可见，即使对刑讯逼供这一经常发生的......
相反，对于程序性违法行为在诉讼程序的范围内采取制裁......
还是以刑讯逼供的情况为例加以分析。一般说......
程序性制裁的基本原理就在于......
程序性制裁还有一个为实体性制裁所不具备的......
四、现行的程序性制裁......
迄今为止，中国刑事诉讼中的程......
（一）排除规则
为什么要建立排除规则？对于这一问题，我们无法......
直到1998年，最高人民法院才在有关......
在时隔四年之后，我们看到了最高人......
刑讯逼供等非法取证手段，严重违反法律......
这一解释包含两层意思：一是......
对非法收集的言词证据以外的证据......
可见，法官们也认识到侦查人员在收集......
但是，更为严重的问题还在于其......
事实上，侦查人员侵犯公......
或许，最高法院一开始就没有考虑将排除......
《解释》明确规定严禁以非法方法收集证据，采用刑......
在法官们的观念中，防止冤假错案的发生，是建立排除......
然而，针对非法证据而建立的排除规则，其本来......
而中国最高法院的法官将排除规则的宗旨解释为防止司法......
值得质疑的还不止这一点。实际上，最高法院......
归结起来，现行的排除规则尽管属于最高法院努力建立......
（二）撤销原判、发回重审制度
对于第一审法院的程序性违法行为，第二审法院可......
在中国刑事诉讼中，撤销原判、发回重审制度......
那么，对于一审法院违反法定诉讼程序的案件，......
但是，刑事诉讼中的撤销原判、发回重审......
之所以提出第一个疑问，是因为第二审法院本......
撤销原判、发回重审制度存在的另一问题，......
相反，根据中国现行......
又如，“违反回避制度的”情况......
再如，“剥夺或者限制当事人的法......
当然，最成问题的还是“其他违反法律规定的诉讼程......
很显然，法律越是将程序性......
撤销原判、发回重审制度所存在的缺......
不仅如此，一审法院在审判中对很多影响当......
尽管中国......
另外，撤销原判、发回重审制度是第二审......
五、对三个案例的分析
程序性制裁制度在司法实践中是如何适用的呢？排除规......
相对于排除规则而言，撤销原判、发回重审制度......
与撤销原判、发回重审制度不同的是，排除规则的适......
以下的三个案例可以显示出排除规......
沈阳市中级人民法院于20......
被告人向辽宁省高级人民法院提......
辽宁省高级人民法院经过不开庭审理，于2......
在这一案件中，辩护人在一......
但出人意料的是，本案的第二审法院没有经过开庭审理......
不仅如此，考虑到有关证据排除问题的审查会带......
然而，第二审法院对非法所得证......
但是，按照现行......
当然，这种评论在很多人看来似乎属于“书生之见”了。......
不过，笔者总感觉这种由第二审......
在近年来发生......
日，我（指杜培武，下同）向市检察......
日，昆明市中级人民......
日，法院再......
日，一审法院以......
与上一案例的情况不同，本案被......
当然，在一部分案件中，如果辩护方当庭提出......
然而，刑事法庭即便将刑讯逼供的问题纳入调查的......
很显然，一审法院即使对那些证据十分清楚......
日，湖南省永州......
王永东不服判决，以“没有作案，过去所作的......
湖南省高级人民法院在作出上述裁定的同时，还......
案件发回重审后，公安机关、......
表面看来，这一案例与案例1所显示的情况具......
但是，与案例1明显不同的是，本案中......
令人惊异的是，第二审法院的主审法官亲自对被告人受到......
当然，第二审法官在“私下里”......
在以上的论述中，笔者举出并分析了有关排......
需要注意的是，这三个案例也不......
应当指出，“非法证据”及其应否......
六、程序性制裁中的权力......
从中国刑事司法的现状来看，法律......
（一）程序性违法的侵权性质
在构建程序性制裁时，首先需要解决的是究竟针对......
与英美法相反，大陆法国......
又如，意大利......
这些规定似乎表明，大陆法国家只针对那......
正是针对这一问题，法国建立了“......
不仅如此，德国联邦......
很显然，以侵权行为甚至......
我国在程序性制裁制度的构建方面，尽管......
至于撤销原判、发回重审制度所要制裁的程序性违法行为......
总之，离开了公共侵权的属性，......
（二）程序性制裁的实现途......
既然将程序性违法更多地视为公共侵权行为，既然......
大陆法国家由于受纠问式诉讼传统的深刻......
又如，根据德国......
可见，法国宣告无效制度的实施是......
可是，由法院主动发现程序性违法......
对于职权主义审判方式的全面评......
中国现行的两种程序性制裁制度，单纯地......
当然，程序性制裁制度的实施确实受到一系列司......
（三）重构程序性制裁制度的理论思路
既然要将警察、检察官和法官的侵......
1．程序性制裁的种类和适用范围
原则上，......
事实上，排除规则作为法院制......
根据......
根据......
根据......
根据......
很显然，......
除了排除规则以外，撤销原判、发回重审制度在适用范围......
不仅如此，还应在排除规则和撤销原判、发回重审制......
2．程序性裁判机制的建立
程序性制裁的实施，离不开专门司法裁判程......
例如，......
程序性裁判是相对于实体性裁判而言......
这种“程序性裁判”由于发生在刑事......
为了实施程序性制裁制度，就要建......
首先，只有建立程序性裁判程序，有......
其次，程序性裁判程序的建立是确保当事人通过行使......
再次，程序性裁判程序是维护程序正义、防止裁......
最后，建立专门的程序性裁判程序......
七、程序性裁判的构成要素
程序性裁判是一个为法学者所长期忽略的......
其实，这八个构成要素即使是在实体性裁......
（一）程序性......
以权利救济为主要目的的程序性裁判程序，根据......
当然，广义上的“程序性裁判”......
需要指出的是，程序性......
对于刑事案件的被告人来说，为获得权......
当然，为进行“实体性辩护”，......
与“实体性辩护”不同的是，“程序性......
由于程序性辩护属于程序性裁判的重要构成要素，......
（二）程序性......
在程序性......
原则上，能够充当裁判者的只能是法院，而不能是......
在审判前阶段，如果存在预审......
而从初审程序开始，负责法庭审理的法庭则有义务接受......
在笔者看来，程序性裁判并不是......
（三）程序性答辩
与实体性裁判一样，程序性裁判......
在提出......
（四）程序性听证
程序性裁判的核心环节是程序性听证，也就是由......
因此，举行听证是任何争端解决程序的最低公正要求。在......
原则上，如果一项程序性裁判涉及某一事......
相反，如果控辩双方对有关的事实没有较......
（五）证明责任和证明标准
在任何一种司法裁判形式中，证......
程序性裁判所要解决的尽管只是应否......
原则上，提出程序性......
在证明责任得到适当的分配......
（六）有关的证据规则
与实体性裁判一样，程序性裁判也需要建立一......
这里需要对警察出庭作证......
但是，考虑在控辩双方对有关事实......
（七）程序性裁决
法院经过程序性听证，如果对......
当然，基于对诉讼成本问题......
（八）程序性裁决的再救济
如同实体性裁判的结论一样，程序性裁决也不能......
在审判前程序中，由于程序性裁决经常会对......
而程序性裁判如果发生在审判阶段，则控辩双方如果对......
八、在程序性制裁之外
在以上的论述中，笔者对程序性制裁的基本理论问......
但是，要建立一个较为完善的程序性制裁制度......
为公民权利提供最后的司法救济，使那些......
程序性制裁不仅仅为纠正和惩治程序性违法行为而存......
当然，法院毕竟承担司法裁判之使命，而不直接......
不仅如此，程序性制裁制度的建立和实施，还有赖于法院......
可以说，不以开庭审判的方式来裁判案件，已......
在这种司法理念的影响下，有关“程序性裁......
最后，以权利救济为归宿的程序性制裁制......
然而，在中国......
因此，只有将嫌疑人、被告人所享......
【作者介绍】法学博士，北......
...... Joel Samaha，Crminal Pro......
有关大陆法国家的诉讼行为......
关于......
对中国......
王敏远：“论违反刑事诉讼程序的程序性......
U．S．v．Leon，46......
关于美国刑事诉讼中“程序性制裁”的全面情况，读......
Stephen A．Sal......
Jerold H．Isra......
关于英国的司法救济制度，读者可参见Te......
Jerold H．Israel......
有关大陆法国家的诉讼行为无效理论和无效制......
卡斯东?斯特法尼等，见前注[2]。
美国联邦最高法院在论证排除规则的理论基础时，......
王敏远，见前注[5]。
典型的例证是云南昆明的杜培武案件。在杜培......
全国人大常委会法制工作委员会的......
熊选国主编：《......
同上注。
熊选国主编，见前注[18]。
Jerold H．Ier......
这一案件是笔者在一次专家咨询研讨会上了解而......
陈昌云：“云南昆明公安局干警杜培......
陈昌云：“劫后余生说噩梦――杜培武访......
这一情况在近年来新闻媒体披露的其......
有关这一案件的具体情况......
卡斯东?斯特法尼等，见前注[2]，页661以......
《意大利......
John Hatcha......
Claus Roxin，《德国......
卡斯东?斯特法尼等，见前......
《德国......
有关职权主义或“审问式”诉讼模式的评价，读......
锁正杰博士曾将......
Michael Zander，The Po......
在这一点上，一个典型的例证......
对于英国的情况，参见 Michael ......
Wayone R．LaFave and ......
本站所提供论文仅供学习、参考使用，版权归原文作者所有，下载、拷贝、复制文章阅读者请在24小时内将文章删除！
&― 作者简介 ―――――― ■
其它代表作品：
- - - - - - - - - - - - - - - - - - - -
&― 相关论文 ―――――― ■
- - - - - - - - - - - - - - - - - - - -114网址导航公司名称后面的S.A.是什么意思？_百度知道
公司名称后面的S.A.是什么意思？
那些国家常用这样的缩写，这个是什么的缩写.A对外贸易中.”字样，见到很多国外公司的名称后面有“S？ 有什么特殊的意义吗
L，上述国家企业名称中都有可能出现GmbH，“公司”在英语里一般简称Co：（1）各国语言文字不同.EDITION B。 SPA系意大利语societa per azioni之缩略称谓、Inc. Y。 九、S.O.则主要出现在法国.Z： METSO ACTUATOR MANUFACTURING OY（芬兰） SANMINA ENCLOSURE SYSTEMS AB （瑞典） 十、OY AB系瑞典语Altiebolag的缩写、PT： 一. de C.V．/.A。外国投资也以此种型态公司最多： PTGILANGCITRASENTOSAJAKARTA PTIndofood Sukses MakmurTBK 在印尼语中、巴拿马。经过调查，不能一看到GmbH。 SDN BHD是指“私人有限公司”.的也比较普遍.，私人企业名称中多包括PTY字样： CHAWLA AGENCIES PVT（印度） DAVANN INTERNATIONAL (PVT) LTD（斯里兰卡） 在澳大利亚和南非，在瑞典语里的简称则是AB;S A/，因此、GmbH和BHD SDN等，其他国家企业名称基本上没有SDN BHD字样、A/，导致一些国家和地区的企业名称比较独特：巴西。在实际操作中，即“有限责任公司”.DE C.V。 在荷兰; Y、比利时和卢森堡。所以，不能望文生义、南美） AG系德语Aktiengesellschaft的简称、TBK PT 和TBK主要出现在印度尼西亚企业名称中.P。 芬兰法律规定。 三.L。如： DANIELI & C，就以为是瑞典.A。如，在运用交易对方关键词判别交易国别时. SPA 和SRL为意大利最普及的两种公司形式： WEISMULL ER AGENTUREN IM-EN EXPORT B，公司注册形态主要分为有限及无限公司两种，比如、尼泊尔和孟加拉国、抓好两个前提 一是核查人员要对关键词本身进行准确剖译、墨西哥和智利.Ltd，比如、B，而其他国家则绝少有此现象。由于有的缩略语为某个国家独有.V，有的则是同一语种国家和地区所共有。 有鉴于此，公司必须有名称、合伙人企业或私人有限公司。 有限责任公司为介于大型股份公司与小型合伙企业之间的企业形态。 根据英国公司法.是“责任有限公司”的意思.V，不少语种与国家之间并不存在唯一对应关系.ltd 在印度。因此. V、K，现列举和剖译如下：土耳其 S，我们能通过交易对方中的缩略语来排除掉或推定出某一笔国际收支交易的国别.A. S，我们以近两年全国部分地区的近20万条国际收支统计交易记录为索引、秘鲁 由于这些关键词涉及我国主要的贸易对象国、列支敦士登、巴基斯坦，对于不能与关键词匹配的交易国别;S为丹麦文aktieselskab和挪威文Aksjeselskap的简写.V、银行能够正确录入或读取其交易对方名称。如.BREIDENSTEIN GMBH（德国） MESSE FRANKFURT MEDJEN UND SERVICE GMBH（德国） 此类公司形式主要是德语区存在。在对交易对方和交易国别的核查过程中： ETABLISSEMENTS TREVES SA（法国） NESTLE SUISSE SA（瑞士） COCKERILL MECHANICAL INDUSTRIES S、《投资法》进行了查阅和研究.R，梳理出许多在国际收支统计信息中出现频率较高.L；（2）各国法律制度和使用习惯存在差异.R、 SDN BHD与马来西亚的关系 SDN系马来西亚语Sendirian的缩写.POURPRIX NEGOCE 15 RUE DE GERLAND（法国） 五、列支敦士登，SRL系意大利语societa a responsabilita limitata的简称.开始或结尾：葡萄牙 Ltda: 丹麦 Lda，其实际经营状态与英国的私有有限公司(Private Limited Company)、PLC PLC系英语Public Limited Company的缩写、意大利。如，意为股份有限公司，也是其他一些国家的母语或通用语，意即“私人”、 PTY Pte 和PVT均是英语单词Private的简写 在新加坡设立公司。如，等于英文中的Limited liability company，TBK系印尼语中“股份”的缩写。 BHD系Berhad的缩写.A.A）的两种形态之一、西班牙语和葡萄牙语并不局限于上述几国、法语，全称为Sociedad Anonima de Capital Variable（西班牙语和英语混写），单BHD一般指“公众有限公司”，SA系法语Societe Anonym。 在马来西亚./.或Corp，绝不可将交易对方中出现GMBH的交易记录一概认为是德国的，其中以SDN BHD私人有限公司最为常见，如、阿根延，而有限公司又分为公开有限公司(Public Limited Company)即股票上市公司及私人有限公司(Private Limited Company)（即非上市公司）.K.A.及N。 二.是墨西哥公司法(Maxican Corporate Law)规定的股份公司（S。如.V。其资本额可以根据公司章程增加： GOLDEN NEST INTERNATIONAL GROUP PTY LTD（南非） YARRATRAILPTYLTDMELBOURNE（澳大利亚） PTY系英语Proprietary（私人拥有的）的简称，切忌想当然 由于民族迁移和殖民扩张的原因.、文莱（马来语是两国正式语言）企业名称偶尔出现SDN BHD外.TEAM EDV.A。如.分别系荷兰文Besloten Vennootshap met beperkte aansprak-elijkhed 和 Naamloze Vennootschap的简写。如，PT系Perseroan Terbatas的简称，如果交易对方中出现SDN BHD. OFFICINE MECCANICHE S，而交易国别不是马来西亚： CAREER TECHNOLOGY (SINGAPORE) Pte ltd. k，例如豆腐房，我们发现很多国家和地区的收付款人（公司）名称中存在各式各样的表示企业类型的缩略语.P、卢森堡、葡萄牙.R：Hutchison 3G Austria GmbH即为地址在维也纳的奥地利企业、GmbH是德语区国家除德国外还有奥地利;公众公司(Naamloze Vennootschap或N、瑞士.G（瑞士） S，在国际收支交易记录中并不见、肉铺等、西班牙.（比利时） 四，名称必须以英文为准，对于提高我国国际收支交易国别信息的准确性大有裨益，交易对方中出现OY，如德语，就联想到德国. MEXICO 十一、比利时和卢森堡 GmbH系德文Gesellschaft Mit Beschrankter Haftung的缩写： S，西班牙语全称是Sociedad anonima de responsabilidad limitada，为目前德国采用最为广泛的企业形式. INA BEARING SINGAPORE Pte，但必须用拉丁字母书写，严格把握其内涵和外延.型态组成为公司者最多，在充分了解或现场核查后才能最终确定其正确与否. 八、S、可用于国际收支交易国别判断的交易对方缩略语，除德国外、西德的GmbH或法国的SARl公司相似，只能存疑。 其他国家交易对方名称中包含缩略语的还有，将德语作为母语之一的还有奥地利，如、S。 十三。如。 因此： APS，分别是指私人有限公司和公众有限公司： CONSULTORIA INTERNATIONAL S： 一。 三.)的一般特征与世界上其它地方的股份有限公司相同，不少是家庭手工业者; N、AG（德国和瑞士）.R.O，一看到AB。如，比如.（南欧、意大利语Societa Anonima和西班牙语Sociedad Anonima的简称，则基本上可认定交易国别有误。 公司名称中包括AG的主要是德国和瑞士。私人有限公司必须以Besloten Vennootshap met beperkte aansprak-elijkhed或其缩写 B，表明该企业为私人企业.K、瑞士： PSI BT BUSINESS TECHNOLOGY FOR INDUSTRIES AG（德国） XCHINDLER INFORMATIK A、定位于非现场核查 以上交易对方关键词适用于国际收支统计数据国别信息的管理。 所以.V.A.V。 二、瑞士、比利时，企业一般注册为个人企业. S： LONDON STOCK EXCHANGE PLC 需要注意的是PLC是指Public Limited CS：葡萄牙，可以不是荷兰文，私人企业名称中一般含有PVT字样.k，新加坡法律规定私人企业名称中必须出现Pte.V． B。 设立公开有限公司，同一词汇在不同的国家具有不同的称谓，组织型态与股份有限公司类似，主要出现在法国。如：Co. INVENSYS CONTROLS ITALY S，意为“公司”。如.A、AB.A；交易对方中出现AB.L 、综合判断.和N.V，中文译为“可变动资本额公司”、智利 SP，唯要注意以下几个问题，公司名称中必需包括Public Limited Company或缩写为PLC字样.V，正确解读和运用这些交易对方关键词. JOHNSON CONTROLS INTERNATIONAL N.字样，目前系B，等于英语中的Limited liability company（有限责任公司）;S 七.V，也可用瑞典语Altiebolag或其缩写AB。 比利时企业名称冠以N、PVT ,企业名称中出现A/。 六.L。 十二,OY为芬兰语Osakeyhtio的缩写： COPENHAGENAIRPORT DEVELOPMENT INTERNATIONAL A/.A.A：捷克 EIRL.、S,有限公司名称最后必须加上英文Limited： HAMAMATSU PHOTONICS K.R. de C，对我国主要贸易伙伴国的《公司法》，中文译为（股份）责任有限公司、Corp，均译为“股份公司”，公司名称中必须有“公司”的芬兰语Osakeyhtio或其缩写OY，必须综合考虑，交易国别一般是芬兰，交易国别一般是瑞典或芬兰，如：波兰 TIC.K.是日本语Kabushiki Kaisha（株式会社）的简写，等于英语中的Joint-stock company（股份有限公司），私人公司必须在Limited前加上Private或Pte字样.；如，实际上多半是一些中小企业，指（共同）股份公司，意为“有限公司”、Pte、斯里兰卡，而非Private Limited Company.O、S，我们发现上述现象存在的主要原因主要是，但只能将其定位于非现场核查环节SA系法语Societe Anonym，均译为“股份公司”： CSP CORPORATION M ALAYSIABHD UNITED MS ELECTRICAL MFG(M) SDN BHD 除新加坡.V、S。如；二是交易主体能够规范申报..K是日语Yugen Kaisha (有限会社)的简写。 交易国别是我国国际收支统计记录中一个重要的申报要素,中文均为“公司”的意思、西班牙和黎巴嫩等国家： B.R. 荷兰法律规定。法语全称是Societe a Responsabilite limite.A、意大利语Societa Anonima和西班牙语Sociedad Anonima的简称，一般可认定其交易国别为丹麦或挪威、菜店
其他类似问题
为您推荐：
您可能关注的推广
公司名称的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁At the end of September, I finished what became an 18 month stint working with the Guardian on the UX for their .About two years ago I worked on a redesign for the
– my first proper responsive project – writing about
phases.RelatedPart of the reason for writing these articles is that I wanted to give an honest account of a responsive project. With that in mind,&Working with the Guardian has taught me a lot more about working on a responsive project, so I thought I’d share my experiences.Small and large screen versions of the home page for The Guardian's responsive site. Screenshot taken in
Performance is keyAny developers reading this have probably just gone, ‘Yeah… and???’, but bear with me – there’s a reason this section is first.I’d suggest that performance is not at the forefront of UX and design minds. Sure, we optimise the shit out of GIFs, PNGs and JPEGs, but in a broader sense it’s something we tend to associate with developers and are happy to leave to them. I’d suggest that performance is not at the forefront of UX and design minds… it’s something we tend to associate with developersIn this respect, I’ve learnt a massive amount about how UX and design decisions can effect real and perceived performance, as well as the lengths good developers will go to to achieve the optimal levels of both.A simple example of this is the Guardian’s house typeface, Egyptian. It contains numerous fonts, but for mobile we had to pick just two (a regular and bold weight) because each font is 20-25Kb in size – the same as the desired initial page load. Even then that’s still 100Kb for the four basic weights and styles needed (regular, bold, italic, bold italic).To get that figure down all sorts of measures were taken, including stripping unused characters and removing hinting information. And that’s just to address file size concerns – there’s also
for example, or caching for repeat visitors (which was solved by
nifty idea to
as HTTP cache can be unreliable). Another example would be the content we’d want to put on the page. How many calls to the content API are we making? What loads in as the core content and what can be added later?The overarching idea was to only make one initial content API call, with everything loaded afterwards – Football statistics and related content, for example, are modules that are loaded after the initial page load.We weren’t building a website in that traditional HTML/CSS sense, we were working on a complex JavaScript applicationFurther, the sites architecture employs
so there’s a navigation server, an article server, a section front server, a football statistics server and so on. There are a few reasons for this, but the main one is if a server goes down people will still see everything else.All of the above leads back to an even more fundamental point: we weren’t building a website in that traditional HTML/CSS sense, we were working on a complex JavaScript application.There are a lot more examples and detail, but the main take away for those of us working on the UX and design is that even something as simple – to us – as using an additional font, or adding an extra module, can mean a large performance overhead.Wireframing in HTMLAn example of an annotated article wireframe for The Guardian's responsive site – small and large screen versions are shown side by side. Screenshot taken in
As I mentioned in the , I’ve been wireframing in HTML as a preference for a long time now.RelatedFollowing on from the previous article on the experiences of my first responsive design project, I’m moving on to cover the research and wireframing stage&The benefits for a responsive project are numerous:everyone can see how the page should behave byyou get a much better feel for your UX playing with it in the browserit becomes much more ‘real’ to stakeholders showing them within the browser,conversations with tech are easier because it’s pretty obvious what’s supposed to happen when x is clicked or y expands.The tools I’ve been using are ,
and . To supplement that I have my own hilariously titled bootstrap, lozstrap, and my fork of Elliance’s brilliant wireframing annotation kit (), again self-reverentially titled .The process was the same as for Art Fund: sketch with pencil and paper, before moving into code. There were numerous iterations, but broadly there were three sets of wireframes across three project phases. The
were pretty much small screen only with the odd wider screen experiment. The second set started to explore more at wider screens and the final set were fully responsive.Each page was initially constructed making heavy use of server side includes, but laterly I adopted Codekit’s .kit files and began to use these instead, along with Codekit variables, for the HTML files.There were .kit partials for things like overarching template headers (e.g. the &doctype& and &head&), and page level modules (e.g. most popular).Variables defined page types and page titles. Page types were used as filenames for the relevant LESS/CSS and jQuery files and as a class for the &body& element.Any included .kit file usually had it’s own LESS file as well, so the most popular module or the navigation for a certain section would have an associated most popular, or navigation, LESS file. This meant I could drop those files in to other pages and reuse them at will. Yeah, I know it’s not very performant having numerous LESS/jQuery files linked like that, but communicating the, ahem, “vision” trumped performance for the wireframes. Besides, performance is a developer issue, right..?With the last set of wireframes, I started to annotate them fully using loznotes. This helped avoid ambiguity and explained any effects that were beyond my jQuery skills.For a while, I’d thought about putting the wireframes in to a CMS, as I had done with ArtFund, because I’d found it useful to have the content there ready to go, rather than copying and pasting, re-formatting and editing within the HTML.The experience of trying to make
bend to my will with ArtFund put me off somewhat – for future projects I really need to find a simpler CMS, that’s as easy to pick up as Textpattern, to use for wireframing if required.HTML wireframes as a defaultFor a long time I was the sole UX person on the project so the above didn’t create any problems because I was working alone (later under the watchful eye of Head of UX ).In the second quarter of 2013 the project split into three tracks and three extra UX people joined the project. To get them up to speed with the HTML wireframes, Nick made me (and he did have to make me) run the rest of the team through three days of light HTML, LESS and jQuery training, which in the end I thoroughly enjoyed (irritatingly as he said I would).The Guardian UX team is now actively working on its own bootstrap to be a common starting point for wireframing projects in the futureI’m incredibly proud of the fact that the Guardian UX team is now actively working on its own version of lozstrap – GuardianStrap if you will – to be a common starting point for wireframing projects in the future.They’d probably have got there eventually anyway, but I like to think, and hope Nick would agree, that I played a big part in making the shift to HTML wireframes at the Guardian happen.HTML to flat mock ups to HTML againLike anywhere else the Guardian is still, not struggling, but working its way through how best to deal with issues that arise in designing a responsive project.Pages were produced as HTML wireframes, then went back to flat visuals (in InDesign), then back in to HTML for production. As a process it’s not the best or most streamlined – even just thinking about the wireframing stage, the code I produced wasn’t production ready and didn’t adhere to the Guardian’s coding standards, so it got binned in the actual build.As a UX person I don’t want (or need in reality) to learn all the conventions the devs are using to output production ready code. As a designer probably even less so – you just want to play with the bits you need to.You don’t want your designers (or UX people for that matter) limited by what they themselves can do in HTMLI’m not one for prescriptive “you must design in the browser”. One day maybe, when we have better tools, but right now, to your average (or shit hot) designer, it’s hard. It’s hard for me and I consider myself fairly competent in HTML/CSS. You also don’t want your designers (or UX people for that matter) limited by what they themselves can do in HTML. At the Guardian there were some work arounds to allow designers to tinker with fonts and colours, as well as sitting next to devs tweaking elements, but, although beneficial, these are just work arounds.Honestly I’m not sure what the solution is. I’ve high hopes for
– as I think everyone has – but even that won’t necessarily address the issue of code being authored multiple times.Using the mobile website as the foundation for your responsive siteOne word, ‘genius’. The responsive project came about because there was a business need to bring the mobile Guardian website in house. It was to be completely rebuilt and re-architected and the responsive site would be built on top of it.So why is that genius? A number of levels:we were free from any constraints associated with working in the current architectany changes on the mobile site would not affect the current desktop site, so we could (but obviously tried not to) break things and experiment,we could work quickly and iteratively on the mobile site – a fair few things were tried just for a week or two to see if they’you can rapidly get good metrics – not that they are the be all and end all – behind successes and failures because you have real users interacting with the site,by the time you move up to larger screen sizes, there is a lot more of that data behind decisions taken and features that have been implemented.One of the fascinating things about the project is that it’s constantly evolving and changing, with features being added and things being tried, whilst unsuccessful ideas are discarded. And this all happens on a live site at a much quicker rate than any large news redesign I’ve worked on.One of the fascinating things about the project is that it’s constantly evolving and changing, with features being added and things being triedThe Guardian’s product department also held regular hack days which produced a number of good ideas that will hopefully see the light of day in the responsive project at some point. Wrap upThe project is ongoing without me and hopefully more of the fruits of my labour should see the light of day as they start to work more at the larger screen sizes.The team as a whole is great and, as I said at the start, I learnt a great deal from working with them and I’m taking those learnings into my current project (which also happens to be at a large news organisation).And finally a word of thanksJust a small thank you to
for giving this the once over and to
for prompting me to write it – he suggested that, as it had been over a year since my last post to the blog, I should write about this project and the wireframing technique in particular. So here it is. Finally. Recent
