It’s been almost a month already since I launched this new responsive design and unfortunately I didn’t had much time to properly introduce it to you. This improved design is something I wanted to do for a long time and I’m glad I finally managed it. It’s simpler, minimal, responsive and I like to think that now the content is much easier to read (scan).
Characteristics
Below you can find some characteristics of the new responsive design:
- This new HTML5 theme is based on Twenty Eleven from WordPress.
- The search bar is now more visible and accessible, across all devices. Currently I use the default WordPress search but in the future I’m planning to use Google custom search for more accurate results.
- In the upper right corner you can now find some social stuff. It’s kinda easier now for you to follow me on Twitter, like my Facebook page or +1 on Google+. For these, I’d recommend you Optimised async loading of cross-domain scripts.
- I finally added a “phat” footer here which contains info about the articles and tutorials you may find here. Also, there’s a short list with places where you can find me on the web.
- For the headings font, I’m using “PT Sans Narrow” from Google Web Fonts.
- Last but not least, if you’re using WordPress too, you should check W3 Total Cache. It does miracles.
Development tools
For sketching the layout I used the classic Photoshop from Adobe. Also, Adobe Shadow is another cool tool I used for testing the new layout.
When it comes about writing code editors, I think Sublime Text 2 and Notepad++ are simply the best.
Some of my goals
Next, I’m planning maybe to retinafy this website. I also need to chose a code syntax highlighter. I think Prettify will be my choice after all.
Still, my main goal is to be able to write more and better articles on RedTeamDesign.
P.S. If you have spotted any bug or inconsistency, please let me know! :)
I have to say that your design looks awesome. Beeing following your articles for some months and they are all great. Keep up the good work!
Got one question. How did you made the hover effect over the links on the footer?
Thanks! For hovering the footer links, just use a transition for the background.
Looks and feels nice.
But about tweaking you should exclude jQuery 1.7.2 manually in W3TC as site also loads it from Google. So now 2 jQuery main files are loaded, 1 is enough. If you dont know where the Google offload comes from then be careful a plugin had not taken that in own hands. At least it is latest version but only you should control this of course.
http://wordpress.org/extend/plugins/use-google-libraries/ is a nifty little helper for off-loading stuff to Google CDN. Stupid plugins can still mess up though.
Apparently, I missed the fact that WordPress is loading a jQuery library by default. I’ll fix that later.
Thanks for the heads-up!
Cool. I checked your popular post pluign and it says “Now we load jQuery in header” or something. So it probably wont fly with jQuery in footer. So many have it there and so many devs. always spit out JS header it seems like the law – but it can work just fine in footer if and if :)
I forgot to add that Google version is loaded in footer. That means site works with no jQuery in head? Most sites require it in head, where W3TC puts it, but may be you can get away with it. I am guessing not though. 100 out of 100 sites will have it in head but not really written in stone, heh. Depends on dependencies, yep…
Do shut up you silly front-end hipster.
Actually it is a back-end issue if you need placement to understand. On this site I would not worry so much about front-end. Truth is of course that there is only 1 item, the site, but saying that will offend many a “front-end” and “less front-end” person right? .
And it is fixed – if jQuery supplied by Google placed in footer works :)
Look good, nice work :)
Thought I’d mention that the social sharing links in the header are huge when the browser width is greater than ~850px in Google Chrome 20.0.1132.47 beta-m
I think I just fixed that, thanks for your feedback Paul!
Hello!
You mentioned the code editors – try Geany (freeware and multiplatform) – a simple and useful. I use it for a long time and is great :)
Hi Rosu,
WordPress does load jQuery by default but its possible that it could be an obsolete version. So if you want to make sure that only the latest version of WordPress is always included, be it your Theme or Plugin, then you can use a simple snippet that you can copy and paste in your theme file or plugin file. You can get the snippet from:
http://www.theextremewebdesigns.com/blog/call-include-load-latest-jquery-version-in-wordpress-theme-plugin/
Hope that helps.
What did you use to make your images responsive/adaptive with your site? I’ve been considering Picturefill, but haven’t made up my mind yet. Any tips on dealing with images responsively would be great!
Thanks and keep the awesome posts coming!
Brian, the following lines do the magic for responsive images:
img { max-width: 100%; height: auto; }yeah! scaling working on images and divs…but i’ve lot more doubts n confusions are how do i handle scaling from parent div to end child(when we use some of fixed divs), how do i control entire feature of grid columns…totally i need responsive design tut with ans of tis ques(pls do it ASAP)…thanx in adv
I agree with Rosu. That’s the way to make the images responsive.
In fact, we released adaptive layout for our blog just last week. We used the same CSS to make images adapt. Our blog has new unique features & looks that you probably may not have seen anywhere else. Here is an article that will tell you more:
http://www.theextremewebdesigns.com/blog/5-main-reasons-you-should-check-out-extreme-web-designs-blog/
Feel free to check out the blog’s adaptiveness to the device used, colors, etc. & let us know what you think about it.
Thanks.
Would you share the theme with us, I don’t know how do you react on this but I said in a very polite manner……….
Your theme made me irritable :)
I’m not considering sharing it for now, sorry :)
Well I never though WordPress Twenty Eleven theme could be modified in such a great manner. I love the way you have made search button more visible and placed social media profiles to the top. Anyways overall this theme is very good