Skip to main content

Implemening a Squarespace CSS Timeline


I showed Elliott the outcome of my attempts to incorporate a timeline that runs smoothly on Squarespace. I also did a lot of testing for tablet and phone mode (one of Squarespace’s features) and see how the platform responds to the code. Some of the codes did not perform as expected due to CSS segments that Squarespace does not support. However, I ended up choosing a timeline that had a modern look and a few options for customization – changing the icons and the background. Elliott was impressed with my progress as I also added more transition effects.

Original CSS Code

Customized CSS Code within Squarespace

After doing a bit more testing I discovered that the icons don't show in an appropriate manner on mobile devices or any devices with smaller resolutions. As a result I decided to remove the icons but bring more contrast to the timeline items which joined by the animation effects would really make the content stand out

Final Timeline Result Implemented





Comments

Popular posts from this blog

Choosing a career path

A career path I am passionate to pursue is the one of a web designer. It requires good understanding and following of current trends in web design technologies. Considering the interpersonal skills that employers demand, creativity, eye for detail and good communication skills are a necessity for becoming a competitive web designer. The main responsibility of this job from a technical aspect is to construct web pages for various businesses ranging from smaller companies that need to be advertised online to big corporations that seek professionals to manage all their online content via platforms like Wordpress and Joomla (“Web Designer Job Profile”, n.d). Unlike the position of a web developer who is managing the back-end of a website (programming languages, user interface, Search Engine optimization), a web designer is in charge of the visual presentation of the website (“Web Design Vs. Web Development: What’s the Difference?”, 2014) . This includes arranging the layout, colour...

Feedback for the mockup for Signature Printing

Mark and Elliott sat with me and gave me feedback on the design choices I made for the homepage of the website. Both sides were happy with including a fixed height parallax slideshow in the intro section. However, I had already tried putting a slideshow but unfortunately Squarespace’s functionality for the template only allowed a full screen background as a main section of the homepage.  We concluded that one background image with appropriate text will be enough to get across the main point of Signature Printing and decided to go for this approach. Also, Elliott suggested that the logo should be positioned on the left side and the navigation on the right rather than having both in the middle. This is a more traditional way of arranging the header but it looked better on this template. Regarding the services section, we discussed that we do not need icons to represent each service that Signature Printing provides. Mark emphasized on the fact that print consultancy is th...

Skills Gap & Job Analysis

Another step that I took which helped me visualise the steps I need to take in order to get a job in the field I have chosen was to look into current web design vacancies. Understanding what skills employers seek from candidates would help me analyse my understanding of how prepared I am at the moment to get a job in web design and what I need to do to increase the chances of getting employed. For the purpose I spent some time researching web design job specifications and came across a wide range of skills that are primarily required for the job. Here is a list of the vacancies which the content below is based on: Creative Web Designer - Atlantic Group (advertised by Indeed)  - optional screenshot Graphic Designer / Web Designer - Hays Specialist (advertised by Reed)  - optional screenshot Junior Web Designer - Become (Advertised by The Guardian Jobs)  - optional screenshot Web Designer - Dixons Carphone (advertised by TotalJobs)  - optional sc...