.. yep, .. it’s time again for a new roundup with last week’s best tutorials and articles found on the interwebs. It’s all about HTML, CSS, responsive web design, graphics, SEO, WordPress and more. A broad scale of topics, but never-the-less the underlying focus is on Design.
Also I see this as my personal bookmarks of great articles from the Community of the last period. These hand-picked articles and tutorials are categorized by their main topics. The best way to keep track of these tweets is simply to follow me on Twitter.
Media Query width and vertical scrollbars – Media queries are a great tool for changing a website’s layout depending on parameters like viewport width, but it can be very annoying when browsers do not do the same thing.
What size is my viewport? – Responsive web design is making a positive and lasting impact to the web as we know it. Along with most change comes new scenarios. I think it’s safe to say that supporting a flexible viewport is at the top of the list.
Simulate “float: down” – To sum up, he had a list of elements floated to the left. However, he wanted to float items top to bottom on each column and not left to right on each row.
How To Create HTML5/CSS3 Columns for All Browsers – In this article I want to look at creating your own website layouts from scratch using bare-bones HTML and CSS codes.
10 Creative Techniques Using CSS3 Box Shadow – In this article I want to share 10 code snippets relating to brilliant CSS3 box shadow designs. I’ll explain how the code works and how you can implement each box shadow into your own website.
Why You’re a Bad PHP Programmer – We all have our bad habits. In this article, we’ll go over a list of bad practices that are worth examining, reevaluating, and correcting immediately.
CSS Selectors Level 4: The Path to CSS4 – Even now, just as you are still learning to use CSS3 and HTML5, those talented folks at W3C have released a working draft of the Level 4 standards of CSS Selectors, creating a buzz that CSS4 is near.
Stylish Blockquotes And Pull Quotes In Web Design: Tips & Examples – When you need to express dialogue or repeat a quotation from another source this is the perfect HTML style. Today’s post to look at how you can create stylish blockquotes and pull quotes.
It’s All About HTML5 “Section” Element – HTML5 new “Section” element seems a great solution to a common problem faced by most of the web developers while dividing a web page into various visible sections comprising of blocks, areas, boxes, regions.
A beginners guide to SASS, part 1 – I thought it’s time to write a simple introduction to getting you started so that you understand what I’m talking about. And I’m sure as soon as you understand the potential you’ll use it on your own projects.
HTML 5.1 and the main element – The new
main element currently hovers between inclusion in the final HTML5 spec and 5.1, depending on how quickly it is implemented in browsers.
main was felt by many developers to be the element missing from HTML5
Using to Avoid Orphans – This isn’t something to be abused, for sure. You’ll end up getting entity crazy. But it’s a good option to have in a quick rut or where you do have control.
20 tips for building modern sites while supporting old versions of IE – Over the past few years, we’ve spent a lot of time talking to web developers and the one thing we hear more than anything else is just how difficult it is to build sites that work well across various browser versions and devices.
Your logo is still an image… and so is mine! – spriting an
img allows us to use the correct semantics and also take even more advantage of sprites! A machine sees an
img labelled ‘CSS Wizardry’ and a user sees my logo!
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Windows on the Web – When people start a task on one device and then complete it on another, they don’t want different content or less content, tailored for the device. They want the same content, presented so they can find it, navigate it, and read it.
Why and how to not use hover styles on touch devices – On mobile devices (phones and tablets), users use their finger, and there’s no more way to just hover over an element on a webpage—hovering and “clicking” are invoked by the same action: tapping.
The new rules of the responsive web – Design is about meeting a need in a way that is visually pleasing, but also that works to meet the needs of the user. Making sites that can refactor themselves for small screens is just the beginning.
OOCSS & RWD – Responsive Web Design goes hand in hand with OOCSS. Adopting the object oriented technique to CSS whilst creating a responsive site causes your site to be more consistent when it comes to viewport size changes and also makes development of page structure and how an element adapts on a viewport changes a lot easier.
Responsive Design on a Budget – Over the last year or so we’ve seen an increasing emphasis put on the performance aspect of building responsive websites, there’s no point building a beautiful, scalable, touch-friendly site if it uses up half your monthly bandwidth allowance just to load the homepage.
10 More Responsive Navigation Solutions – Last year converting your navigation into a
<select> drop-down menu was all the rage. Now, its all about the “three line” toggle menu, drawer-style nav and animated side panels (Facebook-a-like).
Responsive design: the problem with mobile ads and how it can be overcome – Advertisers clearly do not understand responsive advertising, which could work to their benefit but instead costs them exposure.
You Keep Using That Word, I Do Not Think It Means What You Think It Means – Recently seeing more and more authors writing about techniques like mobile first, adaptive web design, and RESS and many others terms with what seems to be a misconception of these terms.
On Layout & Web Performance – Outside of initial page load problems, “layout thrashing” is the most common performance problem I see in dynamic web applications. This is particularly true for Single Page Applications which build and destroy views on the fly.
Looking Beyond User-Centered Design – User-centered design has served the digital community well. So well, in fact, that I’m worried its dominance may actually be limiting our field.
Web Performance 101: An opinionated guide to the 22 links every developer should read – If you’re just starting out on your web performance journey, it’s easy to feel overwhelmed by how much there is to learn about something as “simple” as making pages faster.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Almost Flat Design – Flat design is both hot and controversial in world of user interface. Flat design is beautiful and refreshing. It’s also generally faster to design and easier to make responsive. If it was a graphic design trend, it’d be well received.
8 Fundamental Typography Tips for Designers – Many web designers spend too much time and energy on the overall theme of their sites but forget entirely about typography, so I decided to share with you some typography tips.
Web And Design Trends 2013 – The Internet, as key part of nowadays technology, keeps changing and evolving, according to the main trends that people are following. Thereby, we have decided to create this complete guide to ..
Optimizing your Website Speed, Tools and Tips – After you design a responsive retina ready website using all the latest web standards, the next step is to consider speed. Research has shown decrease in sales or visitor conversion being linked to speed of the website.
Five killer ways to use parallax – There are many ways to add depth and richness to your website designs. The Parallax technique of scrolling two or more different image elements across different site lines has become one of the most popular methods for delivering depth and movement on websites.
The best image compression tools – Save bandwidth and accelerate your site’s performance with these powerful free tools. In particular, are you sure that any graphics you’re using are fully optimised for the web?
Successful Web Design Comes Down to the Details – It’s the little things that can take a site design from average to extraordinary and neglecting the details can essentially ruin a site concept. Think about color and shading, text, and alignment and grids when outlining your next project.
Planning Your Web Design with Sketches – Planning a website doesn’t have to be completely digital. Learn how sketching wireframes can help you speed up and innovate your creatives.
Which Color Converts The Best? – Different colors can lift us up, or bring us down. There is also a psychological side to colors, color is an essential part of how we experience the world. But do colors really matter for conversions?
Flat Design: Can You Benefit from the Trend? – With many redesigns and new websites employing a flat design scheme, the trend is appearing almost everywhere, both on websites and in app design.
Collection of Useful Open Source CSS Resources – There are loads of free scripts to download and include in your website projects. Developers are constantly releasing their work under open source General Public Licenses.
A Peek at Internet Explorer’s Developer Tools – I hate debugging, and have never met any developer who argued otherwise. It’s a drag to have to go through your code and figure out why it’s broken.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
25 Fresh and New Adobe Illustrator Tutorials – Improve your skills with the following new Adobe Illustrator tutorials. They are very creative and a good source of learning new vector techniques.
10 essential tips for flawless typography – Ensure that your typography hits all the right notes with these 10 tips that every designer needs to know.
Why Designers make the best brand strategists – If you’re inventing or transforming a brand, somewhere in the process you’ll be working with a Designer or Design Firm who will be tasked with bringing your “brand strategy” to life. Brand design is not decorated brand strategy
An inside peek into the Polygon design process – It’s not every day you get to design a big ass new editorial site from scratch. This is a look into the design process for Polygon, the second of two huge projects tackled by Vox Product in 2012.
How to design for screen: 7 things print designers need to know – The transition from design for print to design for screen can be a tricky one, but follow these 7 pro tips and you’ll soon be on your way to pixel perfection. Making the move from designing for print to designing for screen, and particularly for the web, can be a frustrating process.
10 Ways to Brand Your Blog or Website Efficiently – These days, there are millions of nice-looking blogs all over the Internet and killer content is everywhere. Now, it takes a little more effort to make your blog stand out from the crowd.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
The Six Signs of an Authoritative Blog – How do you identify the best, the most popular, the most authoritative, blogs to connect with? Well, you can’t judge a blog by its cover … or its design, or its author, or even the subject matter.
Is Your Business Guilty of These 6 Blogging Mistakes? – However, just because everyone has a blog doesn’t mean everyone is doing it right. Whether you’re just launching a blog for your business, or you’ve been blogging for awhile, it’s easy to fall into some blogging bad habits.
Your Calls to Action Should Go Below The Post – If you want to lead your readers to more information, then it’s fine to work those links into the body of your article. But if you want them to share your content, then you have to let them read it first.
15 Things You Should Know Before You Start Blogging – The guides and the infomercials and other bloggers all make it sound like working online is this wonderful experience, a stress-free lifestyle where you can work when you want, play when you want and the money just comes pouring in.
Best Sublime Text Packages for WordPress Development – It is a great editor out of the box, however there are a few packages that can really make it fly. The ones I mention in this post are especially target towards WordPress development.
11 Principles to Design a Great WordPress Theme – Use these 11 principles to design a great WordPress theme that earns you applause instead of raspberries.
How to Create a Social Networking Website on WordPress – It is now possible to create your own social networking site in the popular CMS (Content Management Software) platform, WordPress using fairly easy community plugins
A Comprehensive Guide to the Best WordPress SEO Plugins – A list of the most widely used SEO plugins available for WordPress. Most of these plugins are free. Rest assured, they’ll give you the SEO edge you need for your online venture.
10+ useful SQL queries to clean up your WordPress database – After years of usage, your WordPress database can contain weird characters, be filled with data you don’t need anymore, and so on. In this article, I’m going to show you 10+ SQL queries to clean up your WordPress database.
3 Tips For Optimizing Images In WordPress – Why should you care about image optimization? Using the proper image format and resolution can not only make your website load drastically faster, but can actually improve the quality of images as well.
5 Common Mistakes When Backing Up WordPress – Don’t let the simplicity of backing up WordPress leave you with an inadequate back up plan. In fact, there are plenty of back up tools out there that don’t get the job done well enough. Here are five back up mistakes to avoid.
WordPress Backup, Data Recovery and Its Significance – How will you retrieve the data lost? Without the data you won’t be able to take your business further, in fact, you may have to confront a hefty loss in the near future.
Search Engine Optimalization, Conversions, Analytics, etc.
The Intersection of SEO and User Experience – With best practices from both disciplines combining to create an environment that’s both easily accessible to the search engines and highly engaging to the actual visitors that wind up on your site.
SEO Mistakes Experts Need to Avoid – SEO’s stop making mistakes and try to adapt new SEO changes. You can surely improve your website’s ranking if you avoid the mistakes mentioned above and act wisely.
3 Commonly Overlooked WordPress SEO Tweaks – WordPress is the most popular CMS in the world, particularly with Internet marketers and SEOs. Its a great system that is easy to use and provides a huge amount of flexibility. Here are some advanced techniques to give your site that extra push
Optimizing Content for Search Engines and Users – Techniques you can use to improve the visibility of your content. Structuring your content in a meaningful way can help a lot. By using the ‘right’ keyword in strategic places, search engines get a better idea about the topic of the page.
5 Tips for Using Google Webmaster Tools – One of the best tools you can use to analyze your online business is Google Webmaster Tools. But seeing all those stats and knowing how to use them are two different things.
The SEO of Responsive Web Design – Switching over to a responsive web design will be a big challenge, but with the way the industry is moving, it’ll prepare you for the future, and put you a step ahead of your competitors.
12 Awesome Keyword Tools for Your Website – The Internet abounds with keyword tools. Some of them are free, and some of them come with monthly fees. Which ones are worth your while? We’ve compiled a list of 12 of the most effective keyword tools.
Fresh and Creative CSS Tutorials – To help out you learn we have collected some CSS tutorials that we’re sure you want to take a look at. If you’re an apprentice or if you want to find out new tricks to add to your CSS sheets view the tutorials.
Flipping Circle Slideshow – Today we want to share a simple and fun circular slideshow with you. It’s an experimental concept and the idea is to flip a circle in a specific angle depending on which spot of the circle we click
How to Create a CSS3 Mega Drop-Down Menu – In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content.
CSS 3D folding list with social buttons – I was thinking about having a nice looking 3D folding list that contains the main social buttons and when people reach at the end of an article, the initial folded list would smoothly unfold.
How To Build a jQuery Tabs Widget with Ajax Content – In this tutorial I want to demonstrate one such method for creating dynamic content tabs. We will load in external HTML data from local files pulled via Ajax commands.
Freelance, Business and Workflow Related Stuff
Best and Worst Link Building Strategies for Freelancers – Search engines like Google are very sensitive to the links that point back to your site. So how can you make sure every link you get is helping and not hurting?
How To Estimate a UX Project – In this post I’ll list a few different approaches you can use to estimate your next UX project. I’ll focus on estimating client-facing work, as that’s where most of my experience lies, but many of the principles translate to internal projects as well.
How to Find Enough Work to Keep an Entire Agency Busy – When you’ve got a whole team working at your agency, you have to make sure that you have enough projects to keep them all busy. If you don’t, idle employees can hurt your bottom line and freelancers can go elsewhere.
Freelancing Problems–What Can Go Wrong? – What can go wrong with freelancing? The answer is that quite a lot can go wrong.
7 Pricing Mistakes That Can Seriously Stifle Sales – Today, I’m going to do some of the heavy lifting for you, and below you’ll get a breakdown (in plain English) of some of the worst pricing mistakes you can make, informed by some of my favorite research studies on pricing.
How to upsell your clients – In this article, I’m going to give you the benefit of my experience, and hopefully by the end of it you’ll know how to upsell clients, so they’ll never want to go anywhere else.
10 Reasons Why You Shouldn’t Become a Freelance Web Designer – There are literally hundreds of reasons why you should become a freelance web designer. But let me tell you why it’s a bad idea.
Advertising as a Freelancer: Keys to Success – The following suggestions highlight 10 ways a freelancer can advertise his or her skills and climb up in the freelancing ladder.
F*cking Brilliant, a great Read or just magnificent Tips!
Less Aesthetic, More Design – Flat aesthetic is great. Skeuomorphism is fine too. It’s even okay to gush over sexy UI on Dribbble and explore aesthetic fads in your own work. Just don’t forget the other 90% of what makes a design comprehensively great.
Performance As Design – Ultimately performance is about respect. Respect your users’ time and they will be more likely to walk away with a positive experience. Good performance is good design. It’s time we treat it as such.
Setting a Performance Budget – Set a “budget” on your page and do not allow the page to exceed that. This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.
Pixels don’t care – For the first time in human history, it’s possible to be represented (almost) solely through the merits of your work. There’s plenty of prejudice and intolerance in our world — and in our industry. But never forget that pixels don’t care.
Flatliners – Coming together to develop better interfaces is an amazing idea — doing it under the banner of a singular aesthetic is not. Evolving the way we think about designing for the screen is wonderful, but mimicry en masse…? That’s another story.
Tech Tips: Style Guides For The Win – This is extrememly helpful and it gives the developer a lot of time to ask the pertinent questions of the designers to make sure that all the things in the comps are truly what was intended.
- § -
I hope you have enjoyed these hand-picked great articles? Did we miss a great article, please let us know .. To keep up to date with all the cool links, simply follow me @gonzodesign