Research
Laws
Laws, guidelines and constraints which affect
the content and use of websites.
To comply
with EU laws, websites but follow the following points, or else otherwise are
illegal.
Cookies – Cookies are small data files stored on your computer
which contain information relating to which websites you’ve visited. This is
then used to tailor your experience on a website; they can also be used to
target you with more specific ads.
The law states
that businesses should follow three steps with regards to use of cookies on
their site. First, they need to inform visitors that the site has cookies
running on it. Then they must explain what the cookies are doing and why. And
finally, the must get the visitor’s consent to store cookies on their device.
Websites typically do this using a web at the top or bottom of their website
which states that the site runs cookies and that the visitor must agree for
cookies to be on their computer is they want to remain on the site; if they
don’t want cookies then they should close the website.
Copyright – Copyright prevents anyone using content
that isn’t strictly there’s. For example, an image you find on Google. That
means that those designing and creating the website have to be aware of what
content their displaying on there, as to not include anything that copyrighted
as then they’d be liable for being sued by the creator.
Security – Websites which sell or auction items, such as Amazon,
eBay etc all must ensure their customers are safe and secure when making
transactions online. When customers go to checkout on a website and pay for the
goods they want to order, they have to input their debit or credit card details
in order to pay. To ensure no-one intercepts these details when they’re being
sent, websites must encrypt the data, so should it be intercepted it isn’t
immediately accessible.
There are
multiple ways of encrypting and protecting information, and the law enforces
businesses to have a high degree of security. If a business is found to not
have sufficient security for their customers, then they’re breaking the law.
Device Compatibility
Compatibility issues – When developing a
website there are many compatibility issues to consider, I’ve listed three
common issues below:
Device – One of, if not the most common issue is device compatibility.
It’s highly unlikely two random people wanting to view your website are going
to have the same device; they may not even both be using a computer, as
tablets, phones, TVs and games consoles are also capable of previewing
websites, and therefore you need to ensure your site can run across most if not
all platforms, in order to not limit or restrict your audience.
Browser – Not only do you have to consider the hardware your audience
will be using, but also the software they have running. This too can come in
many forms and factors, ranging from the operating system; are they running
Windows, iOS, Linux etc, all the way down to the browser they use, such as
Internet Explorer, Firefox or Google Chrome. Each of these software programs
may have minor differences which may deface or prevent your website running all
together. To ensure that all browsers can run your site, coding differences may
be required along with some minor plugin changes.
For example, Internet Explorer in some cases isn't capable of running Adobe Flash, Microsoft know this is an issue for some users and have issued a work around by suggesting users install the 32 bit version of Internet Explorer.
For example, Internet Explorer in some cases isn't capable of running Adobe Flash, Microsoft know this is an issue for some users and have issued a work around by suggesting users install the 32 bit version of Internet Explorer.
Screen Size – When developing your site, what size screen are you targeting
it for? Similar to what I’ve already mentioned, not everyone will have the same
size screen. An iPad screen is bigger than an iPhone but smaller that a monitor
which too is small than a TV, so you’re going to need your website to either
automatically resize based on the device, or a completely different design to
better suit that particular device.
For example, you may target your website design for computers 1080px wide, but then what happens for someone who views your site on a computer which is only 800px wide? Assuming you don't have CSS to automatically adjust the page size then they're going to have sideways scrolling, something not all too many people are familiar or happy with.
Below is a table which shows the resolution of the monitors people used in January 2016.
Source: websitedimensions.com
Below is a diagram which shows the difference between four of the above resolutions.
For example, you may target your website design for computers 1080px wide, but then what happens for someone who views your site on a computer which is only 800px wide? Assuming you don't have CSS to automatically adjust the page size then they're going to have sideways scrolling, something not all too many people are familiar or happy with.
Below is a table which shows the resolution of the monitors people used in January 2016.
Screen
Width
|
Screen
Height
|
Percentage
Used
|
1024 px
|
768 px
|
3%
|
1280 px
|
800 px
|
11%
|
1360 px
|
768 px
|
2%
|
1366 px
|
768 px
|
35%
|
1440 px
|
900 px
|
6%
|
1600 px
|
900 px
|
6%
|
1680 px
|
1050 px
|
3%
|
1920 px
|
1080 px
|
20%
|
2560 px +
|
1440 px
|
1%
|
Below is a diagram which shows the difference between four of the above resolutions.
To help limit the issues you may seen that some sites have two variations, a mobile and desktop site. These tend to have different menus and layouts to compensate for the different in size. In terms of desktop displays, a website can use margins, spacing and padding to help keep the text centered when viewing on a large screen and then lower these when viewing on a smaller screen.
File Types
Something else you really need
to consider when developing a web site is how large and how much content is
going to be on there. The more/ higher quality content, the higher file size
and the longer loading times. So web developers now need to find a fine balance
between high quality, good looking websites with subtle features and a website
which loads within seconds, even for those with low internet speeds.
Ever
wondered why the Google homepage is rather empty? Well in the early days the
founders wanted a search engine which loaded quickly, combined with the fact
they didn’t know HTML.
In order to
get a high quality site with quick loading times? Well you’ll need to get the
right content and the right file size for it. Below I’ve quickly covered a few
different file types and the differences between them.
Jpeg: Great for minimising the size of an image, which offer upto 16.8
million potential variations of colour, which makes them great for photographs
and images. However, the compression can cause the image to contain varying
amounts of noise and therefore reduce the overall quality, depending on the
amount of compression. The more compression the smaller the file, but the lower
quality image.
PNG: If you’re wanting pure quality, regardless of file size, then it’s
easily the best choice. Compared to Jpeg, PNG works well when saving anything for the web, due to it's compression; lines, text, graphic etc should all be saved as PNGs'. A final advantage of PNG is that you’re able to save
images with transparent backgrounds; something you cannot do with Jpeg images.
GIF: GIF has a maximum of pre-set 256 colours which means image
quality, particularly on images can be really poor. However, with the limited
colours, it makes it great for saving vector graphics. GIFs are also smaller
than Jpeg when comparing file size.
Group Discussion
In order to
determine what content we were going to include on our homepage we began with a
group discussion in which we took note of what was already on the page, and
ruled out things that could be removed and what we wanted to keep. We then also
brainstormed our own ideas for websites which Further Education (FE) learners
may visit or find useful.
During this
discussion we chose to keep the following sites:
Website
|
Reason
|
Moodle
|
Given it’s
Barnsley College’s VLE and all students’ work is completed on there, we found
it necessary to include it and allow them a quick way to access it.
|
Tasks
|
Tasks
offers students a quick way to know what tasks they need to complete and when
to have them done by.
|
Calendar
|
Calendar
offers them to book any meetings or add reminders to deadlines for
coursework.
|
College Services
|
The
College Services section provides students with important information and
services provided by the college.
|
Study Skills
|
Study
Skills is an area which provides students with different knowledge on taking
exams and how to more efficiently study.
|
Pro-Portal
|
Pro-Portal
is a system which allows students to access some of the information which
college stores about them.
|
Balance
|
Balance
informs students how many print credits they have.
|
Attendance
|
This
allows students to access their attendance records.
|
Mail
|
This gives
students access to their College email account.
|
Office 365
|
Office 365
gives students access to some useful programs such as Microsoft Word,
PowerPoint etc.
|
Twitter/ Facebook/ YouTube/ Google
|
We thought
it would be a good idea to give students quick access to their social media
accounts, and also the Google search engine.
|
In order to
comply with Copyright laws we had to take several precautions before beginning
our design for our MyDay course. One of those was to ensure any icons we used
weren’t copyright protected. To ensure this, we used icons from a website
called Flaticon, which offers free icons. We also had to find a background
which we liked that too wasn’t copyright protected. In order to do this, we
ended up creating our own background based on a few ideas we’d seen online.
Design Process
I’m now
going to explain some of our design ideas and processes, and also expand on
some of our design decisions.
This is our wireframe which shows the basic
layout of all the content.
As you maybe able to tell, we wanted to keep the
content in an even and structured layout with the content based around the
Announcements and Twitter Feed with the banner just above. The surrounding tiles to the left and right of the announcements and Twitter feed make up the different apps and programs the students will need. We layout them out in order of importance to the user, with Moodle in our opinion being the most important shortcut, and Office 365 being the least important.
This
is our finished design in Photoshop, including the colours and icons we were
going to use. From it you can also see the different effect we wanted on each
of the tiles.
To decide the colours of the tiles, we decided to use the same colour that, that company uses for their product. For example, the YouTube tile is the same colour red as the YouTube logo. We chose to do this so that the colour matches the tile and fits in with the theme of that particular tile.
On each of the tiles to the sides we add the white shadow which prevents the tiles from looking so flat; however when it came to editing the course page we were unable to add them, as you can see in the screenshot below.
This is the finished product.
You may notice that there are some differences
from our concept design and the finished page. One of the differences is that
the social links weren’t able to be small enough into one row, and therefore we
had to put them onto two. The announcements/ Twitter Feed is also smaller than we wanted in order to compensate for having the social media on two rows, which makes them look rather chunky and out of proportion.
Another feature we wanted to add but were unable to was the rollover feature, which would cause an almost transparent black box to slide upto the top of the page thus darkening the tile and the name of that tile to appear in the middle. Below are two screenshots which should help explain what I was aiming for.
The image on the left is an example of a tile in it's standard state. As you maybe able to see the transparent box is at the bottom and makes the 'Moodle' text easier to read, particularly on other, lighter tiles. On the right, is the same tile but in the rollover state. As you can see the black box at the bottom covers the entire tile and the text moves closer towards the center.
This
is another one of our designs that we came up with. As you can see the tiles in
this one are hexagons made into a pyramid design. There are also some tabs
coming off the bottom which indicate what category they’re a part of. Then to either side is the College Announcements and Twitter Feed with space for the banner just above.
Unfortunately we were unable to use this idea as hexagons cannot be added in using the MyDay software, which is a shame as I felt this idea looked the best, and offered the most change in design. However I do feel the two feeds either side might have required some more work on them to try and incorporate them better.
Configuring The Page
Below I've explained the process we went through in order to change the MyDay page into the design we created above. In there I've explained so of the different tools and menus we had to use in order to create a fully functioning page.
Here
you can see the menu on the left of the MyDay homepage. Using this menu you can
begin to edit each of the homepages by clicking look and feel and then the
themes option.
From
here we can then find our user group, in this case Further Education and select
the edit button to the side.
Here’s an example of how to change a tile.
Using this menu, we can change things such as
the size of the tile using the size dropdown option. Should you want, you can
also change the icon and tile colour using the options below. Looking past
them, there’s also the option to change the icon using several pre-set options.
A few other options are the background image which allows for a completely custom and more unique title. Beyond that is the link URL and whether the link should open in a
new tab or not.
Finally, to move each of the tiles, should you need to
be outside of this tile editor and you’ll be able to click and drag them around
freely, outside of this menu.
After changing or adding in any icons we needed to change the background and add the one we designed, to do this we had to go back to the themes menu and edit it through there, where we uploaded the background as an image.
Above is a screenshot which shows the settings for our theme.
Test Plan
And to wrap
up this blog, I’m going to show you my test plan which I used to test our MyDay
page ensuring all the links worked as intended.
Test
Number
|
Test
Details
|
Expected
Outcome
|
Actual
Outcome
|
1
|
Moodle tile link – A test to see if the link on the Moodle tile takes
users to the correct page.
|
Clicking the tile should open Moodle in a new tab.
|
Moodle opened in a new tab.
|
2
|
Pro-Portal tile link – Another test to see if the link on the
Pro-Portal tile directs users to the correct page.
|
Pro-Portal should open in a new tab.
|
Pro-Portal did open in a new tab.
|
3
|
Mail tile link – Yet another test to see if the tile for Outlook
directs you to the correct page.
|
Outlook will open in a new tab.
|
Outlook successfully loaded in a new tab.
|
4
|
Office 365 tile link – The final test to see if Office 365 would
launch in a new tab once clicked.
|
Office 365 will open in a new tab.
|
Office 365 did open in a new tab.
|
5
|
Background image – A test to see if the background image loads on
another user’s computer
|
The background image should appear behind the tiles.
|
The background did appear when accessing the page on another
computer.
|
6
|
Surface – A test to see if the MyDay page loads successfully on a
Surface tablet
|
The website & background should load along with all the icons.
|
The page loaded without any issues.
|
7
|
Mail – A test to see if the MyDay connects you to the correct email
address.
|
Outlook should load and connect you to your email account
|
Again loaded without any problems
|
8
|
Calendar – The final test, to see if the calendar programs correctly
collect and display the correct data.
|
The correct dates should load along with any extra info
|
Loaded without any issues.
|