-
Notifications
You must be signed in to change notification settings - Fork 0
/
websites.html
330 lines (309 loc) · 19.3 KB
/
websites.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>BactoView - Websites</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/small-business.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">BactoView</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ourteam.html">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ourproduct.html">Technology</a>
</li>
<li class="nav-item">
<a class="nav-link" href="websitebuild.html">Website Build</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.html">Registering a Domain</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Websites
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<BR><BR>
<!-- Heading Row -->
<!-- Call to Action Well -->
<div class="row align-items-center text-white webimg my-7">
<div class="col-lg-7 buffer">
<h1 class="bold font-weight-light">Websites</h1>
<p>This section of the website is dedicated to exploring various aspects of website design.
The first subsection covers the criteria for a good website. The second and third
subsections cover accessibility and GDPR respectively. The
fourth subsection covers website marketing, and the final subsection discusses further website development.
</p>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
<BR><BR>
<div class="row">
<div class="col-lg-9">
<h2>Criteria for a good website</h2>
<h5>1.Intuitive Navigation</h5>
<p>
Poor navigation systems reduce the effectiveness with which users can interact with the website. Poor navigation could be a result of needing multiple links to access different parts of the website.
In our website, links to various parts of the website are limited to the navigation bar and sidebar. This enables the user to move between the different parts of the website seamlessly.
A further reason for poor navigation stems from cluttered menus and content – we have thus opted to maintain a simple website with ample white space to facilitate pleasant navigation.
</p>
<h5>2. Good Aesthetics</h5>
<p>
A website that looks good will be more attractive to users. However, aesthetics is not just about making things look nice.
Aesthetics is also important in determining how the website owner is perceived. The aesthetics of a website must match its intended purpose as well as suit its target audience.
We have opted for a simple, professional look with our website to suit our image as a startup developing products for scientific research.
</p>
<h5>3. Communicates clearly</h5>
<p>
Content clarity has an important impact on user interaction. Things must be clearly marked and whenever required, explicitly explained to ensure successful communication.
Explanations must be clear and concise to ensure that communication with the user remains unambiguous.
For our website, this is especially important in the product section, as complex engineering and scientific concepts must be explained succinctly for the user to understand the purpose of the website.
The product price and features must be explicitly stated such that the user has a good sense on whether the product fulfils their requirements.
</p>
<h5>4. Mindful of technical considerations</h5>
<p>
There are multiple technical considerations that must be considered by a website designer. First is the loading time of the website. User engagement would be less pleasant if website loading times are excessively long.
3mb per page is a rough limit for how much content is acceptable per page. A further technical consideration is that the website must be able to load in different browsers, including mobile browsers.
</p>
<h5>5. Consistent</h5>
<p>
A consistent layout must be implemented between different web pages in a website. Layouts need not be exactly the same between different pages. However, a few overarching features like the background and the color scheme
of the web site must remain the same between the different pages. Aside from being more pleasant to look at, it prevents confusion among users.
</p>
<h5>6. Respectful of conventions</h5>
<p>
Certain conventions have spung up surrounding the design of websites, and in turn user expectations tend to conform to these conventions. For example, the navgation bar is placed near the top of the website and a sidebar is present to its side.
A website should be usable with as little thinking as possible, and using a layout users are familiar with facilitates this.
</p>
<BR>
<h2>Accessibility</h2>
<p>
Accessibility is a design principle whereby the needs of minority groups are considered when building the website.
‘Minority groups’ here is loosely defined. Often, it is used to refer to disabled groups.
However, it may also refer to people from minority races or nationalities as well as people from lower socio-economic backgrounds.
Accessibility is about ensuring that such users are still able to experience the web site and interact with it.
</p>
<p>
Technical standards exist for the evaluation of accessibility. One of the more popular standards is the WCAG(Web Content Accessibility Guidelines). The WCAG
awards 3 levels of accessibility, 'A','AA' and 'AAA'. In order to be given a certain accessibility rating, a website must fulfill a few requirements. For example,
a website must include alt-text for all images to achieve an 'A' rating. On the other hand, for an 'AAA' rating websites need to have sign language interpreters for videos.
These examples are by no means exhaustive, and a more complete list of requirements may be found on the w3c website.
</p>
<p>The following steps will help ensure that the website remains accessible:</p>
<h5>1.Clear and coherent typography</h5>
<p>
Maintain a large font size and consistent hierarchy. Large font sizes enable all users to read content clearly. This is especially important for visually impaired users.
</p>
<h5>2. Text presentation </h5>
<p>
Large blocks of text should be avoided as these make it difficult for users to read, which is especially disadvantages the visually impaired. To prevent this, text should be broken down into smaller paragraphs.
</p>
<h5>3. Use of alt text</h5>
<p>
Visually impaired users use software to read out the contents on their screen to them. For this, alt text allows them to understand the contents of an image without seeing the image.
This allows them to contextualize the image within their experience of the website.
</p>
<h5>4. Minimally Operable</h5>
<p>
To be accessible to users with limited motor function, the website must be operable without complex manoeuvres. Ideally, the website should be operable without a mouse.
However, where this not possible the user should be able to interact with the computer using only very simple mouse movements.
</p>
<h5>5. Maintain a good colour contrast</h5>
<p>
Good colour contrast is necessary to ensure that text is readable. There is a technical standard governing this known as contrast rating.
A website achieves the highest possible score for accessibility if it achieves a 7:1 contrast rating.
</p>
<h5>6. Use simple English for content </h5>
<p>
Some users may not have perfect command over the English language, either because they speak it as a non-native language or because they come from less educated backgrounds.
To ensure that the website remains accessible to them, jargon and inaccessible terms must be avoided. Furthermore, simple sentence structures should be used.
</p>
<h5>7. Usable in all browsers and devices </h5>
<p>
Socio economic status may limit users’ ability to switch between platforms. Successful interaction with users is dependent on the ability of the website to function properly in the platform being used by a user.
Hence the website must show properly across all browsers.
</p>
<BR>
<BR>
<h2>GDPR</h2>
<p>
The GDPR (General Data Protection and Regulation) was a legal bill passed by the European Union effective from the 25th of May 2018. The bill regulates various aspects of data collection and storage. It is the successor to the 1995 Data Protection Directive and was drafted to mitigate its shortcomings.
</p>
<p>
The GDPR has a few major effects. EU citizens were granted more power over their personal data collected by companies. The law permits them to request a copy of their personal data as well as to request companies to delete any personal data being held about them.
</p>
<p>
In addition to increasing the rights of users, GDPR also imposes a few rules on how companies may collect and store data. Companies must ask for consent before collecting user data. Tick boxes requesting consent for the collection of personal data must be opt-in, that is, the must be unticked by default, and the user should be able to withdraw consent at any time. Companies must report any data breaches to the relevant authorities within 72 hours. The penalty for non-compliance with this rule is a fine that may be up to €20 million or 4% of annual profit.
</p>
<p>GDPR is relevant to our website in a number of ways:
</p>
<p>
First, GDPR influences our choice in choosing to collect or not to collect data.
As a small organization, we do not require personal data belonging to our customers - most sales will occur via quotes over private channels, as
is done for many research platform tools. As we are unable to justify data collection, it is simply not performed in our website. However, if we wish to
include e-commerce features in future, then collecting user data may be inevitable. In this case, explicit user consent must be requested and data
must be destroyed once it is no longer relevant.
</p>
<p>
Second, GDPR implies the need for consent when displaying our employees' personal information online. The explicit consent of each team member
must be requested before their personal details, including their names and e-mail addresses, are put online for users to see. Furthermore, our
team members reserve the right to withdraw their consent at any time, at which point we will be oblidged to take down their personal information
from the website.
</p>
<p> Finally, GDPR requires that we evaluate our website for cookies. Cookies are essentially small text files stored in a personal computer that
allows information to be carried between web sessions. They normally contain information such as the website name and user ID, and are useful for
applications such as online shopping and log-ins, where information must be preserved when moving across different pages within the website. Since
they contain information that may be used to piece together a profile of an individual, they are regarded as personal information and thus regulated
by the GDPR. cookies may not be used without user consent. Using the google chrome developer tool, we found that our website does not store cookies,
and we have made an active decision to maintain that as they are not essential for our purposes. However, if in future we do decide to engage in
e-commerce and cookies become essential, then we must ask for the user's explicit consent before storing cookies in their personal computers.
</p>
<h2>Marketing steps</h2>
<h5>1.Search engine optimization</h5>
<p>
Most search engines work by identifying key words within web pages found throughout the internet.
Websites may take advantage of this mechanism. By frequently using popular key words throughout the website,
users will be more likely to come across the website through a web engine search.
</p>
<h5>2. Search engine marketing</h5>
<p>
This is distinct from search enginer optimization. Here, websites pay a small fee to search engines to place
their website at the top of relevant searches. These function more like traditional ads, but with search engines as the target medium.
These ads are normally paid for per click.
</p>
<h5>3. Targeted advertisements</h5>
<p>
It is possible to market the website by paying for ad spaces within other web sites. The location of these ads may be targeted for a partcular demographic.
In our case, the products are targeted primarily to life science researchers, especially those working in smaller labs. Hence, it may be useful
to purchase ad space in research/scientific websites. Alternatively, websites can market themselves by paying a marketing company such as Adroll,
who will customize ads at the personal level.
</p>
<h5>4. Retargeted advertisements</h5>
<p>
In retargeted advertising, cookies are stored in a customer's computer after visiting a website once. Ad companies can then re-target the same users with
ads from the same website. This is effective because 98% of web visitors do not make a purchase on their first visit. So, by targeting the same users again,
websites increase the chance of user conversion. However, as cookies are used consent must be asked in order to comply with GDPR.
</p>
<h5>5. Establishing good PR</h5>
<p>
A more traditional way of establishing good website traffic is through good PR. For a technology company, one way of doing this would be for technology journalists
to write about the science involved in the product. Good PR can also be established by publishing the science behind the product in a high impact journal. Links to the website
could be included as source material in either case, compelling users to visit the website.
</p>
<h5>6. Social Media</h5>
<p>
The website may be marketed by maintaining an active social mdeia presence. Many social media pages are aimed at life science researchers, the target market of the product.
Posting advertisements of the product on these pages and groups should increase website traffic drastically.
</p>
<h5>7. Guest blogging</h5>
<p>
Website traffic can be increased by writing guest articles for popular blogs. These blog posts can then be linked back to the product website, which should increase traffic to the
website.
</p>
<BR>
<BR>
<h2>Further website developments</h2>
<h5>1. E-commerce</h5>
<p>
As the company gets larger, it may be difficult to keep track of orders manually via a quote based system. At this point,
it may be necessary to implement an e-commerce option. The first challenge for this feature include having to create a shopping basket
feature where users can keep track of their purchases. As we have seen earlier, this requires the use of cookies, and thus user consent
must be requested as per GDPR. A further challenge would be a payment feature - there are security risks to this, and precaution would
have to be taken to ensure data remains secure.
</p>
<h5>2. Direct messaging feature</h5>
<p>
Many websites have a feature where e-mail messages can be sent directly from a website. This streamlines the user experience, as
the user need not log back into their e-mail to send send a message. This feature can be placed in the 'contact us' section, alongside
the contact information.
</p>
<h5>3. Opening video</h5>
<p>
Multiple images have been used throughout the website. However, inserting a video could have a stronger impact on users. It may
give them a better sense of how the product is to be used and why the product would be relevant to them. This video can be placed in
the 'technology' section.
</p>
<h5>4. Marketing</h5>
<p>
Marketing is arguably the most important step in expanding both the website and the company. A lot of what marketing would entail
was already covered in the previous section. Some approaches require editing website content. For example, search engine
optimization would require us to do research on common search terms relevant to our product and implement them throughout the
website. Retargeted advertisements require the implementation of cookies, which, again, would require us to request consent.
</p>
<h5>5. Links to publications</h5>
<p>
A common feature in many research product websites is a 'publications' section. Here, publications relevant to the product, including
basic science related to it and assesments of product accuracy, are shared. Sharing peer-revewed research articles is a good way of building
researcher trust in the product and the company.
</p>
<h5>6. Section for investors</h5>
<p>
Our website would not have to appeal just to consumers, but to investors as well. It would thus be helpful to post information relevant
to investors. External links to the company's stock performance as well as financial reports would be helpful to investors and would
make them more willing to invest in the company.
</p>
<h5>7. Improve Accessibility</h5>
<p>
We have attempted to maintain a reasonable level of accessibility for users by implementing features such as alt tags and clear fonts.
However, our consumers could still benefit from a further improvement in accessibility. One concrete way of doing this is implementing
a method for mouse-free control, which wuld allow users with limited motor skills to better experience the website.
</p>
<BR>
<BR>
</div>
<div class="col-lg-3 align-items-center">
<section class="sidebar">
<h4>Contact us for a quote</h4>
<p>Tel: +44 (0)20 0000 0001</p>
<p>Email: [email protected]</p>
<p><a href="contactus.html">Further contact details</a></p>
<h4>Quick links</h4>
<p><a href="ourproduct.html">Our product</a></p>
<p><a href="ourteam.html">Our team</a></p>
<p><a href="register.html">Registering a Domain</a></p>
<p><a href="websitebuild.html">Building the website</a></p>
</section>
</div>
</div>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © BactoView 2019</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>