Vegard Skjefstad

www.vegard.net

Menu Close

Tag: Redesign (page 2 of 3)

Responsive

It’s been a few days now since WordCamp and everything has begun to sink in a little. Here are my main bullet points from the event:

  • WordPress is huge.
  • It’s no longer a pain in the ass to run on Windows.
  • Responsive web design is the way to go.
  • Plugin development is something I’d like to dive deeper into.
  • I discovered the distraction free writing feature.

In the short term, responsive web design was the presentation that triggered me the most. I’m familiar with response web design and use a lot of responsive sites. Even this site is somewhat responsive, it’ll remove some white space on a device with a smaller screen, for instance a tablet device. Now I want to make the site’s design even more responsive and better looking on mobile devices. WPtouch is a great plugin, but when it’s possible to get the site to look familiar even on small screen, there’s really no need to use it.

One option would be to make the current theme more responsive, but that will probably be a lot of work for someone like me. Also, from past attempts to do my own redesign from scratch, I know my limitations. So my best bet is what I always do: Find a nice looking, free theme and hack away!

I’ve been looking around a little, and at this point Renova seems like a good option. But I’d prefer to have two columns, not just one. That can probably be arranged, though. It might take a while, but I’m positive the next design will be responsive. For more responsive goodness, have a look at the Media Queries showcase.

Redesign: Version 1.0

After two evenings of playing around with CSS, HTML, PHP and other web related abbreviation, I hereby present to you the new design in its version 1.0 form. It’s a merged version of two themes by Theme Lab; Keep it Simple and Fresh Pick. Some things might change, though, like the contents of the sidebar and footer, font sizes, the header and stuff like that.

Am I pleased with the end result? Well, at least it’s something different than the old one. The navigation is better, the entry calendar is back (yay), and both the sidebar and the main section are wider than before. This gives me more room for images whenever I post that. The only bug I know of so far is the popup used by the NextGEN Gallery, but that’s not something I’ll bother with now. Also, I’ve only tested the design on the latest stable release of Opera, which is v10.10 at the time of writing.

If you see anything fishy going on or have any suggestions for improvements, please let me know.

Update: As Miguel points out in his comment, you won’t see any changes if you are visiting this site on a mobile phone. Mobile phones get pages modified by the excellent WPtouch plugin.

Redesign: Progress

Yeah, how’s it going with that redesign I’ve kept rambling on about lately? I’m happy to announce that there is in fact some progress, and here’s a little teaser for you.

Redesign teaser 2010-02-15

You’ll notice there is no trace of the color palettes I spent a week looking for and you won’t find the fonts I dug up from the darkest hole on the interweb. In fact, the only thing I planned to use that you’ll also see above are the rounded corners. Why is that? Well, several times I sat down to start to work from scratch on the new design and every single time I ended up ripping my hair out while I was banging my head against the keyboard, cursing CSS and all the things I couldn’t make it do.

It’s time to face the facts. I once knew how to create magic style sheets, but I never did manage to keep up with all the new things that have happened since the last time I designed something from scratch. In the end I sat down to look at free WordPress themes, and I eventually selected two themes from Theme Lab that I will merge and modify to my liking.

I wrote the first entry about the redesign all the way back in December last year, so you shouldn’t hold your breath waiting for anything to happen. Still, the progress has been quite good tonight, I’ve finished the general layout, the navigation, the header and implemented the one-liners.

I should probably also mention that the new server is working a lot better than the old one, both in terms of stability and performance. Good, although nerdy, times.

Redesign: Bits & Pieces

So you thought I’d forgotten all about my redesign project, did you? I have to admit I’ve spent more time working on the new server than the redesign lately, but sometimes you just have prioritize differently than you initially planned. Sounds familiar? Well, that’s probably because it happens to all of us all the time.

I’ve been surfing the internet for inspiration, selecting design elements I like that I’d try to implement in my own design. These are some of the bits and pieces I’ve found so far:

  • I’d like to have both a header and a footer that span the entire width of the screen, no matter how wide it is, but still keep the width of the actual content fixed. Also, the footer color should be high contrast compared to the page background color. I might even put more content in the footer than I have today. Trent Walton’s site is a good example of the kind of footer I’m talking about.
  • I’m semi-active on Twitter and will soon hit 300 tweets. Not that much, but a lot more than the average Twitter user. Personally, I think it’s a good way to just get something out there without having to write an entire blog entry. I’m seeing people visually identify the tweets on their site by using an icon or image resembling the Twitter bird. I’d like to do something similar, and it looks like there are no shortage of free images to choose from.
  • A feature I’d like to reintroduce in the design is the entry calendar. It was great for displaying what days I’d written something and it will also generate a bit more traffic by people who get lost while browsing around on the site. I don’t think I will set off writing my own calendar, there are most likely other WordPress users who have had the same need and made excellent plugins already.
  • I’ll try to cure my shyness by adding a picture of myself in the About section. You might have some privacy concerns, but I’m already sharing more than enough information to feed the stalkers on a weekly basis anyway. Besides, bonding with the user can result in he or she becoming a regular visitor.
  • I’d like to add some kind of indication in the navigation that shows the user where he or she is currently on the site. Robert Alan’s site is a good example of what I’m thinking about. An even nicer navigation can be found on Brian Hoff’s site. He also has a large footer section that pretty much sums up my footer thoughts.
  • Gradients are a popular effect to use on the site background. My PhotoShop/Gimp experience is so limited I don’t even known how to make a gradient background, but I’m sure there are some tutorials floating around out there.

All in all, these are a lot of design elements that are nice by themselves. The great challenge now will be to get everything to work together and to start the actual implementation. As you can tell, many of the design elements I’ve found have square corners and thus breaks away quite clearly from the rounded-edges-design I’ve been going on and on about. But, once again, plans are made to be changed.

Redesign: Layout and Eye Candy

Now that I have settled with colors and fonts, one last thing is left before I can start with the implementation of the design: How should the site look in terms of layout and various eye candy? Rounded corners come to mind. I got to have rounded corners, right?

The best place to find inspiration is on the internet, because there are a lot of very nice site designs out there. Another source of inspiration might even be my own previous designs. While looking for some old pictures today, I stumbled across this one:

An old site design

It’s taken at work in May 2007. Why I took the picture, I don’t know, I’m guessing it wasn’t long after another redesign of the site. Please don’t mind the mess on the desk, the incoherent ramblings on the post-it notes and the fact that I have Steam installed on my work computer. Have a look at the design. The first thing that hit me was “that’s a nice design, I like it. It’s clean and pleasant to look at”. However, since I made it myself, it’s probably not too surprising that I like it. One of the elements I really miss in the current design is the calendar widget on the sidebar. The one on the picture was one I made myself for my own, homegrown CMS, but I’m sure someone has made a similar, and most likely better, widget for WordPress.

Read more

Copyright © 2000-2019 www.vegard.net | Privacy Policy | Statement of Audience | Hosted on vbox4.vbox-host.com