Always a work in progress

Yesterday I was able to change out the theme to this site. I spent most of the day just fiddling and trying to get things to just work. I took a theme from the free repository and scrapped a lot the unused files.

Yeah.

There were quite a few that I didn’t really need. Many of which were WooCommerce ones. Maybe I’ll get back to that one day but for now, this site will be for just random code things I guess.

The thing I do need to get working is the SCSS compiling because there are a lot of classes that are not really being used. And then getting the JS minification as well. I went the super old school way and just copy-pasted code from one file to another. It was fun getting back to basics. The fun part was actually getting to use a decent header image that I took a long time ago.

Being able to use a photo of my own definitely makes it more fun too. I honestly don’t recall when I took the photo but I do know that I wanted to use it for something.

I’m sure there are more things I probably missed along the way but for now it works and the site is a bit faster too. I do want to improve on that little but that’s going to be for some other time.

ūü§£

Organizing all the media

Yeah, media. I love it. Most people live it and some are just indifferent about it. Blah! Is what I say to them. The reason I say it is because I love entertainment. Surprised? Don’t be. I am super easily amused. Like super easy. Like two-year-old easily.

A little history

The last couple of months I was trying to think of a way to organize my media library. No, not my computer. That would require way too much effort on my part and I just don’t have the attention span for it. I mean for my WordPress site. One thing that I felt could be improved. At least the experience.

My current library is the default one. Why? Because I never got a chance to get to it. I’ve wanted to change the layout for some time and use a grid system to display all the items. Do keep in mind I mostly have photos and very little audio and little-to-no video. For the time being. I will change that down the road, of course.

So here is the current look:

Media Library core

Recently I came across an amazing plugin that helped me do what I would like to do. At least for the time being. It’s called media grid. Simple solution that will hopefully make its way to core.¬†As I write this out I’m also testing the development version and tweaking, trying to figure out how to break things and where it may break. It’s fun. You should try it one day. As Ferris Bueller once said:

“It is so choice; if you have the means, I highly recommend picking one up.”

Yes. I do believe in the plugin that much. Enough to write about it. Running through the paces I do have to say I love how it works on a desktop environment. The ability to change from thumbnail to a larger image is nice and being able to batch delete is great. Next phase РI feel Рwill be being able to preview the other media. Do remember that ever since WordPress 3.6 video and audio support were added and there are several plugins that also add other formats to the mix.

For me, the ones that matter most are video, audio, and of course images. So with the plugin enabled it does look like:

media-grid¬†It is a little edited since the version I’m using wasn’t playing nice with the screen but that gives you an idea of what to expect. Pretty cool, right? So go, download it, try it out and if you’re feeling up to it: review it!

New look in the future

Let me start off by saying that it really has been some time since I even posted anything on either of my sites. Part of it is because I have been working weird, crazy hours at Starbucks and the other because I have a growing boy that loves to test my patience more than starving cat.

As many WordPressers may know there have been a few things that have been changing. One of which is the adoption of the first thought up MP6 plugin that unfortunately didn’t make it to core but will now be released with 3.8 in December.

The MP6 project was an attempt to redesign the administrator side and it did it really well, in my personal opinion. The use of genericons is what sets this apart from the past and previous versions of WordPress. I think it is a good thing and really good direction.

3-7-dash

Currently the dashboard ( admin side ) looks a little bleh for some. Granted you can choose one of two color schemes. Blue or gray. As you can tell from the image on the right the icons appear to be simple icons which many deem pixel art. And to a certain extent they are.

Yes, they do the job of communicating what each one is supposed to represent if there was no text beside it. Perfect for smaller screens. The downside is that with the next generation, high resolution screens being adopted by many those little pixels are becoming more and more visible and can look almost outdated.

With MP6, that is taken away and instead of a gif, a font is being used. You read it right, a font. It’s not really new but the implementation of it is fairly new. If you know fonts then you would argue that using genericons is much like using an ornamental font to create a different user experience. To a certain extent you would be correct but that is out of the scope of this post.

The launch of WordPress 3.8 will reveal a new look, new colors and will boast a few other little surprises that I cannot wait to see. The biggest of course is the all new admin side look:

3.8-dash

As you can tell the look is very different. Darker. More contrast. Best part I feel is the fact that it is much better in the readability department. The current look uses a bolder, slightly emphasised text to make it stand out from its background. The upcoming has a very dark background and the font is actually increased a little more, which is a good thing so you don’t strain your eyes when you try to read in smaller screens.

Those are great and all but what I’m really super, duper excited about is the new look for how the way themes will be presented. For some time that little section has plagued and probably haunted many people. Part of that reason I think is because you can quickly get lost or confused. Yes, I do mean confused.

theme-admin-3-7

As you can tell the themes are all displayed but it is a little hard to get an idea of how they present content with small previews. Clicking on the details unfortunately does not give you a better idea as seen in the following screenshot.

theme-preview-3-7

With 3.8 it will be a bigger view of the theme’s screenshot so it will give you a slightly better idea of how it looks on a default installation of WordPress.

theme-preview-3-8

As you can see the information about the theme is presented in an overlay that covers a good portion of the screen. I think for the better. It should. I mean it is what you want the focus to be on, right?

The best part is the new look of how all the themes are actually being displayed on the screen. As you can see in the following image the thumbnails got a bit bigger and some space was also introduced between them. Which I do like.

theme-admin-3-8

These are just a few of the things in store for the release of WordPress 3.8 that is due out mid-December. I, personally, cannot wait for this version since it does seem to have a lot of design, and theme, related touches added to it.

Working with mobile first mentality

This has been the biggest issue for some time now. How I want to execute it. All one stylesheet or separate ones and have the server load it depending on what it is given. Each one has its own drawbacks and perks to it. Reading about mobile design these last three days has slowly opened my eyes into what the next few years will be like when it comes to web design.

Years ago when the iPhone first made its début to the world the only thing I was thinking about was how everybody would interact and view things.

My first mobile experience was with a Sony Ericsson phone. Boy was that a mistake on my part. The way everything was laid out made it almost unbearable to really try to do anything. Navigation was decent but still took forever to get to the link I wanted to ‘click’ and go to. Using the buttons to¬†pseudo¬†scroll up, down and sideways was not easy. Make one mistake and often times I would have to start over. Sites took longer than I wanted to load but there really wasn’t an option to use a wifi connection with the phone.

Thinking back on those experiences with how mobile phones rendered pages it has given me some ideas on how I like seeing navigation and how to implement it. Navigation is the key when it comes to any site. Being able to know what to look for without having to look makes for a great web experience. What I mean by that is that the end-user should not have to look around the entire site’s page to find why they were looking for. A perfect example of this is just about any shopping site. The search form is one of the first things that has some emphasis to it without us really knowing.

A good study I would love to see is how many people visit a shop site and don’t use the search form. Mind you this is for fairly newcomers that I’m thinking of instead of repeat customers. Maybe one day.

Trying to view a site on a really small screen made me wonder how things would change in the future. Yeah, I like to sometimes think like that. With touch screens becoming more and more popular the next stage is of course is being able to cater to that little market. True, that demographic is small at the moment but in the next few years it will only see an increase.

Mobile first design was first coined a few years ago but has recently been what I feel is the newest standard for most sites. One of the things I have come to hate about it is scale.

Let me elaborate on what I mean. I am one of those people who likes to view a site with the browser expanded to take up the entire screen. I’m pretty sure I’m not the only one. One of the methods I have seen when it comes to creating a responsive site is creating break points. Usually what that means is that when a person resizes the browser the site adjusts to that new size. I don’t like it. Yeah it does have its advantages but it also has some drawbacks that I, personally, don’t like.

The biggest one really being the loss of certain elements. In Windows 7 you have the ability to set a program to take up half the screen and another to use the other if you want. I like doing this when I am comparing cameras, computer parts or just about anything I’m shopping for. I, like most people, love a really good deal so what better way than comparing two sites at the same time? Well, when the window gets fitted to the new size the responsive aspect takes over. Often times it doesn’t effect it much since some of the sites I browse often have a min-width of about 700 pixels and my monitor is wide enough to handle it. Sorry, geek speak.

One thing I found really interesting is that most new smartphones don’t listen to the

handheld

property when using a media query. A little strange since most mobile devices are handheld devices.

Options and decisions. One file or several. I still can’t decide. I may just have to use several ones while using server requests to help. It would be pointless to use AJAX since the page loads once on any device and people don’t resize their browser window and can’t do it on any mobile device unless they change the orientation but that has no adverse effect and shouldn’t. Shouldn’t be too hard.

Mobile web design: here I come!

Learning with practice

The progress of my theme is decent. I have been learning how to work with Git and SVN more and more. I did recently have a little conversation with @ipstenu on Twitter about learning version control. Yes, I am still learning how to harness the power of simple commits and getting the hang of how to use branches and tags.

Which brought me to my main point: tutorials.

People on the web have dozens and dozens of them. Some are better than others and some are just beyond outdated. I was looking for a tutorial on how version control works using SVN. You would think I would find at least five. No. I found links talking about how SVN works but no real tutorial.

@ipstenu asked me if I could find one noob friendly tutorial. Of course I couldn’t. True, there wasn’t one. Yet. I have been contemplating creating a simple tutorial on how to use TortoiseSVN in a local setup. Sounds simple, right? Yes and no. The writing is a simple thing but taking all those screenshots to go with that will be a task in itself.¬†I know I’m capable of it I just now have to find the time. Keeping in mind that even my current knowledge is not that great but it should suffice for the time being.

One of the first things that I learned was ‘commit’ so of course that will be the first topic. Next in line is ‘branches’ and ‘tags. and how they work. That is one thing I still haven’t yet mastered through a GUI. Just takes me back to when I was in Junior High and learning about computers but that is another story.

Yes, tutorials have helped me understand certain things but often times I don’t really learn unless I put forth the effort. Learning by practice is a great method and a great way for me and others to learn as well. I just hope that I can get my tutorial written out so that people understand. Although this has given me an idea for a future post: translation.

Keeping WordPress on my mind

I keep posting on this about how code is becoming a part of my life and yet I have yet to actually post any of it; It is really depressing to see and read. So, here goes: With the project I have been working on (my site) I have been working with how WordPress handles its files and queries. It has been good seeing and interacting with it all. A good, and quick, example of how it works is here.

With that in mind I have thought about how I want certain things to look on the front page of the site. So, this would entail that WordPress will look for one of many pages. The first one it will look for is

home.php

and then it will look for

index.php

if it doesn’t find the first file. That is, of course, if I am using WordPress as a blogging tool otherwise it will look for the

front-page.php

if I have it set as a CMS (Content Management System ).

The files I have created so far are the basic ones that WordPress needs to be read/seen in the Appearance panel. They are comprised of

style.css

and

index.php

which are the two minimum required files. The front/home page so far will of course have a featured/sticky support but will be able to use the excerpt if the post has it filled out otherwise it will just post the entire content. That little snippet looks like:

<div class="entry-content"></div>
<pre>
    <!--?php if( has_excerpt() ) : the_excerpt(); else : the_content(); theme_linked_pages(); <span class="hiddenSpellError" pre=""-->endif;?>
</div><!-- .entry-content -->

The next stage will be creating the look of how an individual post will look like. That file is called:

single.php

. It will look fairly close to the¬†homepage¬†layout but of course there are going to be subtle differences. I’m debating if I really want a sidebar on the entire site but I know it will be useful for simple navigation.

Now, WordPress uses functions as template tags. Case in point:

the_content()

. It displays the content of the post when used inside of a WordPress loop. I have created a simple

functions.php

file that will house all my custom functions for the theme. In that file I inserted:

function theme_setup () {
        // Add post format support
        add_theme_support( 'post-formats', array('aside', 'image', 'link', 'quote', 'status') );
        // Add theme support for custom background
        add_theme_support( 'custom-background', array('default-color' => 'fff' ) );
        // Add theme support for Post Thumbnails
        add_theme_support ( 'post-thumbnails' );
        // Register the menu
        register_nav_menu ( 'primary', 'Main Menu');
    };

What that little snippet does is create support for post formats, custom background support, thumbnail support and creates a menu holder for my theme. I’ll explain those things down the road ‚Äď hopefully.

Now, up until recently I have only really posted photos of what my site will look like. This has been a great experience on how my site will look like when I actually start posting more and more code since I am using a plugin to create the syntax highlighting. Taking a turn into the code side of web development will be a great thing for me. Now to explore more about theme development and WordPress.

Wireframes and mockups

What are wireframes?

Simple. Wireframes are a bunch of boxes, circles and lines that when combined together create a skeleton of what will eventually be a finished product. Call it the chicken wire to a sculptor, the rough sketch to painter or even the Lego instructions of the X-Wing.

But why?

Why not? As a visual artist, and person, I have to communicate with visual aids. One way is using said circles, squares, lines and even some text to help get my point or vision across to others. Web design is much the same way. A designer must create a visually stunning website while at the same time making it an easy to navigate through the site.

How is it achieved?

By creating wireframes and mock-ups. They are a great tool for designers as well as developers.  Recently, I have been working on creating a set of elements that are commonly used when it comes to creating web site wireframes and mockups in Illustrator and it has been both a little hard but fun as well. I have loved every minute of it since it has given me ideas about how I want to visually communicate to a future client even better. Part of it derived from reading the WordPress developer site and seeing how they got their ideas across and so I figured I would not only follow suit but also find a way to contribute to the community.

I am almost done with the Illustrator file with some basic elements but I keep getting this weird feeling like I am forgetting to include something. Something that is a key element when it comes to wireframes but I keep looking and nothing has yet to come to mind.

What next?

The next stage will be creating a user interface file with both Illustrator and Photoshop to share but that won’t be for some time. Either that or create some simple buttons, icons or random web graphics for people to have for free.