Web Components using PHP

In my web design and development course, we touched on using web components and live style guides. This is the practice of having a set of components and styles that can be reused across your website. The advantage is that when something gets updated it rolls out across the whole site at the same time. I’m going to be writing a 2,000-word essay on Web Components in January 2019.

I had been toying with the idea of redesigning my site for a while, due to the changes to Flickr accounts. I thought that creating the header and footer and linking to them using PHP across the whole of my website would be a good start. Whilst doing this I finally managed to include a link to my blog on my homepage by using SimplePie and PHP.

I also created my own Instagram widget using Instafeed.js rather than using the SnapWidget plugin like I had been doing. The advantage of using Instafeed is that it links to Instagram directly rather than to a third-party website. I had looked into this before, but couldn’t figure out how to make it work.

During updating the website I combined the media queries into one stylesheet for each page, rather than separate ones. I also included a main CSS file which styles headings, body text, buttons, and the header and footer on all pages, which makes updating things a lot easier. I’m annoyed I didn’t think of it sooner.

I’m trying to tailor the website more towards getting a job, rather than a story of my work, so I’ve renamed the gallery page to memories to tie in with my tagline.

In the future, I’m going to combine the portfolio and projects pages to be a more concise view of my best photos to show off to potential employers.

The About page has been renamed to My Story because I feel it is about the story of me being a photographer, rather than about me right now, and what services I offer.

The mobile version of the site has also had a major redesign using hamburger navigation which should be a bit easier to click on.

Images will now be served in both WebP (Google’s new file format for images) and JPEG to speed up load times on modern browsers.

The site is now served from a CDN. The only downside is that the site has to be served from the www. version.

Wix Vs WordPress

Now I’ve come across two instances of Wix in the past couple of months. Neither website was optimised for mobile. Wix has the option there, but it’s incredibly hard to use, you can change one thing and it will delete half the content on your site. The drag and drop editor is extremely slow, it’s like trying to load Photoshop in a browser, it’s just extremely bad practice and results in poorly optimized sites. However, the quality of their television adverts seem to drive people to their site and believe that they are creating something modern.

As an alternative, I’d suggest WordPress. It’s also hard to wrap your head around and customize, especially with the new Gutenberg update. Its ease of use is satisfactory if you’re an ordinary person, but can be somewhat frustrating if you’re a web designer. WordPress runs 30% of websites, according to this article by VentureBeat, and there are over 55,000 plugins available. There’s not much you can’t do with the platform. Oh, and it’s mobile-friendly too.

Logo design for a Web Developer

My first project at university was to write a report on how I designed a set of logos to brand myself as a web developer. We had to include research, feedback and final designs. I got a C1 on this report as I found it quite hard being the first one I’ve done at university. You can see the logo below:

rankingCoach

I attended a workshop in Hotel Mercure Southampton Centre Dolphin on rankingCoach by Alasdair Stone. It was a very interesting event and we learnt about how to optimize your website for search engines and how to use tools like Google My Business. I came away from the event with a lot of notes on how I wanted to improve my own website such as adding more links to my blog posts. rankingCoach is certainly something I’ll look to use as a web developer in the future. 

Material Design

“Make beautiful products, faster. Material is a design system – backed by open-source code – that helps teams build digital experiences”

Material.io

https://9to5google.com/2018/04/26/what-is-material-design-2-examples-launch-io/

Material is a design language created by Google in 2014 for the Android platform. It has unified Android apps under a single design format. This has helped to give the Android platform a unique identity recognizable everywhere, however, material design is starting to be used with other things.

“Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.” 

 Material.io

Many say that material design is the future, aiming to unify user experience across a host of platforms such as mobile and web.


https://thenextweb.com/dd/2015/11/10/what-are-the-real-merits-of-material-design/

Material design isn’t just about the way Google and Android do things. It’s changing design philosophy as a whole. One popular feature of material design is the “card” motifs that can store data in a way the user can easily understand. This data can often be manipulated by the user in ways such as swiping to mark the card as done.

Material design uses a number of practices to create a unified experience. It can often be described as minimalistic, using a lot of white space to create a clean user interface. Material design also relies heavily on the grid system, making sure everything is evenly spread out across the page whether it be mobile, tablet, or desktop.


https://www.materialui.co/colors

Material design is very specific about the way designers use colours. The design specifies for calmer colours. Often shades of the same colour are used together along with the card system to symbolize depth. The way designers use colours can have a large impact on the identity of a brand, as one colour will be associated with that brand. The Android platform lets designers insert their brand colour into many different places such as Google Chrome’s tabs, app headers, and on the app task view. For example, Facebook uses this on the Android platform to display their signature blue colour everywhere they can. This helps create the brand’s identity, as whenever anyone sees that colour, they will recognize Facebook.


CSS Grid


http://oddbird.net/2016/09/19/css-grid-layout/

“CSS Grid Layout is shaping up to be the layout tool we’ve always wanted on the web.”


Stacy Kvernmo (September 19, 2016)

http://ictacademy.com.ng/html-tables/

In the early days of the web, developers laid things out using tables. Tables are only designed for tabular data and developers were splitting GIFs up to lay them out and create visually impressive websites but in the wrong way, creating messy code and not very accessible websites. Tables were the only way to have control over the positioning of items on the web at the time.


https://medium.freecodecamp.org/flexbox-in-10-minutes-7295497804ed

CSS Grid is a way to lay things out on the web. Flexbox is an alternative to CSS Grid. Flexbox is a way to lay out items inside of a container even when their size is unknown. Flexbox has the ability to alter its items’ width, height, and order to best fill the screen width. Flexbox helps developers to create responsive websites i.e. websites that adapt to fit on any screen size.


https://caniuse.com/#feat=css-grid

Support in browsers for CSS Grid took a long time, however now, almost all browsers fully support the exciting new feature.


“The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.”

w3schools.com

You can place divs inside of the grid and rearrange them depending on the viewport size to create responsive sites. To define a grid you set the display property to grid:

.grid-container {
display: grid;
}

https://www.w3schools.com/css/css_grid.asp

Grids are split into rows and columns. You can assign a row and column to a div which tells the browser where to display it within the grid. You can also specify a gap between columns and rows. As well as assigning a div to a row/column you can make the div span multiple rows and columns. This makes CSS Grid very flexible and easy to use, unlike other methods of displaying divs.

joebailey.xyz

I’ve started creating a site to showcase my work as a web design professional. Once finished it will be live at joebailey.xyz I’m not really feeling it as much as my photography website, I don’t think the design flows that well, and it doesn’t really optimize for mobile all that well either. I think maybe in 6 months or so, once I’ve learnt more, I’ll design it again with a mobile-first approach. For now, I’m just concentrating on getting it finished and published as yet another example of my work.