.. it’s Weekend again, time for a new roundup with last week’s best tutorials and design articles! It’s all about HTML, CSS, PHP, responsive web design, branding, 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.
The last couple of months it was sheer impossible for me to post new (main) articles here, due to the fact I’m swamped with loads of client work and some personal projects too.
Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.
CSS3 3D Transformation Functions – In this article we look at the basic 3D functions you can apply to elements.
A More Semantic Approach to Spriting Images – Images that are part of the content should be in `img` tags. This is correct semantically, good for accessibility, and good for interoperability.
CSS Clipping and Masking — Show and Hide Parts of Images and Elements with Code - Clipping defines which part of an element to show and which to hide, while masking combines two elements to determine how much of each pixel should be transparent.
How to Create a Lightbox Ultra Using CSS and JavaScript – Combining Lightbox with CSS and JavaScript does offer web coders a valuable tool to enhance their techniques in creating great 3D animation with Lightbox using the following concepts to use in your own coding design projects
Smashing Conf: 60 Frames Per Second – Addy Osmani shared some tips for rendering Web experiences at 60 frames per second and why it matters. Here’s my notes from his talk Gone in 30 Frame Per Second
Simplest Way to Create Cool CSS3 Animation Effects – Here we have 11 CSS3 and Javascript animation libraries. Creating animation can be really simple with these libraries. You don’t have to make one, just choose from theirs large pool of predefined animation effects and add it to your websites.
A Bunch of CSS Only Custom Checkboxes – Luckily there is a little CSS workaround that I’ve used to create a bunch of these custom checkboxes.
4 ways to create CSS that’s modular and scalable – Modular code is reusable code. It can be combined in a variety of ways, making it flexible and scalable, allowing you to iterate code blocks independently and leading to better performance and more maintainable sites.
Client-side full-text search in CSS - Using data- attributes for indexation, and a dynamic stylesheet with a CSS3 selector for search, it is straightforward to implement a client-side full-text search in CSS rather than JavaScript.
CSS Clipping and Masking: Examples and Observations – Again while css clipping and masking isn’t going to work in every browser, there isn’t much harm in using either as far as I can tell. Non-supporting browsers show the original element or image so you can clip and mask away in the name of progressive enhancement now if you’d like.
Top 7 PHP Tools for Web Developers – Here we’re presenting Top 7 PHP Tools for Web Developers which allows the developers to generate something creative with their innovation and help of such tools. If you’re a PHP developer then don’t wait!
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Build a Freshly Squeezed Responsive Grid System - Lemonade is a grid system that was built in order to give designers and developers the confidence to make fully responsive websites, eliminating the frustration of flicking between browsers looking for bugs and errors.
Avoiding pseudo-principles in your design documentation - The need for proper UX and UI design documentation increases rapidly, as your number of product teams grows. As in most other situations, understanding why something should be done is more powerful than just knowing how it’s done.
On Progressive Enhancement - The intentionally over-the-top piece was a departure from the thoughtful, well-reasoned pool of recent posts about progressive enhancement. That was the point, and I’m glad it raised some eyebrows.
Web Performance 2.0 - It’s not only that you want users to have a good experience. If that was the case you could easily swap performance for a more important concern in your agenda.
Responsive image workflow – Sounds simple, but the devil’s in the details. For the purposes of this here discussion, I will focus on optimal image size and fidelity, and much to your chagrin, will completely ignore the art direction component of the problem.
The 6 Simplest Web Accessibility Tests Anyone Can Do – What about people who want to know: “How does my website perform for people with people with disabilities?” Here you go. 6 tests that anyone can do without any development knowledge.
Responsive Image Container – In this post I’ll try to explain what this prototype does, what it cannot do, how it works, and its advantages and disadvantages over markup solutions. I’ll also try to de-unicorn the responsive image format concept, and make it more tangible and less magical.
Responsive Navigation On Complex Websites – To illustrate the techniques involved in implementing responsive navigation on a large website, I’ll refer to two actual clients of mine. I’ll start with the process and how to get through it with research and mockups, then later get into some of the actual code that was used.
Website Usability Testing: Tips And Tricks From Experts - In this piece of writing, there will be in depth discussion on the things to be considered for usability testing, how to move for that, and what experts say about that.
7 Pro Tips to Make Your Mobile Website Function Properly – Here in this article, we are going to share some tips that may help you design and develop a mobile version so that you do not have to face much fuss along the way.
Best Ways to Improve Your Responsive Web Design – If we had only one piece of advice to give though, it would be that like any successful design and development engagement, planning thoroughly and thoughtfully for Responsive Design process early on is the best way to ensure fewer hiccups at the end of the project.
User experience or Client experience? - In this post I would like to bring up one UX designer role that has become popular in some companies which I call a Client Experience Designer.
Quick and dirty usability testing - Of course, ideally you should test designs with people who truly represent the intended end-user, and if you have the time and team support, you should go that route.
Progressive Enhancement: It’s About the Content – Progressive Enhancement means that each layer (content, followed by markup, styles, and then behavior) builds upon the next, ensuring that the core content is accessible along the way for less capable browsers and devices.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
Landing Page Optimization in 17 Easy Steps - What you need right now is a list of quick, easy tips that can help optimize your landing page performance straight away. Luckily, we’ve compiled a list of 17 of the best landing page practices.
Tools And Tips To Make Your Life Easier As A Web Designer - There are plenty of applications, resources or services out there that can help make your life as a web designer easier. I’ve used many different ones over the years, and there are some I keep coming back to.
The designer’s guide to image compression – Don’t know your JPEGs from your PNGs? Our guide to image compression explains the fundamental concepts and terminology you need to know, plus some handy tools that might make your life easier.
The Next Step Forward in the Evolution of Web Design – There are many advantages of flat design. In fact, flat design is in itself not just a trend, nor a mere extension of minimalism, but a step forward in the evolution of web design.
What’s new for designers, September 2013 - The September edition of what’s new for web designers and developers includes new web apps, jQuery resources, sites to find inspiration, responsive design tools, mobile design tools, coding resources, and some really great new fonts.
Why cards are the future of the web – If the predominant medium of our time is set to be the portable screen (think phones and tablets), then the predominant design pattern is set to be cards. The signs are already here…
Free Basic jQuery Image Sliders – In order to effectively intensify portfolio items, improve the performance of the site, quickly engage the visitors with eye-catching artworks, designers resort to simple but proven method of incorporation fast and light image sliders that usually occupy the top part of a main page.
6 Tips for Designing Graphics on Mobile Devices – Designing effective graphics for mobile devices is a challenge. Graphics on mobile are different from desktop devices. Designers need to understand the complexities of working with mobile technology. Here are six ways to make your graphics work on mobile devices.
The Ultimate Guide to Launching a Website – Launching a successful website entails an understanding of computers, the internet and information technology. There are several misconceptions as to the making of websites.
5 Fresh & Handy CSS Tools for Developers – For sparing your precious time we have gathered 5 Fresh and Handy CSS Tools for Developers that would simplify your development tasks and save lots of efforts.
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
25 Fresh Typography Tutorials In Photoshop – With plethora of fresh typography tutorial on Photoshop we have sorted and gathered some best 25 typography tutorials which would be helpful and interesting to our users.
Questions to Ask Clients Before Designing Their Logo – You might understand what the client desires for as the end product but proper research and serious discussions with your client to get to gist about the business is any day important.
40 Impressive Adobe Illustrator Design Tutorials - Adobe Illustrator, one of the most powerful Vector Based software currently being used in the market. Very useful tool also for those who are in Printing fields.
Why I’m alarmed by Yahoo’s approach to logo design - I found the unveiling of Yahoo’s new logo last week alarming. What it says about Yahoo’s CEO, Marissa Mayer, and her perception of design and its value (or lack of value) is startling and should encourage anyone interested in design to take note.
Designing the Perfect Logo for Your Small Business - You need to do much more than slap together something basic in PowerPoint or Paint. You need to invest in a design for the long term. Don’t feel like you need to over-complicate the process, however.
Blogging, Social Media, Writing, Content Strategy, Email, etc.
Create In-Depth Articles to Increase Your Google Authority - To gain real authority in the eyes of Google, you must be an expert. Your content must be in-depth, cite sources and other experts, and link appropriately.
Improve Your Website Content’s Quality: 5 Ways to Drive High Performance – To play in this landscape, best practices drive digital marketers and publishers to crank out as much website content as possible. The thinking is that by publishing a lot of content traffic and engagement will follow.
Designing The Words: Why Copy Is A Design Issue – Working in a content-focused industry, we need to keep this issue pretty close to heart; creating great copy is pointless if it is visually uninspiring or unreadable. Likewise, if the content doesn’t deliver, then even the most attractive page won’t hold the reader’s attention.
Five Steps to Finding (the Right) Guest-Blogging Opportunities - That means, if you’re doing it right, guest blogging should be some of your best work. Think of it as a speaking engagement. You wouldn’t get up in front of a group of people unprepared.
WordPress
How to Change JPEG Compression in WordPress – What? WordPress automatically compresses JPEG images? This might be news to you. When images are uploaded to WordPress, it will automatically compress jpeg files to 90% of the original.
10 Useful WordPress Plugins to Improve Your Site’s Search - If you have spent some time playing with WordPress, then you know the default search is far from perfect. Let’s look at the some of the best search plugins for WordPress.
Customising Our Site’s Functionality Using functions.php – In today’s tutorial we’re going to tackle that last mysterious file in our theme that you’ll often see mentioned around the traps; the one to which you may well have pasted snippets of code before without really knowing why or wherefore.
5 Recommended WordPress Plugins for Business Focused Sites - Plugins have been around for years now and some of them are absolutely vital if you’re running a business site using WordPress. From social sharing buttons to dedicated landing pages, plugins can do wonders for your business website.
A Simple Guide to WordPress Installation : The Easiest way for Making WordPress talk to its database – Before directly heading forward towards how to install WordPress it is necessary to understand WordPress database model. The aim of this manual is to help you develop necessary skills to troubleshoot WordPress installation.
How-To Add Google Authorship To WordPress Correctly – This means you are only supposed to have the authorship link on articles or blog posts that were authored by you – the link should NOT appear on home, contact, archive, or any other ‘site’ pages.
WordPress eCommerce Guide – Free Plugins & Add-Ons – In today’s article, we’re going to list some of the best free and premium WordPress eCommerce plugins and a couple of websites selling add-ons for the top eCommerce plugins. Let’s get started
Search Engine Optimalization, Conversions, Analytics, etc.
13 Ethical Ways to Increase Your Site’s Search Traffic – We asked a panel of 13 successful entrepreneurs to share their best advice for generating high-quality, organic search traffic to their business websites.
10 SEO Tips for Startups and Small Business Owners - Staying ahead of your competition with quality search engine optimization (SEO) has never been more important to secure your slice of the market.
8 SEO Cleanse & Recharge Ideas For Fall 2013 – This is a great time to give your website an SEO cleanse and recharge the old batteries. Here are 8 things you can do to strengthen quality.
Six Common Ecommerce SEO Mistakes – Whether you’re using an expensive SEO consultant or simply relying on a subscription ecommerce platform, you’ll want to take heed of the following common mistakes made by ecommerce websites.
Tutorials
How To Create Flat Checkboxes – With the trend of flat design I’ve decided to extend a previous tutorial of How To Style A Checkbox With CSS with two extra code snippets of styling checkboxes with a flat design.
Freelance, Business and Workflow Related Stuff
Client Relationships: What To Do When Things Go Wrong – You’ve been working hard on your latest project for a client. You’ve delivered, so now it’s time for that last payment. But after weeks of wrangling with their people, there’s still no check in the mail.
How to make a passive income as a designer – When you turn the services you’re currently doing into products, you’re not limited to charging for every hour that you work, and you can instead sell those products and make money while you sleep.
Should I Become a Freelancer? An In-Depth Look at the World of Freelance Design – The life of a freelancer is often desired by designers who work as employees. The usual assumption is that a freelancer designer has the freedom to sleep in and take time off whenever they need or want to.
The Ultimate Guide For New Freelancers - You should know that takes a lot of hard work and determination to climb the ladder of success in the world of freelancing. If you plan to quit your job and take on freelancing, you need to be ready to face the very tough competition.
Why now is the right time to become a UX designer – The main reason why now is a great time to be a user experience designer is because companies are putting an increasing emphasis upon it.
F*cking Brilliant, a great Read or just magnificent Tips!
The Lords of Vendorbation – “Terrible food kills a restaurant. Terrible music ends a band’s career. But unspeakably terrible software begets imperial monopolies.”
We Don’t Build Websites Anymore - The title of this piece isn’t hyperbole. We don’t build websites anymore. We build information logistics platforms for marketing and e-commerce. That’s our future, and, I believe, yours too.
10 design concepts every developer should know – This list is intended to be a shortlist of the concepts that I’d like the developers I work with to understand about design. It’s meant to steer developers in the right direction as an introduction to thinking and communicating about design.
Stop Making Me Sign Up – As product people (designers, developers, makers) we’ve reached a state where we think it’s acceptable to force users to sign up for a service they don’t get to try first. Why is that?
What exactly is the wow factor in design? – What exactly is the role of design? Is it to impress, seduce and wow us, or does it go deeper than that? Are we approaching design with the right attitude?
- § -
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