wonderwebby

[wonderwebby]

It Starts With Wireframing ...

Our final assignment for our web authoring module is to design a website from scratch. We’ve learned that proper planning is essential for web design.

First you need to figure out your goals for the website and anticipate the site users’ goals. From that you can identify the overlapping goals. This will give you an idea of priorities and the elements to prioritise in the design.

Now you’re ready to start wireframing.

But what is wireframing? Sounds technical, right?

Wireframing is basically sketching out the structure of your site including the layout of the pages. You don’t need anything fancy to wireframe - just a pencil and paper will do.

One of my classmates shared a video that gave some more insight into the steps involved in wireframing. I found a helpful blog post that explains the difference between a wireframe, mockup and a prototype. In short, a wireframe is the first step to show the structure and basic elements of a website; a mockup will contain more visual elements and illustrate how the finished site will look and a prototype is an early version of the website - the next step on from a mockup.

Photo credit: Unsplash/Kelly Sikkema

[wonderwebby]

Sustainable Web Design

Moving to paperless was once thought to be the solution to reducing our office carbon footprint. Now we know that going digital is not the panacea we had imagined.

How’s this for a fact: “If the internet were an actual country, it would be the sixth-largest polluting country in the world.” 

That’s according to Tom Greenwood of Wholegrain Digital web design agency, who says that sustainable web design should focus on reducing carbon emissions and energy consumption.

In his book ‘Sustainable Web Design’ he explains how web designers can reduce the environmental cost of internet usage by their choices in image files, colors, coding languages, servers and more to make websites more efficient and accessible.

Tom was interviewed by Forbes magazine about his approach and he shared the six principles to consider when creating web products and services: “clean, efficient, open, honest, regenerative, and resilient.”

He advises individuals to consider their use of hardware, software and their behaviour. For example. consider buying refurbished computers when replacing a computer or device and choose software and cloud services from suppliers who are committed to being more energy efficient.

Credit: Jay Zhang/Unsplash

[wonderwebby]

Interesting web design facts

I’ve mentioned in previous posts how studying web design has changed the way I look at my use of websites. I see my frustrations with slow-loading, poorly-designed navigation and broken links in a different light now.

While web design can make a site more aesthetically appealing, I’ve sometimes found a beautiful website and quickly abandoned it because it’s taken too long to load or I can’t quickly find the information I need. For me functionality beats style every time and it is possible to have both.

I was looking into some of the pitfalls of web design and came across this interesting post that looks at five facts about web development that I hadn’t considered before. While my mind wasn’t blown by these, I found it interesting.

Here’s a summary of the post (link here):

1. How your websites look can depend on the user’s browser

2. Proper coding is essential to SEO

3. Tech moves fast - a 2-year-old site may already be outdated

4. Images and videos can look great - or slow your site down: Don’t forget to optimise!

5. Avoid templates or at least customise them

The last point is particularly relevant right now as we work on a WordPress assignment and learn how to create and customise a child theme

[wonderwebby]

What is good web design?

Does it look good or function well? A website might look beautiful with stunning imagery and fancy sliding images but if it doesn’t work the way the user needs it to then they’re likely to abandon it to look for information or shop elsewhere.

I’ve come across some articles on user-friendly design and this one stood out to me because navigation is one of the most important characteristics for me in a website.

When I’m looking for information or want to buy something from a website and I end up clicking in circles, I’m left feeling frustrated and with a poor impression of the company behind it.

According to this article, planning the structure of the site with the goals of users in mind will lead to better navigation and ultimately an improved user experience.

[wonderwebby]

Finally, I’m almost finished my latest assignment for Web Authoring. It’s a two-page profile website. Here’s a screenshot of the second page from last week. I had completed the HTML on both pages and checked it with the HTML Validator. I thought so far so good. Then I started adding the CSS. And that’s where I ran into trouble...

[wonderwebby]

Web design and accessibility

One of the topics we’ve been discussing on the Web Authoring forum is usability and accessibility. When I researched this topic I found an interesting article on the UX Collective website.

The author, Pablo Stanley, wrote that studies show that accessible websites have better search results, reach a bigger audience, are SEO friendly, have faster download times, they encourage good coding practices, and they always have better usability.

For people with disabilities a poorly designed website is more than merely frustrating - if they can’t use the navigation or differentiate between colours the site is unusable for them.

What I’ve learned is that HTML tags are crucial to the flow of a website’s structure and content. Clear hierarchy of content helps the user to understand the order of content and the use of headers enables text to audio users navigate through the site.

[wonderwebby]

Over the last few weeks we’ve been covering CSS which stands for Cascading Style Sheets. I learned that CSS determines the style or presentation of a web page and CSS adds fonts, color (in coding we spell color the American way) and spacing. CSS controls the size and position of elements on our page including text, images, columns and borders.

We can add CSS in three ways - inline, embedded or external - we are using the latter as it makes for faster loading and it’s easy to update.

The first thing to remember is to add a <link> element to our html which links a style file to our page. The <link> element goes in the <head> element.

Basically a style sheet contains a set of rules that dictate how the elements will appear. These three components of CSS are selector, properties and values.

CSS uses curly brackets {} around each element’s style rule. Just like in html I must remember to close the bracket.

#css #selector #stylerules

[wonderwebby]

I’m making progress! Code Camp really helps to reinforce what I’ve learned in class. Labs can be frustrating.

In our first few labs when we were working with HTML, I would write the code and run it through the HTML validator looking for that lovely green tick. But more often than not I was ticked off. It was often something simple, a typo or a missing closing tag.

The great thing about web development is the community around it. If you get stuck someone out there will help you to find a way around the obstacle in your path - even when that obstacle is your own cluelessness.

I just felt like I was getting the hang of HTML when we were onto CSS and the learning curve got steeper again.

#htmlvalidator #css #coding

[wonderwebby]

If there is no struggle, there is no progress

Frederick Douglass (1857)

This quote from the famous abolitionist was cited in an article about front-end development was posted on our WA forums. I’m posting it here to inspire me as I encounter challenges in my web authoring learning journey.

Here’s a link to the article on geekflare:

https://geekflare.com/become-a-front-end-developer/

[wonderwebby]

More Code Camp

Last week we started learning about CSS. Having built the structure of a web page with HTML, we add CSS to create the style and basically make it look good. The lab practice was challenging but it’s satisfying when it (eventually) makes sense.

I’m also really enjoying the lessons on Code Camp. Here’s a screenshot.

[wonderwebby]

Next week we’ll be looking at CSS (Cascading Style Sheets). HTML gives our website structure and CSS gives it style; it handles the presentation of our site.

Waters + Wild is an Irish brand of organic perfumes set in the wild beauty of west Cork. I wanted to share the link to the website as I think it embodies the essence of the brand with its clean and natural imagery and gorgeous design.

[wonderwebby]

Practice makes perfect (almost)

For the past three weeks we’ve been learning how to write HTML. It’s been a steep learning curve though I had already had some knowledge of it from using WordPress.

Our set readings covered a deep delve into the history of the internet and the world wide web which was really interesting. For instance, did you know that the “web” is a subset of the internet?

The rate at which the internet has developed since the early hypertext system model emerged in the 1990s is truly staggering. And I’m old enough to remember the joys of the floppy disk and dial-up modems...

This photo below gives some idea of how far we have come in terms of technology. Nowadays the average smartphone has storage capacity of circa 32GB or more. Back in the 1950s it took several men to load this IBM disk onto a plane. Its capacity was less than 5MB - about the size of one iPhone image.

Credit: businessinsider.com

[wonderwebby]

Code Camp Challenge

A requirement of our WA course is to sign up for Free Code Camp. It’s a non-profit website where anyone can learn to code.

After signing up, I felt more than a little daunted by the first section - Responsive Web Design Certifiction (300 hours)!.

Baby steps. I took the first set of challenges and it wasn’t as difficult as I’d expected. It covered internal links, buttons, nesting tags and more. Each task is explained with examples and I quickly got into a rhythm. Basic HTML and HTML 5 - 28/28. On to the next one.

[wonderwebby]

Here’s a screenshot of one of my completed tasks from last week. It was gratifying to get that green tick from the HTML validator.

[wonderwebby]

I’m studying web authoring, a core module of the postgraduate diploma in Interactive Digital Media at Griffith College. Last week we delved into HTML. We were assigned four tasks which involved writing code using the platform Atom. We also learned how to validate the code using a browser extension. In our first class our lecturer told us that if we practiced we would learn to love coding. The lab flew by. I’m beginning to get what she meant.

[wonderwebby]

Welcome to my tumblr blog where I will share my web design learning journey. #webauthoring #html# #css #wordpress