Strings-in-A-Minor

[strings-in-a-minor]

Responsive Web Design

RWD, as the name suggests, is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).

In the early days of web design, pages were built to target a particular screen size. If the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. As more diverse screen sizes became available, the concept of responsive web design (RWD) appeared, allowing web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.

You do still see many web sites that have not embraced these principles and which scale very badly down (or up) as the user views from a different perspective than the designer. We now refer to these as BAD websites! As the world migrates to mobile viewports from desktop viewports we should be conscious as designers of the need to think mobile-first but be responsive to appeal to the widest possible viewing base. Responsive also means serving the right experience to the right viewer on the right device. it’s not enough just to “work”, it has to be a good experience or the value to the viewer is lost.

Mobile Web

As the mobile web started to become a reality with the very early smartphones (Nokia N95 anyone??), companies who wished to embrace mobile would generally create a special mobile version of their site, with a different URL (often something like m.example.com, or example.mobi). This meant that two separate versions of the site had to be developed and kept up-to-date.

In addition, these mobile sites often offered a very cut down experience. As mobile devices became more powerful and able to display full websites, this was frustrating to mobile users who found themselves trapped in the site's mobile version and unable to access information they knew was on the full-featured desktop version of the site.

Viewports

First up, you need to set the website’s viewport - give the viewer’s browser some instructions on how to control the page's dimensions and scaling.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Image Width

Responsive images are images that scale nicely to fit any browser size. Use the CSS width property to allow the image to scale up and down:

<img src="img_girl.jpg" style="width:100%;">

However, expressing it this way allows the image to scale up to more than 100% of its original size - we don’t want that so we constrain it using the CSS property “max-width” instead. Below is a neater way of achieving the same thing:

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

This will allow the image to scale down nicely, but never balloon above its original size when viewed on a larger viewport.

Can’t we just use different images?

Absolutely!  The HTML <picture> element allows you to define different images for different browser window sizes. In this way we mighth store slightly different versions of the same image in our website’s media library for use at different viewport configurations.

<picture>  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">  <source srcset="flowers.jpg">  <img src="img_smallflower.jpg" alt="Flowers"> </picture>

Can we manage text also?

Once again - absolutely! Text size on a website can be set with a "vw" unit, which means the "viewport width". This way the text size will follow the size of the browser window. Note: 1vw = 1% of the viewport width.

<h1 style="font-size:10vw">Hello World</h1>

Media Queries

Last but not least - we learned how to harness Media Queries within stylesheets to define completely different styles for different browser sizes media queries add breakpoints on websites as instructions to browser to know precisely when to shift to a new layout.

/* Use a media query to add a breakpoint at 800px: */ @media screen and (max-width: 800px) {  .left, .main, .right {    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */  } }

Summary

With these basic principles a responsive web page should look good on large desktop screens and on small mobile phones, and everything in between. Once the layout. structure, and visual framework is clear to the viewer the additional elements can be layered on using rich CSS to complement and maximise the appeal of the layout across devices.

[strings-in-a-minor]

Zig Zag me baby!

There is no disputing that images have become a key feature of modern web design. Specifically when organisations wish to describe a difficult topic or explain what they offer via storytelling it’s pretty common to see a descriptive piece of text alongside an image - thumbnail or full-size - followed by more text on the next row and perhaps another image, and so on......you get the idea I’m sure.

That layout is pretty conventional and is known as the aligned-layout, blocks repeating one after another in a uniform fashion. You can see this in the way countless numbers of Wordpress themes display blog entries for example - usually with images on one side of the page and text on another.

Alternative

One increasingly popular alternative to this stacked approach is called the Zigzag layout where images and text alternate orientation on each additional row - effectively dragging the user’s eye from left to right - breaking monotony and adding visual interest to lengthy passages of information. Not quite in the same way as long-scroll, but with similar intent - keep a user interested and engaged lest they ‘glaze over’ and you lose them.

Eye tracking research has suggested that conventionally designed layouts help viewers absorb information pretty efficiently. I mean, it make sense - follow a logical pattern and allow the brain to figure out the efficient path through the pattern to deliver maximum knowledge. Now, that works very well for media like books, particularly where the goal is to LEARN. If however the goal is to engage or entertain it seems that breaking up the horizon and catering for jumping (but jumping logically and consistently) promotes interest and can be use effectively to bring eyes (and brain attention) to specific “hot spots” on a visual design or web canvas where designers have maximum opportunity to insert a key message - visual or otherwise.

(Image credit:  https://colibriwp.com/blog/website-layout-design-ideas/).

[strings-in-a-minor]

Inherent Visual Balance

As I progress further into (touching the surface of) the world of design it’s becoming clearer to me the value of inherent balance in visual communications and website design.

It might be a little subjective, and for sure nuances flicker differently from cerebral cortex to cerebral cortex, but inherently humans perceive balance in pretty similar ways.

I am learning about vertical and horizontal balance in imagery and web design - if you were to split a site vertically along the middle of the page you would find top and bottom halves reflect equally - or should, in a balanced website layout.

In the pic above , depicting calm horizontal balance - the picture reflects along the horizontal axis - we can appreciate the mastery of Da Vinci as he creates weight and purpose in each measure about the central figure.

Symmetry

Both of these are forms of visual symmetry, Other forms exist, particularly in print and in logo design - for example Radial Balance - where figures are circled about a centre, or Reflection Symmetry - where a composition reflects equally across all axes - vertical, horizontal, and diagonal (and all in between) - think butterfly!

Asymmetry

Asymmetrical balance, as it suggests, is the lack of symmetry. Asymmetry can also represent an object that breaks a predefined pattern of symmetry, or an imbalance of design elements.

Asymmetrical balance involves objects of differing size, shape, tone, or placement. These objects are arranged so that, despite their differences, they equalize the weight of the page. This technique is often used to throw off a viewer’s eye, to attract them to a specific place on the canvas.

Rule of Thirds

In our photography segment we learned about the rule of thirds -  a visual arts ‘rule’ that states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines,  and that important compositional elements should be placed along these lines or their intersections. 

The underlying principle being that aligning a composition according to this rule creates more tension, energy and interest in the composition than simply centering the feature would.

(Image Credit: https://www.google.ie/url?sa=i&url=https%3A%2F%2Ffacts.net%2Fhistory%2Freligion%2Fthe-last-supper-facts%2F&psig=AOvVaw0IhTjIGDaQd333lETFXPgk&ust=1621526023559000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOi696eN1vACFQAAAAAdAAAAABAj)

[strings-in-a-minor]

Touched on this in my VC presentation around design trends in 2021 but let’s look a little more closely at Long Scroll Layouts, and specifically Infinite Scrolling Designs for websites.

101

In a nutshell - it’s a page load feature that serves content to a user as they progress downwards on a seemingly endless path of infinite scrolling. it’s the rationale and page presentation adopted by common websites such as Facebook and Twitter, and indeed Tumblr itself. You won’t find “click here for next page” or “more content”, the content fetch actions are automatic and in the background.

The primary objective here is to keep the browsing user engaged, promising a “content horizon” you never quite reach. Sounds like Nirvana for a content producer - keep the user on your feed indefinitely, keeping them engaged/entertained/interested while making it theoretically impossible to reach the end of the content. In practice of course there is always an end to the content on a regular website and people’s patience is not in fact infinite.

Website crawling bots such as Google do not scroll through pages, in fact the Google algorithm specifically looks for pages on a website so if you care about SEO you may need to rethink a single design strategy that involves endless scrolling. As we can see from social media portals - users clearly like infinite scrolling designs - as long as the content provider can manage layout transitions and is clever about their pre-fetch routines so that users don’t get a “bumpy” experience.

The increased use of mobile screens has definitely played a key role in the widespread acceptance of this technique. Attempting to navigate with the use of buttons on a small screen can be cumbersome, and even more so as screens get smaller and smaller.

Long or infinite scrolling gets around this since both approaches lend themselves nicely to touch gestures. The advantages of long scrolling, in combination with advances in CSS and JavaScript, have also created better options for web designers. Why is long scrolling here to stay, and why is “above the fold” no longer relevant in many websites?

Storytelling

Page-by-page navigation and storytelling do not always make a good match. This type of navigation tends to be herky-jerky at best, whereas long scrolling provides a much smoother storytelling platform. Long scrolling also gives the user greater control over pacing, while its continual immersion capabilities avoids the lags between pages that can be detrimental in keeping a user focused and fully engaged.

Long scrolling also allows creative special effects to be used more effectively. Parallax scrolling and scroll-activated animations are controlled, at least to some extent, by the user, giving the website an almost game-like feel; and definitely a friendlier one.

A memorable site design will keep users interested and keep them on your site scrolling longer - which can increase conversions, increase responses to calls to action, and keep people coming back for more. Animation and hover effects used in conjunction with long scroll techniques can be an extremely powerful user conversion strategy.

Balance

Website designers like us need to be careful though. Too much content can overwhelm a user, while too little can bring them to an abrupt end - particularly harmful if the website sets an expectation that the content will be lengthy and interesting - you can feel ‘cheated’ and bounce as a result. Where content is length and rich the technique of long/infinite scrolling can help break up content into digestible chunks without intrusive page-navigation interruptions.

Navigation

Horizontal navigation bars tend to fit nicely onto most page types, but there is a limit as to how many internal pages they can accommodate. Drop down menus are one solution, but they have their own their disadvantages as well.

Long scrolling can significantly reduce the need to accommodate multiple internal pages. Instead, the nav bars can be used to guide a user to the main portions of a site’s main page story.

Interactivity

Another design technique users appreciate is to strategically place interactive elements throughout your site’s pages. These interactivities serve to give website visitors a mental break, while at the same time maintaining their interest and keeping them focused and engaged.  This approach is analogous to giving people a chance to get out and stretch their legs during a long road trip. It’s refreshing!

Holy Grail?

Going on the above, you’d think so. However not all users appreciate long scrolling techniques, particularly focused and driven visitors who are looking for specific content related to a purchase decision or information request.  What we bear in mind as web designers is that the techniques used on our websites should be tailored to the primary audiences to which the site caters.  We are warned not to incorporate this capability just because it may be trendy, but to consider the objectives of our site, its limitations, and its overall structure – and then decide if long or infinite scrolling is for you - and by extension - for all of us.

#long scroll layout

#engaged users

#infinite content

[strings-in-a-minor]

One of those weeks!

The work level has really ticked upwards now and we’re all feeling the heat. Assignment after assignment due in concentrated periods of time, most with equal distribution of marks so it’s not even easy to prioritise. The ‘small elective’ on the course is driving most of the work and we’re tying ourselves up in knots!

RTFM

Web Authoring is my favourite module on the course but I’m not doing it justice at the moment. With heavyweight deliverables due in from desktop publishing and visual communications, allied to a behemoth of an essay for Digital Media & Society I haven’t been able to turn a page on WA for more than a week. And what a week to pick to have my first IT issues! Oh lordy, where do I start?

First I have to get my Knuth server password changed, then I couldn’t make my file attribute changes stick, and all in the same week I couldn’t even upload a basic WP theme to the Knuth server because there wasn’t enough space. The first two issues cost me 3 days and 5 days respectively, while the 3rd one actually got sorted inside the same day - thanking Slav for small mercies, maybe I just got them on a good day.

Pressure

Anyway, the point in focus now is we have a WA submission due in 7 days which on the face of it doesn’t look too bad - IF - and it’s a big IF, we were just doing WA and could set aside a slice of time each day to tackle it logically. At this point I am kept up at night sweating over desktop publishing and Digital Media & Society so much I am hammering away at this blog at 04:11 because - for the second week running - it literally went out of my mind.

I don’t know how I’m going to get through the next 4 weeks.

On the bright side - if all modules were as interesting as WA we would probably have a very happy crew.

R a n t | O v e r

[strings-in-a-minor]

Design meets engineering?

So I’m probably a bit late to this and no I haven’t just discovered the coolest new way of prototyping the web design process - but what I have done is follow a recommended link to a tool called Figma which I’m now just a little bit obsessed with.

Figma is a cloud-based design tool similar in nature and appearance to Sketch but with some fundamental differences that make it more suitable both for beginners and for teams collaboration.

Rather than downloading a piece of software to your operating system Figma runs in your browser - big advantage if you regularly flip-flop like I do between a Windows machine and a Macbook. it’s equally happy on Linux or on a notebook running Chrome OS as well (not tested by me).

Collaboration

Because Figma is browser-based you and I can collaborate as we would using a Google Document for example. Named cursors replace Google user labels to track who has modified what. Clicking on a team member’s avatar in a group brings you a close-up of what they’re viewing at that exact moment (scary! I’m sure organisations would have to agree common sense policies around how that might be practically managed).

Figma also allows permissions-based sharing of any file, page, or frame (their version of the Adobe artboard). When a share link is created to a frame on a page, the person clicking on that link will open a browser version of Figma, and a zoomed-in view of the frame is loaded. UX Designer Nicola Saidy says this time saver has ‘transformed her design workflow’.

From what I can see about Sketch you first need to upload work to a cloud location before this kind of dynamic feedback is possible - even then you’d have to argue how ‘dynamic’ that ends up being.

Communications

Figma harnesses Slack as its comms channel so when you create a Figma channel any design edits or notes are automatically “slacked” to the team at large - giving rise to a very responsive feedback channel.

Coding

Figma also shows code snippets on any selected frame or object in CSS, iOS, or Android formats for developers to use when reviewing a design file. The design components can be inspected by any developer in any file they can view. Figma allows you to apply pretty intuitive file versioning which takes away a pain point for collaborating teams on any aspect of the project - creative or technical.

I’m not switching from any particular platform but I did consider Sketch for wireframing design projects, particularly front end web design projects. The big move for me is from pencil and paper (has its place!) to digital and independently from machine to machine depending on where I am or what I have with me.

Can’t wait to press it into full service on a final assignment shortly.

#prototyping  #wireframe  #collaboration

[strings-in-a-minor]

Next up - it’s Wordpress!

Held up as a beacon of ease for managing websites for a few years now - exactly what is it and why is it so lauded?

Spot the difference

Well for starters, Wordpress (or WP for short) is a Content Management System (CMS) rather than being a straight-up website building tool. What’s a website builder you might ask - basically drag and drop tools that include everything in one package: hosting, domains and templates. You don’t have to touch code— everything just works.

A CMS is a little different - it (usually) doesn’t have a visual interface where you can drag and drop objects to form the visual layout of a website page. instead you are presented with a form editor that allows you to create pages. Page relationships are managed through a menu, which is pretty intuitive, but let me qualify that a little - intuitive to users with prior exposure to HTML and CSS. Occasionally you do have to code inside WP to get something to work correctly for you - for example a Plugin or a Theme.

Website building tools like Wix or Squarespace are very simple and intuitive tools - no prior experience required, if you’ve been around apps and are comfortable with basic OS and website navigation you can get onboard with these tools very quickly. Rarely is there a need to tweak any code so the basics of HTML and CSS are not normally required - indeed the obfuscation of the programming details form part of the value proposition of these tools.

Freedom and power - but at what cost?

Wordpress is much more flexible and powerful - mainly through the use of plugins mentioned above. For virtually any action/feature you may desire on your website you can find a plugin to give you that functionality - some cost and some are free, many are very affordable relative to the value they can add to your website. The only downside, if we even want to take that perspective, is that plugins need to be configured to work with your theme - again back to mild tweaking of HTML and/or CSS.

WP needs to be installed on a hosted server - usually a MySQL platform via FTP, which can be intimidating for newcomers. Website builders have a clear advantage here - the hosting aspects are usually wrapped up into the ‘package’ so that getting up and running (and staying that way) is pretty easy. However, let’s flip that for a sec - by managing your own website on a hosting platform you are free to move that website to any other host - with a website building package you are effectively ‘tied in’ - if you want to leave your host or you contract you have to recreate your website from scratch!

In the week ahead we will be installing and configuring our first WP platform and getting to grips with the mechanics of plugin and theme management.

Can’t wait to get started.

[strings-in-a-minor]

Up & Running

First webpages done and out the door! Laboured much longer over this than I expected - html straightforward enough but boy oh boy did the CSS take some concentration to constantly fine-tune! Loved learning about the basics of stylised presentation and found myself going back and forth to the Mozilla Developer Network again and again to look up renditions of both html elements and their  corresponding css embellishments. 

Inefficient beginnings

My only experience of html before was from the very labour-intensive “inline” style, where you declared everything inside the document you were working in. At the time that seemed like the way to go as you had direct hands-on control of the page right there and then. Seems a bit silly now when I look at global style definitions and the huge time saving to be had with accurate and clean css. Once you master classes and ids it’s amazing how intuitive css becomes. That said, I have looked ahead the the css in our future is far from straightforward, but at least it’s progressive and, dare I say it....logical?

MDN saved my life

For this exercise I implemented a fairly vanilla page structure from top to bottom - relying on a standard content flow - header leads to banner div, leading to main content structured via a single <figure> and a single <article> - the treatment of which was governed by some simple css. Lastly the <footer> rounds out the structural aspects on both pages. Nothing complex, but the devil’s in the details as they say and as I layered on css in an attempt to get evermore creative I started breaking stuff, leading to significant testing with abandon - however having access to the Live server extension in VS Code made this effort pretty easy.

With hindsight

One thing I wasn’t happy with when I submitted the assignment was my failure to crack the conundrum of setting an override on a:visited so that the link to index.html from the header of facts.html wouldn’t show up coloured. I thought I had the override declaration made correctly but despite tinkering it defaulted to the a:visited colour every time. In the end I ran out of patience but I’m sure it was something tiny and I just couldn’t see the forest for the trees!

Anyway - onwards an upwards as we tackle flex boxes and grids - it’s all starting to make a lot of sense.

[strings-in-a-minor]

Question: Are we living inside a video game or an artificial environment that has us completely fooled regarding the reality of everything?

Two reasons why I post this as my weekly image this week - well really one as you will soon learn.

Stressors

I’m a fairly relaxed person, I don’t get stressed that often, and then I do I can usually find the source and tackle it. I can’t count back far enough to remember the last time situational pressure leaked into my resting hours or interrupted my sleep. Yet over the last two weeks I have had recurring dream (nightmare?) that I have oodles of unfinished assignments for my college program. All beautifully rational, all making complete sense, all easy to recall and depict from classroom sessions - all complete fantasy.

It got so bad at one point that I woke up during the night, tip-toed downstairs and logged onto my new Mac to double-check precisely what was involved in the first batch of assignments for Web Authoring, Visual Communications, and Desktop Publishing. Calmness returned when I confirmed the scope of the work due to be exactly as written on the tin, and little to do with my emerging horror story.

Boundaries

So it begs the question - how much of our daily lives bleed into our dreamscapes, and how and why do they distort themselves to reflect innate deeply-harboured fears and anxieties? is there anything we can do to “turn down the dial”? Any techniques well-known to reduce the amplification, particularly as one settles for restorative sleep?

I’m wedded to my Kindle as many of you will know. it forms a key part of my ‘end of day’ routine. My opportunity to leave behind normality (that word again....gotta be careful) and dive into something completely different - put myself inside a submarine patrolling the coastline of Colombia; in the pro peleton at the Tour de France side by side with Greg Lemond, or debating across a gnarled inn table with a double-centurion wizard with suspect table manners.

Binary Decisions

It’s interesting that none of those stories and situations leak through the mental canvas into that twilight zone of early sleep. Why is that? is it because our brains automatically filter out the fantastic and somehow rationalise the fictional input from the non-fiction stream? if that’s the case how did our brain arrive at the decision point that Input A is ‘real’ and Input B is ‘not real’? Is the process as binary as that at the top level? if it is that binary, when do we arrive at the mental maturity required to execute in such a binary fashion? Can we change that decision point ourselves - through forms of reflection, deep learning, or shifting our mindsets to alternate forms of evaluation and acceptance? More worryingly, can that decision point be changed for us - through psychological manipulation, physical or emotional trauma, conditioning experiences, narcotics?

If this world is a collection of 1s and 0s sequenced harmoniously to keep a veil of manufactured reality over our thoughts and actions, do we want to leave it? How many of us would take the risky red pill over the reasonable blue? Aren’t these choices we face regularly - as red-hued as choosing to change a job, choosing to leave a partner, choosing to start a college course way out of our comfort zones, choosing to look at something differently and evaluating a contrarian perspective.

Or is it just as blue-tinged as tea vs coffee, Gogglebox vs Corrie, Daddy or chips?

[strings-in-a-minor]

Semantic HTML

This last couple of weeks has all been about semantic HTML and the ability within HTML5 to focus on more readable and more maintainable code - improving SEO reach, improving accessibility, and making your code more consistent.

As a previous student of HTML4 and XHTML 1.0 I remember battling long pages filled with DIVs and SPANs and learning to read blocks of structured yet confusing code where the slightest bracket out of place caused inline havoc!

Delighted to see the big steps forward taken by the W3C in defining new “semantic” rules for elements and tags in HTML5 which make both programmatic navigation and content navigation more intuitive.

Semantic HTML tags provide very precise information to web crawlers/bots like Google to clearly understand which content is crucial, which is a subsidiary, which is given for navigation and many other things. It is imperative to make Google understand what roles the different parts of your web page is playing, and by adding Semantic HTML tags to your pages, you can explain this clearly to the algorithms reading your code.

CSS

Another benefit of making your code more legible and abstracting out common element usage is that it makes it allows for much more powerful, yet easier to implement, CSS functionality - the lipstick and eyeliner of modern website design!

Semantic tags give you a lot of styling options for your content. Maybe now you prefer your content displayed in the default browser style, but a few days later, you may decide to add a grey background and then, you want to define monospaced font family for your samples. You can quickly implement all these things with Semantic HTML markup which can be successfully applied to CSS.

What’s new?

HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, its needs changed.

Where the internet was originally intended for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer.

Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the <table></table> to describe information using a table, programmers would use them to position other elements on a page.

As the use of visually designed layouts progressed, programmers started to use a generic “non-semantic” tag like <div>. They would often give these elements a class or id attribute to describe their purpose. For example, instead of <header> this was often written as <div class="header">.

As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.

Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act more or less like <div> elements. They group other elements together into page sections. However where a <div> tag could contain any type of information, it is easy to identify what sort of information would go in a semantic <header> region.

Thumbs-up for Semantic HTML

Easier to read -  as a web programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.

Greater accessibility -  Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.

Consistency -  When creating a header using non-semantic elements, different programmers might write this as <div class="header">, <div id="header">, <div class="head">, or simply <div>. There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.

Enjoying the transition from HTML4 to HTML5 and learning the new semantic representations of elements and tags. hasn’t been straightforward but it has been logical. I have not found expression yet where I wished they hadn’t changed it from HTML4 - in every case it seems to me to be a progression.

[strings-in-a-minor]

Apple’s new M1 chip - powering a new generation of high-spec consumer products and a bold move away from Intel after a 14-year relationship. 

I’m posting this image as a symbol of a new start in a different capacity - my first contact with Apple in any context as I embrace the world of graphic design, digital art, and creative media programming courtesy of my new relationship with the wonderful team at Griffith College Dublin. After a long stint on Windows I have invested in an M1-powered Mac Mini for this coursework. 

My Windows laptop won’t even open Photoshop or Illustrator! Never used a Mac before but I’m enjoying the learning process and hoping to transition over completely from Windows to Mac over the coming month. Still going back to Windows for the Web Authoring work until I brave the big switch. At least VS Code seems to be a fairly light application and is not bogging the machine down like the Adobe tools.

Week #4 now and the content, intensity, and difficulty has just jumped up a serious notch. Whatever background I once had in xhtml has now been well and truly surpassed as we jumped into more advanced structural areas - a whole raft of new elements, and opening the door on css to come. Found the lab this week very slow going and I had to go back over the instructions again and again to get it set in my head. 

The volume of info is quite high and a lot to process today. For the first time I am feeling nervous, but will plough back into the labs again tomorrow with fresh eyes. What’s keeping me going is the glimpses of what the final product could look like when CSS is introduced - from a wireframe to a basic page with structure, to a pretty page, to a responsive and useful page. Wish it was that simple! Enjoying it though,

More next week.........

[strings-in-a-minor]

This week we’re getting stuck into ordered and unordered lists, images, and links. So far so good - making sense and output on screen looks correct so far. In this example I am using a single-entry unordered list <ul> (Female Cats) to introduce a selection of popular names presented in an ordered list <ol>. Very basic indeed but another milestone on the structural journey - learning how items are sequenced on the page before style elements are applied. In the first example the html isn’t very pretty. I should have put the ordered list nested inside the unordered list. Have a look at the 3rd image to see the updated structure and the 4th shows the tweaked code to get the nicer display.

This week we also looked at how to represent and manipulate links - understanding the difference between relative and absolute links, calling a link from within a site, referencing an external link, opening in a new browser window using the ‘target’ attribute. Why would you ever want to send someone away from your site (i.e. not in a new window) when you spend big money on SEO to get a visitor to your site in the first place!

Finally we learned about <id> attributes of elements. Handy way to break up a long page (see Wikipedia for example). Not only does it help with on-page navigation, using id attributes allows you to link to specific sections of a page inside a standard <a href=   > construct. Let’s look at that --> here is a standard H2 sub heading block level element with a specific id attribute called “Mailing Address”

<h2 id="Mailing_address">Mailing address</h2>.    

By pinpointing a section within a long page with this attribute and then calling on that attribute using “#” in a link it allows us to jump directly to that section on that page from.....anywhere! 

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

Beautiful stuff. Keep it coming, we are making progress!

[strings-in-a-minor]

Opening post - the obligatory “Hello World”!

 Been a long time since I did any scripting - from small acorns mighty oaks may grow (one hopes).

Gentle reintroduction to the topic and a reminder how much I used to love HTML and elegant front end design.

Looking forward to moving through this module and going deep into this subject.