I’m following my own advice and I am running a little experiment to make my blog more interactive, in order to engage with my visitors and gather some valuable information in the process.
Being a WordPress designer myself, I’d like to know what criteria are most important in deciding who to work with.
If you selected Other, please leave a comment! Thanks.
Open Firefox, activate the Firebug panel, open text editor, place both windows side-by-side, tweak CSS in Firebug, copy and paste code into Notepad++, save, refresh browser, rinse, repeat…
Sound familiar? The part when you CTRL+s, then F5 in the browser is a pain for me, so I spent most of yesterday looking for a solution.
First of all, I’m on a PC running Windows 7, so no, I can’t use Coda or CSSEdit. Anyway these don’t offer all the features of my ideal software.
Features that I want from my ideal software:
First I tried several Firebug extensions that allow to save changes, but they all fail in some respect because they work on calculated CSS, which means that they will only save the CSS used in that particular rendering. You’ll lose the webkit specific declarations, media queries, etc…
I also tried using the Web developer toolbar which has an edit CSS panel with a save button. It has several bugs that make images and backgrounds disappear and other rendering problems.
I also gave Stylizer a try, which comes very close to what I need, except it relies heavily on a GUI for nearly everything, so it’s not up to date with the latest CSS3 properties. If they had a more basic version, which would allow manual coding instead of using the GUI, it may be a winner.
TopStyle also came very close, except the preview browser is internet explorer 8. They tried to include support for Safari and Gecko, but it’s experimental, not supported and I couldn’t get it to work anyway, it crashed everytime.
During my research, I found this article by Jason Santa Maria : http://jasonsantamaria.com/articles/a-real-web-design-application/, which comes to the conclusion that there is a need for a web design application for designing in the browser.
I also found a web app called quplo , but it’s very buggy at the moment, I couldn’t make it work.
another web app called buildorpro :
It isn’t open to sign up yet.
I followed this tutorial at Design Instruct
Retro Typography poster
A client came to me with a website design in Photoshop and I converted it to a WordPress theme.
I enjoyed creating the theme as it was quite challenging, and I learned a lot about creating child themes for the Hybrid framework.
This is my fifth Hybrid child theme.
The homepage has a featured post area, a latest posts area, all widgetized and easily editable from the admin panel.
There are different page layouts, 1,2 & 3 columns.
I used the widgets logic and query_posts combo extensively which allows a lot of control from the admin panel, which is one of my goals when creating a theme. I try to make everything dynamic and editable.
While designing a website, I wanted to add some semi-transparent backgrounds using CSS rgba.
In this article, the author suggests using a PNG as a fallback for browsers that don’t support the rgba declaration.
Having read about Internet Explorer’s proprietary filters, I decided to use that instead, to avoid having to download another image.
I added the following declarations to the IE stylesheet with conditional comments:
.content, #primary {
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ebe7e7,endColorstr=#80ebe7e7);
}
.page-title, .singular-page-title {
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80146ea4,endColorstr=#80146ea4);
}
This is the result:
You can see that the result is not very pretty! The font doesn’t seem to render very well.
I suspected that the IE filters were the culprit, so I removed the declarations, and here is the result:
Much better!
Conclusion: I’ll use the PNG fallback method.
Have you experienced this issue? Is there a fix?
Leave your comments!
A new year, a new website!
As you can see, I’ve completely redesigned SideraDesign.com.
Changed from a 1 page portfolio to a fully fledged blog powered by WordPress and a custom theme
The main features are:
And many more.