For my fourth week at IXD we looked at the best methods to creating our portfolio website. We discussed what HTML and CSS are and the way to implement these to create our portfolio website. This week we also had a talk through one of placement opportunity with MT from ESO to speak to us about their offer for placement this year. And finally we had a run through demonstration with Kyle on the workings and development behind creating a site with Webflow.
Responsive Web Design:
We started off this weeks lecture with understanding what Responsive Web Design is, why it’s important and how we would implement this into how websites.
Having a responsive system in order for your website is one of the most crucial elements to coding and designing a site in the currant digital world. This is down to the wide category of devices that are available to consumers today. Having a responsive web design is a design system set in place that allows your site to be projected on a wide range of interfaces from desktops to phones to tablet to watches, its designing for all size of devices. Incorporating Responsive Design then into my site will allow the layout of my site to change to the resolution of the screens dynamic overall allows my users to have the best experience when using my website.
For this specifically whether I am creating my design using HTML/CSS or Webflow I will make sure that each page deliverable is responsive to 4 main categories, Desktop, iPhone, Android and iPad/Tablet. Areas in the site might break as I go down device size and this is where I begin to adapt each design to fit into the devices.
And to incorporate this into my website when coding this mostly involves one code base that uses media queries to instruct the code on what to showcase and how showcase content for particular screen sizes.
Example of good Responsive Design:
I will be evaluating the responsiveness of the tyeporaphy, images, text and navigation used with Microsoft Outlook. I will be showing how each website either has good or bad responsive web design using a desktop web browser and iPhone 11 web browser.
Microsoft Outlook (desktop)
This is the homepage of the Microsoft Outlook desktop webpage. The typography and text used throughout this page is clear and readable to the user highlighting the important information to grab the audiences attention with noticeable and bold font. When it comes to the responsivness of this site when the screen is shorted both typogrpahy and text both shrink to respond to the size of the given screen. The text still becomes readble and fits the screen allowing key areas to still be noticible to the users.
With the typography and text being highlighted throughout this page thanks to the colour and bold font used there is also the large image placed in the centre of the screen. This image is another element that is allowing the typogrpahy to bounce off the page. The responsiveness of this background image is strong as when the screen is shrunk or stretched the image itself expands to fit the screen size without the image becoming blurry or rearranging the typography.
The navigation around this specific page is designed well because as a user I am able to find what I am looking for quickly and get to the other pages throughout this website. The navigation is designed as buttons and when clicked they immeditatly bring the user to the next page such as signing up and creating accounts. The navigation also allows this website to become responsive because when the screen shrinks down and the buttons jump to the top of the screen allowing the needed informaiton to still be easily found.
Microsoft outlook (iPhone 11)
With the iPhone the responsive web design can be seen immediately when compared to the desktop version. The overall look of the design is smaller to react to the size of the screen which is what creates the responsive web design.
The typography and text that is used on this device as you can see above is still readble to the user which is key to good web design. However, on this device the text is more structured and laid out a lot neater not taking up as much space stacking the content on top of each allowing the user to read from top to bottom to gather the needed information.
Other strong websites that demonstrate good Responsive design when it comes to the design of their images, typography, layout and navigation are:
Youtube:
Spotify:
Elements of Responsive Web Design:
- Control viewport – The users visible area of a webpage that should adapt to the device that it is being portrayed on.
Viewport code 
This gives the browser instructions on how to control the pages dimension and scaling. ‘Width=device-width’ sets the width of the pages to adapt to the screen width of the device. ‘Initial-scale=1.0’ sets the initial zoom level when the page is loaded to a browser.
- Create flexible grids – The term introduced by Ethan Marcotte, allows you to construct layouts in HTML. Flexible grids allow you to divide a layout into numerous columns and rows.
- Make media responsive
- Create break points (media queries) – Breakpoints are the points within your sites content that will adapt to provide your users with the best layout depending on their device.
How the internet is made?
Technologies
There are 3 core languages that should be taken into consideration when creating web pages. These include HTML, CSS and Javascript. These three languages form the backbone of any website and its content.
Hypertext Markup Language (Html)- HTML is the standard markup language that is used to compose web pages. It is crucial that HTML is used in the creation of webpages as it will allow us to create a basic structure or template that includes headings and paragraphs and then to embed images, vidoes, links and text. HTML allows these elements to be understood so that the web browsers can then display them in the right format and therefore viewable on the internet. HTML adapts the pages to suit and fit specific types of devices such as large computer screens to small phone or tablet screens.
Basic HTML code –
<!DOCTYPE> declarations must only appear once at the top of the code and represents the document type and helps brokers to display web pages correctly.
<html> tags tells the code that it is a HTML page
<body> tags holds everything that will be displayed within the browser
HTML Headings are defined by <h1> (important) to <h6> (least important) 
HTML Paragraphs are defined with a <p> and represents paragraphs within a website <p> this is a paragraph </p>
HTML Links are defined with a <a> tag linked to the href attribute which are used to provide the data about the HTML element.
The link within the tags can be a URL to another website or can be a link to a section that is with the website that you are creating.
HTML Images are defined with the <img> tag. The link to the image file is referred to as:
src (source) where to find the image, alt (alternative text) screen readers to provide text alternatives for search engines or sight impaired users and width and height.
<img,src=”file” alt=”data” width=”” height=””>
HTML Buttons are defined between two buttons tags and can be edited further within the CSS files when adding a class.
<button> press</button>
HTML Lists include a un-order list (bullet points) and an order list (numbered).
An un-ordered lists is represented with a <ul> tag
<ul>”</ul>
An ordered lists is represented with a <ol> tag
<ol>””</ol>
Horizontal Rule is represent by a <hr> tag which is creates a horizontal line on your webpage.
HTML Attributes gives additional values to elements by adjusting their behaviour in a range of ways to meet the users needs. Attributes are used within a webpage to provide additional information such as explaining an image.
href Attribute =
<a href=”link”>instagram link</a>
src Attribute =
<img src=”img name”>
alt Attribute =
<img src=”img name” alt=”define image”>
Width and height Attribute
<img src=”img name” alt=”define image”> width=”size” height=”size”>
Cascading Style Sheet (Css)- CSS is the language that is used to bring style to your web pages describing the overall look of your page. It will connect with your HTML documents which then allows our CSS document to understand where and what we want its functions to do. CSS will be used to understand our document style such as page layouts, fonts and colours. It is important to use CSS when creating web apps as it describes how HTML elements should be displayed from paper onto the screen.
Linking to HTML:
To connect the CSS file to the HTML file we have to tell the HTML file were to pull the information from and to do this we must load the CSS stylesheet into the head tag in the HTML file.
Javascript- Javascript just like HTML and CSS forms the front-end web development as it is a scripting and programming language. JavaScript is embedded in HTML code and allows complex functions to take place on your web pages, it will also allow us to convert static web pages that have been designed using HTML and CSS. Using JavaScript will allow us to create responsive and interactive elements for the web pages. By using JavaScript this would improve each user’s experience on our webpage as they will allow our program to interact with them with features such as animated videos/images, menus, mouse rollovers and interactive maps. It has now become possible with the implementation of frameworks such as React Native that JavaScript could be used in the process of creating a mobile app.
Bootstrap- Bootstrap is the most popular HTML, CSS and Javascript Framework for developing responsive and mobile-free websites. It is a front-end development framework and a Web App Development toolkit that includes reusable sections of code written in HTML, CSS and Javascript.
Image formats
This was an interesting area that Kyle decided to go over with us and was the first time I have been given the chance to understand fully the meanings behind the different formats of images and their usage in creating a website. This topic allowed me to understand the best formats of images I should use moving forward when building my site.
JEPG -‘Joint Photographic Experts Group’ widely supported image files that are used online with small file sizes. JPEGs are designed for handling large colour pallets without an increase in its file size.
- Don’t allow for transparent pixels
- Good for colour and detail
- Specified for photograph of real world subjects rather than graphics or illustration
- Supported by all devices, displays and web browsers.
GIF – ‘Graphic Interchange Format’ is an image format file that supports both animated and static images. This file format was the standard 8-bit colour image on the internet until PNG became the alternative.
- All pixel based
PNG – ‘Portable Network Graphics’ file is a first choice format for graphics. It is supported sufficiently to be used in emails and social media sites. Ideally used to save an image with layered edits but images must be converted to another format before being displayed online.
- Great for images and transparent pixels
- Works well for diagrams/icons
- Great for anything not animated
SVG – ‘Scalable Vector Graphics’ are a vector based graphic format which allows you to scale the image up or down and you don’t look the quality unlike with the other formats above.
- Use these when you can
- Does the job as all above
- Keeps quality of image
- Good for use of brands or logos
Webflow Practice:
At the end of this weeks class Kyle demonstrated to us a live session of using Webflow that the class were able to follow with creating a navigation bar and a home page. I was excited with this task as I got the opportunity to have a hands on go at creating something in class with a new tool. I am one of many in the class who have got to code and design a functioning website using HTML, CSS and a little bit of Javascript, which I thought would give me a stepping stone into using Webflow.
At the beginning of the semester when we were introduced to our modules and project scopes I was excited to get creating a new website and instantly was going to create it using a code editor as it was an area I felt most confident and comfortable in. Getting stuck into Webflow in this weeks class didn’t change my mind much on using a code editor in comparison to software like Webflow because I found it a lot harder to understand where was putting my element and how to change and edit areas when going through it with Kyle in class.
However, I am now a few days into practicing with this new tool using Youtube tutorials as well as Linkedin Learning courses to fully understand the level of design I can pull from this tool and slowly I think I am getting the hang of it. I have sent off for my student discount code to access a premium account so that I have more webpages to design my website on and I am hoping that by next weeks class I feel a lot more confident in this tool to begin building my site from it. Even though I feel more confident with code I am making it a goal to learn this new tool and accomplish creating a fully functioning designed and structured linked responsive website.
https://www.linkedin.com/learning/learning-webflow-14332778/a-new-kind-of-content-management-system?autoplay=true&trk=course_preview&upsellOrderOrigin=default_guest_learning
BOOK – Responsive Web Design Ethan Marcotte
Ethan Marcotte is a Web designer and is known as the guy who refined the term “Responsive Web Design” to describe a new system that allows you to design for the ever changing web.
Marcotte book “Responsive Design” demonstrates how designers and businesses can use the flexibility that comes with the web to design across many different interfaces such as desktop, mobile, watches, iPads, tablets etc.
I found that this book summed up exactly the importance of responsive design as well as how to incorporate his methods when creating a website. His book was written specifically well for a beginner designer like myself that I came away from reading this book understanding how to move forward with my creation of design. Specifically looking at the fluid coding and media queries jumped out to me most on the ways to incorporate these further to ensure my site is always fully responsive.
“‘Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media thatrenders them. In short, we need to practice responsive web design.”
To conclude this weeks class we discussed the wide range on content and elements that is needed to construct a fully functioning web platform. This class gave me a recap through HTML and CSS, reminding me of the breakdown of elements to create content as well as giving me the opportunity to learn new areas of work with coding with these languages such as how to input a horizontal line and the importance of the image formats. I feel more confident in what I am aiming to go into creating and how I will do this using the Webflow tool with more practice. I understand more clearly now the importance of designing my content fluently so that I can design for several devices to ensure I am making my users experience the best possible whatever they are searching my site on.
For next weeks class I am aiming to have started the process of building my first 2 pages (Home, Case Study) of my portfolio site using Webflow basing the designs off my new High Resolution mockups. If this fails by week 5 I will move onto a code editor to allow me to get the structuring of my site going.