not so well written

Found these online (29.11.2010)

So, this post came up a bit late mostly because I spent all week watching the crew from LoadingReadyRun playing Desert Bus and raise money for Child’s Play. It was nothing short from amazing, but that meant that I couldn’t really focus on other things. But, this is what I found entertaining and worth reading this week:

Found these online (21.11.2010)

Hey! So this is the first post in a series that I wanted to start from back in the summer, but due to my laziness it got pushed back to now. So, every week I will post a link roundup of the most important articles I came across this week. Now, check these articles out and if you like the selection, check back next week and see what interesting things I found that week.

That’s it for now!

Look at all the colours

As you can see Not So Well Written changed it’s layout from the bleaky all grey to this new thing that has colours in it too. I changed things because I really wanted to play with Tumblr’s theming engine and also I wanted something easier to read, skim and use.

But why go down this path? Why change everything and present so wildly different approaches for each type of post? OK, maybe I’m overreacting with these rhetorical questions here, but they are important. Well, I really think it’s important to visually separate one type of posts from the other and this crazy mash-up is the basis of Tumblr, where snippets of everything appear alongside photos and long, serious posts. So, this is my interpretation of that. Furthermore, Not So Well Written is my double rainbow all the way, so I can use all sorts of things while making it (like HTML5 & CSS3 and hot pink for the chat posts).

*Final draft version of the redesign

Let me just walk you through this for a bit. Firstly, the colours… All post types are now colour coded, so you just scroll around and stop at whatever post type you want (although I really hope you read all the posts). Also when you reach the bottom of the page you have a nice little place where you can choose to see only the post types that you care about. And, just so you visually understand that you started looking at a different post type, I played with the design of each of the seven types. Oh, and because I expect the pages to be quite lengthy I put a scroll-to-top button in the page, like I saw on lots of other cool sites :P .

The keyboard. I really like it. That’s why I added some sweet keyboard shortcuts to NSWW. Basically, these shortcuts are: J & K for previous and next post, and left & right arrows for previous and next page. But the helpful little tooltip in the upper left corner tells you all of that.

The IE conundrum

I don’t know how many of you will be surprise by the fact that Internet Explorer was the biggest hassle while working on this project. But, it was. Actually, it kind of shares guilt with Tumblr, and here is why. To make the site look good in Internet Explorer 6 & 7, in the first step of the design process I used CSS3 Pie, which is awesome by the way. And, I don’t know how, but CSS3 Pie made IE 6 understand how to render HTML5 elements, so, in lay man terms, the website looked consistent throughout all the browsers. But, it all went south when I learnt that Internet Explorer specific behaviour files (like the CSS3 Pie) cannot be linked from another domain (and on Tumblr that pretty much translates to “You’re screwed”). Like any other designer that hit a wall, I quickly jumped on forums to see if any hacks or work-arounds exist for this thing, but, defeated I just stopped and started looking for alternatives. So, a little checking later I found Andy Clarke’s Universal Internet Explorer 6 stylesheet. So, if you are on Internet Explorer 6 or 7, I’m sorry, but you are seeing a minimal styled blog, because fixing all the small bugs would have taken way more time then what I’m willing to spend on this particular project. Plus, you guys aren’t quite that many. So, please, upgrade to a better browser if you can, IE6 people.

P.S: Hello Twitterverse!

Until recently I tried to stay away from Twitter, but now a lot of things happen around there and I’m missing out. So, really late in the game I jumped on the bandwagon and you can read my 140 character tidbits @VictorNSWD. In case you are wondering what the NSWD stands for, it’s “Not So Well Designed”, my freelance web design persona (a.k.a “The Money Maker”), if you will.

Why So Mobile?

Although Not So Well Exposed is only visited by a handful of mobile users, I really feel that a mobile version of the website is a must have in this day and age. Why bother? Because some say that more users will browse the Web from a mobile device than from a fixed terminal in the following years. So, switching to Wordpress made it pretty easy to set up a mobile version, in theory at least.

At first I wanted to go with Mobify, I heard a lot of good things about it so I wanted to check it out. The thing was that I didn’t really want to spend money on this feature yet, and the free version of Mobify had some limitations that interfered with my agenda. Seeing that I had to do much of the same editing by hand as if I used a specially designed theme for Wordpress (OK, not quite like that, but you still have to get your hands dirty, it’s not a “magic solution”). So, I started looking around for Wordpress plugins that could help me out. And let me tell you, there are a lot of them.

I played around with a few, but had to find one that fit these requirements:

  • resize images for mobile
  • swich between mobile and full site, in case the mobile redirect screwed up
  • pretty much standard to code
  • plays nice with W3 Total Cache which I use for caching

I’ll spare you the boring details of my search and tests to get to the actual good stuff. In the end I jumped on the Wordpress Mobile Pack bandwagon because it pretty much does everything I have on that list. Even with that it still has some kinks that have to be worked out, so in a weekend end I’ll try to sort them out, but for now it’s OK. On Not So Well Exposed it’s weirdly implemented (by my standards) because it’s just an edit of the main theme, so I’ll probably have to hang out around the Wordpress Forums to see how I could get it working as I would like it. But, I’ll leave that for when I have the time.

I had a mobile version on Pixelpost too, but it was bad. It didn’t adhere to the standards of publishing for mobile. And the biggest issue was that it loaded the full size image and then just make it fit the 320px screen of the user. But, it’s not cool to load an extra 200kb of data when the user doesn’t need it. So, that is why I wanted a mobile plug-in that resizes images, so Not So Well Exposed Mobile loads faster and is better for the users. Also, i stripped the landing page so i only shows the titles of the posts and not directly the post as was the case for the mobile Pixelpost version. All in all these changes sped up the site, and for the mobile Web, that’s really good news.

And this concludes the series on the redesign and migration of Not So Well Exposed.

Who’s afraid of the scroll-bar?

As I mentioned earlier the subtle changes in the design of Not So Well Exposed were made to boost efficiency. Basically, I wanted to cut back in all the clicking and dragging and give users everything upfront. Less clicks = better for the users. Comments are right under the photos, not hidden like they used to be, social sharing is next to the permalink and the Series disappeared, now all images are under one roof. The thing about the Series is helpful. Until now visitors had to go to a new portion of the website, but now, all the images are right there, they just have to sit back and enjoy.

But the most important change is that now the images are at their full web resolution, not like before when the site was relying on a Lightbox environment to show the large image. My main concern about having the content fit in a page came from a talk with a friend who didn’t like scrolling on the vertical images, which made me think about having everything fit above the fold. But, after checking my analytics, I noticed that most my visitors use higher resolutions than 1280 by 1024. So, yeah, there is a bit of scrolling involved for the vertical images, but, I really don’t think it has any bad effects on the user. With the changes in the Series section especially, I want users to explore the area beneath the fold. Also, having the freedom of using things beneath the fold I could do that large footer that exists now on all pages, but I’ll come back to that in a second. Also, users with lower resolutions do not despair! As long as you are using a modern browser (as in “not using Internet Explorer 8 or lower”) you will see a version that fits your screen properly due to CSS Media Query. It appears as responsive websites are the new black in web design, so I jumped in the band wagon because it truly is a great feature (at least for non-handheld devices).

Now, what was I saying about the footer… Oh, yeah, it’s great. Besides the regular things, like contact info and local links I added, what I like to call, “the social part”, or the “Elsewhere”. Here I have links to social sites I use and are “sanitized” for a more businessy use. And my favourite part of the footer is the colophon where I can pretty much credit the developers that made the awesome tools I used, not to mention brag about my skills. It’s a win-win situation.

While trying to keep things simple I ditched all that massive reliance on JavaScript and limited it’s use only to those things necessary (like keyboard navigation). I also improved the semantics on Not So Well Exposed. But the big thing is that new HTML5 and CSS3 experimental couple everyone is talking about. Do websites have to look the same in every browser? Off course not. So, if you are using a modern browser (there it goes again) you may experience some awesome subtle effects. But browsers treat differently these new things, so you may be experiencing only a couple of effects if you are using Firefox or Opera compared to WebKit browsers (Chrome and Safari). On my machine, Not So Well Exposed looks best on Safari (which I only use for testing, Chrome’s my default) because on Chrome the dropshadows break the kerning of the links.

That’s about it for this part, but I still have one more topic to discuss about Not So Well Exposed, and that is mobile support. The article should come out in the following days.

CMS Migration

Well, a couple of weeks ago I switched the platform that ran Not So Well Exposed from Pixelpost to Wordpress. At first I started playing with Wordpress just to get the hang of it’s theme system, but ended up cleaning the UI of the site and switching all together. One of the main reasons for the switch was the announcement that development for Pixelpost 2 was halted indefinitely and Wordpress has some core features that caught my attention.

Overall Wordpress is a bit bloated only for photoblogging, especially if you add tons of plug-ins. I haven’t really tested the two content management systems loading times, but I tried to get the most out of Wordpress so it should run a bit faster in some areas. Seeing it was my first Wordpress project I say it went pretty smoothly, but I did have to hack the CMS a bit more than I wanted to.

One thing at which Wordpress is better than Pixelpost is the “evil” SEO. I’m not really into creating the perfect content for search engines, but, I don’t want them to ignore me either, so having “pretty links” and adding some keywords to my content is a plus. And, besides, it’s sort of an out-of-the-box feature, unlike in Pixelpost.

Accessibility is another important feature of the current release, and this isn’t really a Wordpress thing, rather me paying a bit more attention to the code and to the way people interact with the website. The talk about accessibility comes up quite often in photography forums when discussing a portfolio or a photoblog, and many users think it’s irrelevant: “Why create an accessible website? It’s not like blind people come to look at my pictures!” No, maybe they don’t, but accessibility does not cater only the visually impaired. A keyboard based navigation system is imperative for the users who have impaired mobility. The left and right keys can be used to move from page to page on Not So Well Exposed.

But, the migration from Pixelpost to Wordpress wasn’t all Comic Sans and double rainbows. The hardest, most tedious thing to do was moving the actual content into Wordpress. Luckily it was only around 300 images, unfortunately, it was only around 300 images. Moving all the images I posted in 2 years of activity took a lot of time, because I had to rewrite captions for some, copy the keywords and stuff, but I managed.

In the land where content is king, content has to be treated properly. Links that reference the content, pages easy to use by most of the users and other behind the scene work won’t help a bit if your content is not the most important part of the experience. But I’ll be talking about the subtle changes in the layout that boosted efficiency in the next article that will be out in the following days can be read here.

Meet Not So Well Designed

A while ago I started rethinking my relationship with design and where down the line we got separated… I couldn’t really remember so I let my not-so-new passion photography wait on the side while I give design another chance. And, things changed. I found a lot more fun in design than in photography so I started work on a super secret, secret project: Not So Well Designed. My new project was in work for some time now, and, even though it was ready to meet all of you a month ago, I wanted to get school out of the way before I gave it wings and let it travel through the Internet.

Not So Well Designed Main Page

So, what is Not So Well Designed? I see it as a fun resume. It’s a colourful place for those who are looking for a nice, fun and well made website. Even if I’m all fun and games, I take deadlines and the quality of my services really seriously. I’m one of those “standards” kind of guys, so I try to get everything done clean and future-proof.

But, enough with the shameless plug, if you’re interested in more about me and this project just visit Not So Well Designed here. Now, let’s get a more detailed view of all of this. First off Not So Well Designed runs properly on mobile devices too, so you can visit it from pretty much any device. You can see some screenshots of the mobile designed rendered using the Opera Mobile Demo.

Mobile version of the website

The website is available in both English and Romanian, I don’t think I’ll add more localized version, but you can never know. I really tried to cover as much ground as I could to make the website behave on a variety of situations and I pretty much succeeded. You can see in one of the screenshots how the website looks if the user doesn’t have JavaScript enabled.

The page changes it's design if the user has JavaScript turned off

For now I only have the breakdown of my photo blog, Not So Well Exposed, but, as I finish certain projects I’ll add them and talk a little about the project. I’m really just starting off again, but I really hope that I’ll have new work to display soon.

Not So Well Designed is a closed environment, everything pops up in a “lightbox” system, which means that everything runs smoothly without worrying much for loading speed, because the important pieces are already loaded.

Every page appears in a "lightbox", making the whole experience a lot smoother

Colophon

Not So Well Designed is a home brew page built using valid, good old HTML and CSS, made a lot more fun using jQuery. The “lightbox” environment is provided by FancyBox, made prettier with the use of “not safe for web” fonts rendered via cufon. The typeface used for the logo is Hamburger Heaven, and for the other titles I used Qlassik Bold. For the Contact form I used SimpleModal, a handy jQuery plugin.

Faceți cunoștință cu Not So Well Designed

Acum ceva timp am început să îmi regândesc relația cu design-ul, pentru a vedea când și de ce anume ne-am separat. Nu prea mi-am adus aminte, așa că am făcut o pauză cu fotografia ca să îi mai dau design-ului o șansă. Și, lucrurile s-au schimbat. Am descoperit un design mult mai distractiv decât cel pe care l-am lăsat, așa că am început lucrul la un proiect ultra-secret: Not So Well Designed. De ceva vreme tot lucrez la el, și, deși a fost gata de vreo lună, am așteptat să termin cu facultatea până să îi dau drumul să-și găsească un loc pe Internet.

Read More

Let’s see what happens

Pentru varianta în română click aici: Despre viitor, din nou.

Ok, so, I guess it’s time to stop the teasing and, well, step into “the future”. From tomorrow things will change. Yeah, I take myself too seriously. But, the thing is that I came up with a pretty neat plan on posting frequency and subjects, so, I’m good to go. Firts off I’ll be posting new things on Not So Well Written 5 days a week, Monday to Friday. I settled for this approach because I realized that if I want to stick to something, I have to do it often… Even though new content will be online almost daily, that doesn’t mean I’ll write long-winded posts all the time. It’s not my thing… But, for more on what will these daily post be, just wait a sec. 

Read More

Despre viitor, din nou.

For the English version click here: Let’s see what happens

Cred că a venit timpul să reîncep să postez chestii pe aici. Cum am zis nu demult lucrurile se vor schimba pe aici și veți putea vedea schimbările începând de luni. În sfârșit am ajuns la o idee legată de frecvența cu care voi posta, plus, am și niște idei de subiecte, așa că, din punctul meu de vedere sunt gata să încep. Am ajuns la concluzia că e bine să postez chestii cam de 5 ori pe săptămână, de luni până vineri. Am ales metoda asta pentru că dacă vreau să mă țin de ceva tebuie să fac asta des… Chiar dacă vor fi post-uri aproape zilnic, nu toate vor fi lungi. Dar, mai multe despre acestea imediat.

Read More