Tutorials

Image optimization basics for websites

One of the largest components of a page are images. If there are too many un-optimized images on a page, the page loading will suffer. Here are a couple of quick wins for optimizing the images on your site.

The first and most important is to name and describe your images correctly. Google Image search accounts for 25% of web traffic to most sites and proper naming could result in a lot of traffic. First, rename your images to describe the content. Next, use title and alt text tags to name and describe the image again. Proper alt-tags help when a page hasn’t loaded, and the user sees only the bounding box of the image.

Next, ensure that your images are optimized for the page. Many designers throw in the largest image they have and set the image size in the page, without resizing the image. Resize and optimize images for the exact size you need them. There is a lot of freeware online that will allow and suggest the best ways to resize and optimize images for smaller file sizes. Smaller files mean faster load times, which is great for users and to rank better for Google Page Speed.

Written by Rack Alley. Get your content closer to your audience with Los Angeles web hosting and give your users faster load times and great uptime.

How Tabs Should Work

Remy Sharp picks that old chestnut – tabs – and roasts it afresh on the open fire of JavaScript to see how a fully navigable, accessible and clickable set of tabs can work. Everybody knows some scripting and some CSS can help to make your website bright. Although it’s been said many times, many ways, please be careful to do it right. Tabs in browsers (not browser tabs ) are one of the oldest custom UI elements in a browser that I can think of. They’ve been done to death. But, sadly, most of the time I come across them, the tabs have been badly, or rather partially, implemented. So this post is my definition of how a tabbing system should work, and one approach of implementing that. But… tabs are easy, right? I’ve been writing code for tabbing systems in JavaScript for coming up on a decade, and at one point I was pretty proud of how small I could make the JavaScript for the tabbing system: var tabs = $(‘.tab’).click(function () { tabs.hide().filter(this.hash).show(); }).map(function () { return $(this.hash)[0]; }); $(‘.tab:first’).click(); Simple, right? Nearly fits in a tweet (ignoring the whole jQuery library…)

Go here to read the rest: 
How Tabs Should Work

Upping Your Web Security Game

Guy Podjarny sounds a sober warning during our festivities, and gathers some winter fuel to help secure your apps and users from the web’s occasionally cruel frost. So mark his footsteps good, my friend, and tread thou in them boldly. Thou shalt find the hacker’s rage freeze thy site less coldly. When I started working in web security fifteen years ago, web development looked very different. The few non-static web applications were built using a waterfall process and shipped quarterly at best, making it possible to add security audits before every release; applications were deployed exclusively on in-house servers, allowing Info Sec to inspect their configuration and setup; and the few third-party components used came from a small set of well-known and trusted providers. And yet, even with these favourable conditions, security teams were quickly overwhelmed and called for developers to build security in. If the web security game was hard to win before, it’s doomed to fail now . In today’s web development, every other page is an application, accepting inputs and private data from users; software is built continuously, designed to eliminate manual gates, including security gates; infrastructure is code , with servers spawned with little effort and even less security scrutiny; and most of the code in a typical application is third-party code, pulled in through open source repositories with rarely a glance at who provided them

More: 
Upping Your Web Security Game

How to Do a UX Review

Joe Leech offers a rundown on his UX review process, sharing tips about analysing data and creating personas, and setting out findings in a form that benefits clients. From quick wins to workshops, there are gifts here everyone will be grateful for. A UX review is where an expert goes through a website looking for usability and experience problems and makes recommendations on how to fix them. I’ve completed a number of UX reviews over my twelve years working as a user experience consultant and I thought I’d share my approach. I’ll be talking about reviewing websites here; you can adapt the approach for web apps, or mobile or desktop apps. Why conduct a review Typically, a client asks for a review to be undertaken by a trusted and, ideally, detached third party who either works for an agency or is a freelancer. Often they may ask a new member of the UX team to complete one, or even set it as a task for a job interview. This indicates the client is looking for an objective view, seen from the outside as a user would see the website. I always suggest conducting some user research rather than a review. Users know their goals and watching them make (what you might think of as) mistakes on the website is invaluable

View post: 
How to Do a UX Review

Create a Dark Landscape Matte Painting with Photoshop

Hey PSDFANs, In this tutorial I’ll show you how to create a misty landscape matte painting with a dark castle. We’ll create a misty scene with the layered mountains and the light from afar. The main technique here is blending with adjustment layers, masking and brushes. There are something basic you should know about contrast, distance, intensity etc, and we’ll dive into all of those in today’s lesson! Final Image As always, this is the final image that we’ll be creating: Resources Used In This Tutorial Sky Mountains 1 Mountains 2 Mountains 3 Mountains 4 Castle Birds Step 1 Create a new document in Photoshop with the given settings: Step 2 Open the sky image. Use the Move Tool (V) to drag it into our white canvas, use the Free Transform Tool (Cmd/Ctrl+T) to enlarge it as shown below: Step 3 I used an adjustment layer to darken the sky. Go to Layer > New Adjustment Layer > Curves: Step 4 Drag the mountains 1 image into our main document and place it as shown below: Click the second button at the bottom of the Layers Panel to add a mask to this layer. Use a basic, soft brush with black color to erase its sky and mountain part as the screenshot below shows: Step 5 I used an adjustment layer with Clipping Mask to reduce the mountains saturation a little: Step 6 I used Curves (Clipping Mask) to darken the mountains: On this layer mask use a soft black brush with a very low opacity (10-15%) to reduce the effect on the top of the mountains: Step 7 Isolate the mountains 2 image and place it in the foreground: Add a layer mask and use a soft black brush with a very low opacity (10-15%) to erase the top of the mountains as shown below: Step 8 I used Hue/Saturation for these mountains: Step 9 I used Color Balance to add some cyan/blue to these mountains: Step 10 You can see that the mountains contrast does not fit the dark background. I used a Curves adjustment layer to solve it: Step 11 Make a new layer, change the mode to Overlay 100% and fill with 50% gray: Active the Burn Tool (O) with Midtones Range, Exposure about 15-20% to darken a part on the top of a mountain. You can see how I did it with Normal mode and the result with Overlay mode: Step 12 Open the mountains 3 image. Place it over the working document as shown below: Use a layer mask to blend it with another mountains, we need the layered mountains on the left: Step 13 I used Hue/Saturation for these mountains: Step 14 I used Curves to darken them: Step 15 Add the mountains 4 image to our main document: Mask off some parts of the image to get a similar result like below: Step 16 I used Curves to increase the contrast of these mountains.

See the rest here: 
Create a Dark Landscape Matte Painting with Photoshop

Why You Should Design for Open Source

Jina Bolton lets the Christmas spirit of generosity and goodwill flow freely into open source projects in need of good design. It’s work free of charge, perhaps, but not for nothing.

Originally posted here: 
Why You Should Design for Open Source

SEO in 2015 – What to watch out for

Dave Collins reacquaints us with the benefits of SEO , cutting through the snake oil with the clove-scented satsuma zest of genuine techniques to help Google smartly bring your visitors calling. With luck, they won’t will be singing carols.

So what do you think will change in SEO in 2015? Will Google make their algorithms tougher? This is probably a sure bet. Each year Google had been making it tougher for SEO.

Read the full article below and find out some of the things to watch out for. :
SEO in 2015 (and Why You Should Care)

Collaborative Responsive Design Workflows

Sibylle Weber finds ways to make our workflows more collaborative, and advocates more positively asserting the benefits of responsive design to the people who matter: colleagues and clients.

Read the original here:
Collaborative Responsive Design Workflows