{"id":1350,"date":"2008-11-10T05:45:09","date_gmt":"2008-11-10T12:45:09","guid":{"rendered":"http:\/\/css-tricks.com\/?p=1350"},"modified":"2008-11-09T10:00:37","modified_gmt":"2008-11-09T17:00:37","slug":"about-the-css-tricks-redesign","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/about-the-css-tricks-redesign\/","title":{"rendered":"About the CSS-Tricks Redesign"},"content":{"rendered":"<p>In case you haven&#8217;t noticed, I&#8217;ve done a bit of a design overhaul around here. I thought I&#8217;d take the opportunity to go over some points and features of the new design.<\/p>\n<h3>Why?<\/h3>\n<p>Because it was fun. Because I&#8217;m a designer and we never stay satisfied. Because I think websites should always get a little design refresh at least every year or so. <\/p>\n<h3>Is there anything new?<\/h3>\n<p>Nope, not really. Just a new face. On the back-end, I&#8217;m slowly moving some stuff into WordPress that lived outside of it before. Like all the video pages. Most of them are on static pages I built one-by-one as I need them. I don&#8217;t even remember why. But now I have a special WordPress page template for them, where I insert the stuff into Custom Fields, which will work out great I think. This will allow for commenting on the video pages themselves, which is nice. This will also make future design tweaking a hell of a lot easier.<\/p>\n<h3>Connection to old design<\/h3>\n<p>I&#8217;ve said many times in the past that I like <em>evolutionary<\/em> design more than <em>revolutionary<\/em> design. Essentially, tweaking and improving rather than starting from scratch. While this design feels quite a bit different, I still feel it&#8217;s evolutionary. The underlying code hardly changed at all. The background texture, while lighter, is the same. The tag is still here! The sidebar is still on the right and has the exact same stuff in the exact same places. The footer is still humongous =)<\/p>\n<h3>jQuery<\/h3>\n<p>I like jQuery, you like jQuery, WordPress likes jQuery. I was using it a little bit in the last design, but I figure if I&#8217;m going to load the library I might as well make more use of it. Things jQuery does in the new design:<\/p>\n<ul>\n<li>Does the color-fading in the main menu. <em>Tutorial on that coming soon.<\/em><\/li>\n<li>Powers the tabbed slider in the sidebar.<\/li>\n<li>Pulls my recent Tweet in the footer.<\/li>\n<li>Animates the links in the footer.<\/li>\n<\/ul>\n<h3>Changes to Page Titles<\/h3>\n<p>The old design appended &#8221; &#8211; CSS-Tricks&#8221; to the end of almost every page. I don&#8217;t even remember why, I think it was either some early effort at SEO, or just came in as a part of a template I started from. I never liked it. Now I&#8217;m using a much smarter technique for properly naming pages in WordPress. The homepage is just the name of the blog. Posts are just the name of the post. <\/p>\n<p>Here is the clever bit of PHP (specific to WordPress) that handles page titles:<\/p>\n<pre><code>&lt;title&gt;\r\n\t&lt;?php if (is_home()) { echo bloginfo('name');\r\n\t} elseif (is_404()) {\r\n\techo '404 Error - Page Not Found';\r\n\t} elseif (is_category()) {\r\n\techo 'Category:'; wp_title('');\r\n\t} elseif (is_search()) {\r\n\techo 'Search Results';\r\n\t} elseif ( is_day() || is_month() || is_year() ) {\r\n\techo 'Archives:'; wp_title('');\r\n\t} else {\r\n\techo wp_title('');\r\n\t}\r\n\t?&gt;\r\n&lt;\/title&gt;<\/code><\/pre>\n<h3>@font-face<\/h3>\n<p>As a nod to CSS3, I am using @font-face for some of the text in the footer. You&#8217;ll only be able to see it (at the time of this writing) in Firefox 3.1 beta and the latest versions of Safari. I am using the free and very nice <a href=\"http:\/\/www.josbuivenga.demon.nl\/fontin.html\" rel=\"noopener\">Fontin<\/a> font from Jos Buivenga.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/fontinexample.jpg?resize=537%2C208\" width=\"537\" height=\"208\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p>If you are interested in using @font-face, want to learn more, and want to learn how you can make it work in IE, check out <a href=\"http:\/\/jontangerine.com\/log\/2008\/10\/font-face-in-ie-making-web-fonts-work\" rel=\"noopener\">Jon Tan&#8217;s article<\/a>.<\/p>\n<h3>Coding the new theme<\/h3>\n<p>I decided that it would make things easier to work in the exact same environment that CSS-Tricks currently lives. So I registered a <a href=\"http:\/\/www.css-tricks-redesign.com\/\" rel=\"noopener\">top level domain name<\/a> and put it on the same server. That way when it was done an complete, I could literally just move a few folders and files and that was it. All the relative file paths would be exactly the same, which I wouldn&#8217;t be able to do if I was working from a subdirectory of the original site. Maybe overkill, maybe better ways to do it. Whatever, it worked great for me.<\/p>\n<p>One problem I ran into was the fact that I wanted to copy all the posts and comments over to the test site from the main site. I should have been able to just export from the main site and import at the test site. Tried that, but the file was 10MB which was too big (even after some fancy hacking tricks) for WordPress to import. I could have moved the database, but I just got lazy and didn&#8217;t do it.<\/p>\n<p>So&#8230; When the design was getting close to done and needed some real live testing on the real live site, I found an awesome WordPress plugin that did the trick. It&#8217;s called <a href=\"http:\/\/wordpress.org\/extend\/plugins\/nkthemeswitch\/\" rel=\"noopener\">Theme Switcher<\/a>, and it allows you to show a different theme to people who are logged in (and at a high enough access level). So I was able to active my new theme and literally see it in action when I was logged in, while everyone else was still seeing the old design. Extremely helpful.<\/p>\n<h3>It&#8217;s not centered<\/h3>\n<p>Just a design decision. In order to center this design I&#8217;d have to come up with some kind of way to resolve the left side so that it could use the same repeating graphic as the right does. That would take up a decent chunk of horizontal space and I just don&#8217;t think it&#8217;s necessary. I don&#8217;t mind it left aligned anyway.<\/p>\n<h3>Things you just have to live with<\/h3>\n<p>At this point I have way too many articles to ever (ever) revisit one-by-one and make changes to. There are some consistencies in the articles that dictate certain design aspects of the site. For example:<\/p>\n<ul>\n<li>Images in all posts are 570px at a maximum. So the main content area of the site always needs to be at least that wide.<\/li>\n<li>Images in all posts were meant to be shown on white. When I first started this new design I had a little texture in the main content area I liked, but then I went back an looked at some old posts with lots of images that were meant to be shown on white and it looked awful. From now on, my main content area will always need to have a white background.<\/li>\n<li>All code snippets in my archives are wrapped in both &lt;pre&gt; and &lt;code&gt; tags, with a class name indicating the code type. All HTML code in <strong>unescaped<\/strong>. I use a plugin to allow me to do that, and another plugin to do the highlighting. I like the system OK, but I am absolute trapped into it now. Different code highlighters have different requirements for how you handle your code, and I have far too many snippets to ever go change them all.<\/li>\n<\/ul>\n<h3>Hope you like it!<\/h3>\n<p>So there ya have it! I hope you like it, feel free to let me know (either way).  For posterity, here are some screencaps.<\/p>\n<h4>Old Design<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/olddesign.jpg?resize=570%2C416\" width=\"570\" height=\"416\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<h4>New Design<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/newdesign.jpg?resize=570%2C416\" width=\"570\" height=\"416\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In case you haven&#8217;t noticed, I&#8217;ve done a bit of a design overhaul around here. I thought I&#8217;d take the opportunity to go over some points and features of the new design. Why? Because it was fun. Because I&#8217;m a designer and we never stay satisfied. Because I think websites should always get a little [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":2451,"url":"https:\/\/css-tricks.com\/design-refresh\/","url_meta":{"origin":1350,"position":0},"title":"Design Refresh","date":"March 27, 2009","format":false,"excerpt":"It was time for another design refresh! The best part about this one, for me, was that all the work I did last time made this one very easy to do. As usual, it's not extremely drastic. Evolutionary, not revolutionary. The old one wasn't bad, I just felt playing and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/mar2009design.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2269,"url":"https:\/\/css-tricks.com\/joomla-template-design-book-giveaway-resources\/","url_meta":{"origin":1350,"position":1},"title":"Joomla Template Design Book Giveaway &#038; Resources","date":"February 24, 2009","format":false,"excerpt":"I get asked from time to time to do more stuff about Joomla. Joomla just happens to be one of those things I know very little about. I've never worked with it and I haven't run across the need for it just yet. I tend to reach for WordPress by\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3945,"url":"https:\/\/css-tricks.com\/design-refresh-version-5\/","url_meta":{"origin":1350,"position":2},"title":"Design Refresh (Version 5)","date":"September 8, 2009","format":false,"excerpt":"The new design has been rolled out. Nothing to shockingly different I hope, just a refresher. It's kind of hard to say, but I think this is the 5th significant iteration of the design at this point. The lines are fuzzy since the design evolves in between those iterations quite\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/oldv4.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":285522,"url":"https:\/\/css-tricks.com\/what-are-design-tokens\/","url_meta":{"origin":1350,"position":3},"title":"What Are Design Tokens?","date":"April 3, 2019","format":false,"excerpt":"I\u2019ve been hearing a lot about design tokens lately, and although I\u2019ve never had to work on a project that\u2019s needed them, I think they\u2019re super interesting and worth jotting down a few notes about. As I understand it, the general idea is this: design tokens are an agnostic way\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/penny.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303988,"url":"https:\/\/css-tricks.com\/ios-13-design-guidelines-templates-and-downloads\/","url_meta":{"origin":1350,"position":4},"title":"iOS 13 Design Guidelines, Templates, and Downloads","date":"February 21, 2020","format":false,"excerpt":"Erik Kennedy wrote up a bunch of design advice for designing for the iPhone. Like Apple's Human Interface Guidelines, only illustrated and readable, says Erik. This is mostly for native iOS apps kinda stuff, but it makes me wonder how much of this is expected when doing a mobile Progressive\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/iphone-ios-design.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":178885,"url":"https:\/\/css-tricks.com\/sponsor-new-creative-market-bundle-39-loads-design-resources\/","url_meta":{"origin":1350,"position":5},"title":"Sponsor: New Creative Market Bundle! $39 for loads of design resources","date":"August 14, 2014","format":false,"excerpt":"Creative Market sells loads of design resources. From high quality stock photography and vector art, to print design and web templates, to really fancy stuff like Photoshop actions for getting awesome effects easily. Once in a while, they put together a bundle of resources you can buy and then have\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1350"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1350"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1350\/revisions"}],"predecessor-version":[{"id":1366,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1350\/revisions\/1366"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=1350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}