Web Authoring 3067042

[rightsaidwebdev]

CSS Units for Font size

In class we've been learning about responsive websites. I've looked at a few examples online and my main concern is getting the text readable in the layout, so there is no exhaustive scrolling on mobile., I used to designing in the desktop view only and it is a bad habit to stay in.

https://search.google.com/test/mobile-friendly

Google have a way of testing if your website is mobile friendly I found the connection with Google search console very intuitive.

https://mycodelesswebsite.com/

Responsive design is the way to build websites for the future. you don't just want to build a website that that is good for this and next year, you want one for five years time. more and more people are using mobiles to access websites.

I am used to relating to the size of text on a page as pixels. Coming from a design background the language around Html and CSS unconscious of having a biased approach. The term ‘em’ is based on browser default font size. My looking for a relative comparison to pixels are points this chart was very useful. A good rule of thumb I have found, use em for overriding other font-sizes in a relative way, but only when necessary.

https://www.w3.org/Style/Examples/007/units.en.html#:~:text=The%20em%20is%20simply%20the,sizes%20will%20be%20in%20proportion.

I found a great guide on how to design a responsive site with em based sizing.

https://www.creativebloq.com/how-to/design-a-responsive-site-with-em-based-sizing

[rightsaidwebdev]

The Essential WordPress Plugins

I am currently looking at WordPress themes and am editing the layout. I tried to find an easier way of looking at the layout and researched some plugins. One of the best I found is Elementor. I find the layout and customization easy to move around and relocate and structure. However, I become accustomed to using more refined and robust processes. Once you are reliant on a plug-in you are limited to what you can create. It is best to have a background in HTML, I love plugins that can complement that. Only if there is an out of the box solution that suits the client. Otherwise, it you need the HTML and CSS to do the work for you. I think there are some useful plugins that people can rely on if they not looking for something that is too original are highly customizable.

https://elementor.com/features/editor/

WP Forms is a very resourceful plug-in. Almost every webpage needs a contact form to get the information from customer visitor or potential client. I find myself more inclined to look at the business opportunity because of my work and marketing background. I think that these plugins that are sales centric rather than user focused are the best way forward for many businesses to make the most of their online presence. This can often be overlooked in the web development process. I think the objective should be for a website to convert traffic to actionable and measurable contacts. these resources save valuable time, often contact forms are uniform. As well as that it is better improve to prospects of the organisation company or business. All in all, the website should be fit for purpose. WP forms has one of the highest ratings for a WordPress plugin and can be an easy fix for those wanting to stay in contact with their customer base and through web traffic to the website.

It has GDPR friendly and customizable interface and all the main things that you'd need . you can also integrate payment platforms coupons all great for smaller businesses even medium businesses wanting to find an online platform for these processes on their WordPress site.

https://wpforms.com/features/

Another great very resourceful plug is Yoast SEO Wordpress Plugin. For all blog posts I featured on my WordPress site I found this very resourceful as it gave a readability analysis and some feedback of where to improve. I would highly recommend this for snippets for websites as well. Optimised for webpage analysis and crawlers. Snippets are a small description on Internet search result page giving an idea for content is on that webpage. for me personally it is very hard to get all that information in a small concise paragraph. the readability analysis feature shows if I have enough internal links and key phrase distribution. I always try to give it a look before I publish. There is also hey Google preview of how your webpage looks on a search results page. I would highly recommend. The free version is good for beginners although if more adept add I see who I would encourage you to do your own competitor analysis and SEO to improve performance of your web pages.

https://yoast.com/wordpress/plugins/seo/

[rightsaidwebdev]

Down to The Wire...

I have started using wireframing this week.

The task I find easier than most as the site is very abstract. Trying to compliment functionality and site navigation, with a clear layout. UX Designers can use this to present this to all stakeholders in the project i.e. manager, marketing team and sales team. It can start from a simple sketch.

Basically, in a nutshell it is using basic shapes, looking at sites where everything is expected to be how the visitor views it.

Using diagrams, you can create a path from which the user can get from page to page, planning where your content goes onto various pages. It is a simplified version of a website. Paired back, showing the main ideas.  It can start from an initial sketch and rough layout. User wireframes have two types. High fidelity- wireframe has more detail-showing radio buttons, call to action, pre-defined text, and complete images instead of place holder images. Some great examples of high-fidelity vs low fidelity.

https://www.linkedin.com/pulse/wireframe-fidelity-low-high-apurvo-ghosh-hfi-cua-

https://www.justinmind.com/blog/low-fidelity-vs-high-fidelity-wireframing-is-paper-dead/

I find I am caught up and more preoccupied with this as it seems to be easier for me to layout in high fidelity so I know what I need before coding.

Software

Adobe-If you are a graphic designer and can use photo editing software- Photoshop is a good shout. However, if changes are needed it may not be the best to implement. Once exporting that is it and may not be best for collaborating.

If staying in the Adobe Creative Cloud suite- Adobe XD is the best in my opinion to use. The flow and user journey can be mapped around. Even better is the Responsive Resize scaling function. This can format the slides to be resized for mobile devices. I made mobile first- then fitting into desktop. It was quicker to use, as you can choose Repeat Grid function to copy pre-laid out assets.Example I created below:

Microsoft-You can use Visio if you have the Microsoft Office suite. This can be restrictive if you are looking for more assets such as arrows and UX layouts. I would recommend this if Office is the package your team already use, as you can open the software and share with others.

https://www.microsoft.com/en-ie/microsoft-365/visio/flowchart-software

[rightsaidwebdev]

Fade-In …to CSS

In class this week we have reviewed CSS and style sheets. I have explored the elements of minimalist design as well in Visual Communications class earlier in the week. This approach needed careful consideration for the message and visual hierarchy.  A ‘paired back’ approach is the core idea, ‘less is more’. The rule of thumb is to have clear consistent and uncluttered layout. Giving the composition room to breath so to say.  I thought about how this could be applied to website design without sacrificing any of the good design principles and functionality. In my exploration of looking at flat design layouts for websites, I found this great little CSS animation!

Fade-in Animation

Subtle transitions are a great effect where you have a very flat design. There is nothing wrong with a flat design website, it is very trendy now. There are other elements that can be added to the CSS to be less ‘busy’ or distracting. To improve the flow of a website and to make the appearance more eye-capturing, a Fade in animation for a header image is a great addition.

There are also other fade in animations that can be added to different elements of the CSS. Fade in Text can be used on any HTML element to create an engaging and focus on one piece of text

Some great links and resources on a site called CSS-Tricks to see the full range of capabilities. Its encouraging me to brave and bold with CSS.

https://css-tricks.com/css-animation-libraries/

No more limitations with fonts, text size and colour. There are a number of different plugins that can assist in showing you to write script for these animations. I recommend the one below for beginners, Animista: http://animista.net/

From looking into this I am weary of adding it for the sake of it. It can be meaningful if not overused and placed strategically. It would be great to use at the footer or at the end of a long blog post.

I might use this if I need to increase conversions to another new blog. In a widget of some sort.

Read more about transitions in CSS here:

https://blog.hubspot.com/website/css-fade-in

Be kind, follow and repost for more web dev blogs!

-AC

[rightsaidwebdev]

CSS Grid and Flexbox

I learned about Flexbox versus CSS grids. Flexbox is very resourceful; floats I still use in the coding for websites. The  CSS grid layer is a 2 dimensional grid based layout system will rows and columns. CSS flexbox on the other hand is a one-dimension layout it can be used for lion space with other items in the grid container.

It's very simple to use you just had your flex container property on to the parent HTML element. this for me is a graphic designer for layers is there any accessibility and I'd recommend anybody with design background to look into using flexbox.

https://www.quackit.com/css/flexbox/examples/

I've looked on Google images for good examples of CSS flexbox in action. I find times when I'm struggling with code building the CSS I look for other examples of inspiration in case the layout does not work out for me or the brief changes. I was instructed at the start of the course to have a bookmark folder of favourites and right now I'm rediscovering them as I look through my website the areas where the CSS flexbox can be improved.

I love the below example of the flex box cards. It is so simple yet versatile.

https://www.quackit.com/css/flexbox/examples/flexbox_cards.cfm

One thing we are reminded more and more is to build a responsive website with flexbox this is no different I found a great article on a quick responsive grid system with flexbox please feel free to cheque it out.

https://constructive.co/insight/a-quick-responsive-grid-system-with-flexbox/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[rightsaidwebdev]

Work Smarter in Visual Studio Code

I have been using Visual Studio code software to code my websites for HTML and CSS.

Something that I did not explore that I have another software that I regularly use is shortcuts. when under pressure will projects and looking to do repeated actions keyboard shortcuts are the best way to go. you can access this in Command Palette in Visual Studio code.  Simply go to VIEW>Command Palette on the toolbar of the app. The final save is an easy one but how you find some more advanced keyboard shortcuts are helpful when there is more steep learning curve in the coding. there is a lot to remember, and I think using what is there is not being lazy it is learning to work smarter and be more productive!

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

For example if you're working on a particular project on either HTML or JavaScript or JSON files, you can easily customize the shortcut keys by going to the preferences – FILE>Preferences>Settings.

I came across another preference while looking for another shortcut. You can customize the font size how is appears in the editor. for somebody like me who has a smaller screen this was a God send! so please be bold explore and try to get the software to work for you instead of you working for it!

TODO Highlight

I have only explored the CSS and some of the productivity extensions available. however one thing I am guilty of is for getting to do the things I have set out to do at the start of a project. this is a great extension for those who go back and forth with building and writing code.

‘TODO Highlight’ focuses and remind you that there are things undone in your code before you publish it. You can tag and colour cold the comments was easy to read tabs that show you there are annotations in your comments for you to go back and review.  Would highly recommend it from one busy coder to another!

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

[rightsaidwebdev]

Filezilla & Installing Wordpress Themes

This week we looked at creating a wordpress website and uploading it onto FileZilla (the college website server). The process was straight forward I encourage anyone looking to manage a WordPress to try it and find a web host, just give it a go!

I found activating the parent and child theme problematic. In all honesty I may have overlooked some details the lecturer was showing me, while I had another trying to replicate the steps on my site. I have learned an important and valuable lesson- save the code/script you are about to write on the code editor to a text document.! Inspect before making any changes to your CSS or HTML file on the code editor. This way your progress is saved before implementing them to the site using a code editor or uploading to the server host.

I found if changed the child theme on Wordpress and renamed the style.css sheet incorrectly, it was destructive to the website. I could not access or upload the child theme. This was because the theme template was not named correctly. They cannot be named the same as the parent theme e.g. rename it Parent theme name-child, add the word child to the end.

I found this website to be a lifesaver when troubleshooting the issue:

Theme Handbook chapter on Wordpress is the way to go for instructions on the topic. Other troubleshoot information may not be up to date and message boards maybe ill-informed/incorrect. Source reliable information from developer if possible:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Pro tip: Save your login details on the text editor for the Wordpress and the server login, is something I paid close attention to. Rename it the name of the website or something memorable, it is a nightmare to look for or get back once it is gone!

In terms of using hosting server we have Knuth server, the choice was made already for us. If you are interested in looking into themes for a wordpress site or any other website, read on this helpful guide I found online:

https://www.hostpapa.ie/blog/web-hosting/11-key-considerations-when-choosing-your-web-hosting/

[rightsaidwebdev]

User & Customer Journeys in E-Commerce Websites

I have started to investigate User Journeys on e-commerce websites. I was introduced a couple of years ago in college, but I never gave it the time it deserved to study it in detail. My studies are more focused on graphic design so only now have I had the chance to delve into the topic. I was reintroduced into during a Web Authoring class recently. User focused approach is great to give your site structure. I think it is important for businesses to communicate what they want and how they want the content to flow on their site. For B2B and B2C businesses you may have multiple users.

What different audiences or visitors will look on your website is integral part of the discovery phase for a website. If you are a business that lists all your product information or codes- who will be looking for that information? How quickly will they be able to find that information? Is there a desired Call to Action that you want them click or complete?

https://www.experienceux.co.uk/faqs/what-are-user-journeys/#:~:text=A%20user%20journey%20is%20a,quickly%20and%20easily%20as%20possible.

Deconstructing a website page by page can be very tedious. However, the connectivity of one page to another and can improve the conversion rates and in turn sales. For example, a customer is finding your website online and is in the market to buy one of your products. They want to know more information about your product, so they explore your website. The scroll down through your homepage and read a bit your company. They like your branding and may download an online brochure. This is very different from how a customer or reseller of your product will use your site.

https://boxesandarrows.com/how-to-improve-the-user-journey-on-your-website/

 Resellers or staff may need more technical information. You will most likely need a link to a document for Line Drawings, Product Codes or Images of the product. This needs to be noted in the user journey to find a balance to suit both users. Otherwise, the usability and navigation of your site will suffer, users and traffic will decrease if it is over-complicated for those unfamiliar with the site or product. On the other hand suppliers or repeat users of your site will want a quick solution- document for more product information-e.g. a line drawing with a product SKU on it.

All are important to that user for their reasons of using the site. Compromise can be met for both with creative wireframing and intuitive User Experience in the website design.

Have a quick look at some great UI and UX infographics to get up to speed on User Journeys and the process implemented to create great sites:

https://bashooka.com/inspiration/14-interesting-uiux-infographics/

Be kind, follow and repost for more web dev blogs!

-AC

[rightsaidwebdev]

Tutorial Republic

In order to get more proficient at HTML and CSS I decided to go to use Tutorial Republic.

https://www.tutorialrepublic.com/css-tutorial/css-position.php

I've been struggling with getting the wire frame the position like I wanted using CSS. I have found useful tutorials from Tutorial Republic. Online Tutorial videos can be very distracting when you're writing code, you’re hearing a voice and looking at another screen.  The main thing I've learned is to base your knowledge of coding from a trusted resource such as Code Camp. It gives a breakdown of the HTML knowledge in easy and accessible courses.

I am trying to still have that visual element to my learning you can see the finished product or web page. Tutorial Republic gives an item on his view of the CSS 6 box model and advanced tasks.

https://www.tutorialrepublic.com/faq.php#html-css

This was link on Moodle from the web authoring module, I honestly wish I had looked at the faq's page sooner! I have been struggling to make a contact form page what else knowing the full options first. this I feel is essential for a Webmaster to be able to contact and receive emails from visitors. this piece of coal delivers me to have a placeholder for the selection box on a form.

Also cool way is to send an email with a  very simple code straight forward and really resourceful the ‘Send Email to’ hyperlink is so simple yet effective, highly recommend using this.

https://www.tutorialrepublic.com/codelab.php?topic=html&file=mail-to

 I've taken a more productive and so more proactive approach to my coding. instead of waiting for my skin to learn more skills I'm actively looking for the code online that is there. I am keeping an online diary of tabs for this code analysing where the CSS needs to be applied. Code Lab is a great till which can show you in real time what can be made. There are a couple of bad habits I have picked up which I've tried to correct using Code Lab. The inline block elements I wanted to remove the space rather than change the background colour completely. I find this less deconstructive to my CSS as everything is there and they know the positioning everything I have more control.

Definitely check out tutorialrepublic.com great sort resource for web development especially HTML.

They have this handy resource- reference page goes through the most popular HTML tags, very good for a refresher for those new or looking to get back into HTML coding. The CSS coding and references really helped me get my wire frame together and emulate what I had on my original designs.

https://www.tutorialrepublic.com/references.php

[rightsaidwebdev]

Code Camp- Start Coding

I have started to use freeCodeCamp.org as a way of testing my knowledge about html coding. It is instrumental in my success the past week. It has hundreds of hours of course content, free and accessible from anywhere. For beginners like myself I find it useful, as best practice semantic html is taught at an easy manageable pace.

All the required steps in building a html web page must be complete before progressing to the next stage. It helps to suppress any bad habits when coding. For example, closing tags when writing a piece of code. It highlights areas where the mistakes are after you submit your work. If you are really stuck, you can even watch a video to show you exactly how to complete the task!

It helped me grasp the concepts of different elements of the webpage in html- the div, header, article, lists and unordered lists etc. The ideas can be abstract while interpreting the requirements from a customer, the real time example and construction takes place in one browser. This helps increase my recall with learning outcomes and the practical coding skills needed to develop web pages.

For building semantic html, it can overlook some areas. For example, including comments in the steps of html code written. It is automated correction, so in a real-world/practical setting, this is not always the best approach to take. Still an excellent resource, free and easy to use!

[rightsaidwebdev]

What the HTML?

We looked at the basics of writing semantic Html. I was a bit intimidated at first, the daunting prospect of writing code for a web page. I am a visual learner, so what really helped me was when I was shown how to inspect the element on a webpage. This can be done on any website by right clicking and selecting ‘Inspect’. It helped to demystify some the layout and structure of a website.

I found the basics of structuring information and how it appears interesting, organising a list with <li element, and ordered list with <ol> , and where to apply them. The elements of the page would be important concept to grasp early on. The inspect element websites gave me a great look at the html written for the website. By navigating to different sections of the code, different parts of the page will be highlighted, this correlates with the code you have highlighted. You can replicate the code for these websites you inspect to get the basic structure the same. More advanced appearances will need to be used in a process called CSS, I am told we will explore that next week.

I recommend inspecting a site you liken or use regularly. See the hierarchy, e.g. h1 used for main headings, h2 for subheadings and so on. The main difficulty I had was forgetting to close the tags repeating the <h1> at the end of that code. Simple to remember but easy to forget! Practice makes perfect. Practicing placing text on my webpage, I used the <p> element, I still have to get my head around some of the more advanced applications- blockquote etc.

I recommend downloading Mozilla Developer, more intuitive towards web developers needs, better layout and more advanced features for integrating in your coding workflow.

https://developer.mozilla.org/en-US/