WordPress Portfolio Theme

By breaking up the skeleton of underscores I was able to craft this portfolio theme for WordPress

Screenshot of ynefs portfolio

Main features

Navigation menu is generated from categories and displays a category view

Cool sliding effect on the menu using a combination of transition and padding

As you scroll down the site title and description disappear along with the navigation menu

They reappear when you start scrolling up

Custom header gets added to Artwork and Music categories by manipulating directly CSS style with jQuery

Footer has three distinct columns

Picture links in gallery and footer icons have a tint overlay effect on hover

 

Share!

Goodbye GreyRound, welcome Messages From Outer Space

GreyRound was the first WordPress theme that I built from scratch. It took me a while, but I was finally able to publish it on the official WordPress theme directory which meant a lot to me considering it was my first theme. At the time of writing this post, the theme has already been downloaded more than 3,000 times. I’m not sure if it’s good or not, because I haven’t compared it to other themes, but for me the number feels pretty big. A quick Google search also shows that people are indeed using GreyRound for their websites and it just feels great!

I’m the type who can’t sit still for very long so only about a month later I already felt the urge of building another theme for my site. I wanted it to have Facebook like loading of content (infinite scroll with JetPack) and I knew it had to have something to do with outer space… and when you combine infinite scroll with a space theme, the title just kind of makes sense ;)

Messages From Outer Space took a little over one week to build because I used the underscores skeleton theme as a base (it’s an epic base and I really recommend it!). This way I only had to change a few things in the theme structure and had more time to apply different styles to it. The layout and the main menu are built to make way for a bigger website with more content. As ynef.net is slowly growing bigger and getting more categories, the menu had to be designed differently from GreyRound’s circles.

I also made room for sponsor advertisements between posts (plsdon’t hate) and applied responsive styling so it will look fine on almost every mobile device. If you are on a mobile device and have JavaScript enabled you can use the websites logo to toggle the main menu.

As of right now Messages From Outer Space theme is not available to the public because I felt like my personal website has to be slightly different from the rest that’s out there, but I might change my mind about that in the future.

Share!

Fluid and responsive website layouts become vital for your survival on the internet with the latest Google search update

What is a fluid layout?

A fluid layout is a website layout where all the containers remain proportional relative to the screen width. In other words if you were to make the screen smaller, the fluid layout will adjust itself automatically to fit your screen without breaking the containers or moving them under each other etc.

A fluid layout is easily achieved most of the time by replacing all fixed widths with percentages.

Replace this:

.container {width: 1024px;}

With this:

.container {width: 100%;}

What is a responsive layout?

Fluid responsive layout pictureA responsive layout uses media queries and is a little bit more technical, but the result will be even better than simply having a fluid layout. A responsive layout can change the look of your website completely when viewed on smaller screens and this is its main advantage over a fluid layout because if your screen is very tiny and you are using relative container widths then those containers could become too small and your website becomes hard to navigate (especially on touch screens).

 

The example below will change the containers padding and font-size automatically when the screen size goes below 1024 px.

 

.container {
width: 100%;
margin: 0 auto;
padding: 5% 2% 5% 2%;
font-size: 2em;
}
@media all and (max-width: 1024px) {
.container {
padding: 2% 0 2% 0;
font-size: 1em;
}
}

Google’s “mobilegeddon” will change everything

It’s called the mobilegeddon for a reason. Google is going to update its search in a way that mobile friendly (fluid and responsive websites) will get a significant advantage over regular fixed websites. In other words, if you’re not mobile, you no longer exist on the internet. (Google IS the internet in case you didn’t know that by now!)

Google is not doing this to punish you. The statistics show that more and more people are switching over to mobile devices to find relevant information online so it’s really just a step towards a better user experience in the long run. Besides converting your old fixed website into a modern fluid layout is no rocket science, but can still be challenging enough so that a better solution in some extreme cases would be a complete design overhaul.

Whether you need a complete design overhaul or a simple conversion to a fluid/responsive layout, I can help you! Just message me on Facebook or Skype (frank.petser) and we’ll talk more about it.

Share!