Website Production

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.

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.

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%

Source: websitedimensions.com

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.