Archive for the ‘Web Design & Development Tips’ Category

02.03.2012 By

Dyn Page Load Analysis

Retail Page Speed & Web Performance Report: How Did Dyn Stack Up?

Strangeloop recently published their State of the Union for Page Speed and Website Performance, focusing on retail industry websites. Their extraordinarily disappointing key finding was that retail sites are 60% slower than they expected with an average page speed of 11.21 seconds. It’s really too bad that websites, especially ecommerce sites, haven’t met site speed expectations.

Retail sites should be at the forefront of optimized page load time. There’s been plenty of research about the correlation between fast page load and revenue and I would guess every retail site wants to increase their revenue using established best practices like compressing text and images, combining JavaScript and CSS, using a CDN, and other tools mentioned in Strangeloop’s report.

Strangely, according to the report, most sites failed to implement these.

Read More

01.16.2012 By

Smashing Magazine - Dyn

Looking At Smashing Magazine’s Web Redesign & Resulting Performance Loss

I’m always eager to see a major website’s approach to a site redesign. Any site that focuses on best practices for front end coding and design will take interesting approaches to incorporating emerging technologies and styles and it’s something that the front end development community always learns from.

We also are fairly quick to jump on things about redesigns that are buggy or faulty, which is why I’m surprised that Smashing Magazine‘s recent redesign overlooked one pretty big issue that could have easily been prevented.

Read More

12.15.2011 By

CSSOff - Lara Swanson

How To Create A Countdown Clock With CSS3

I had my first opportunity to code some CSS3 animations for November’s CSSOff, which is “a competition for front-end developers to show off their skills in a no holds barred display of CSS and markup skills.”

Part of the competition centered around creating a countdown clock. In an attempt to break out from the pack, I decided to keep it CSS-only, which I found out later was fairly unique. Post-competition, I saw others’ completed challenges and similar clocks used Javascript to create it.

My goal was to stay as semantic as possible and to learn more about animations and transitions using CSS. Below is the HTML markup for the clock and the explanation for my methods.

Read More

11.21.2011 By

header-gradient

Email Marketing Development: A New Way To Create Gradients

Email design and coding requires an awareness of email client limitations rather than web browser standards, so when I was assigned the task of creating a new email newsletter template, I thought it was a good idea to start with a review of email CSS support.

Since emails are coded using tables, it helped to sketch a table-based layout design before creating the mockup in Photoshop. With a background in web design, I can get quite opinionated about aesthetics even when I know the extra visual details may make cross-browser compatibility more challenging and time consuming. My email template design contained subtle gradients that would make cross email client compatibility even more difficult.

Once the design mockup was approved, it took some trial and error experiments in a code editor to figure out the right solution for the gradients and then some painstaking planning before the real coding began.

What I came up with was a new way to create email gradients.

Read More

11.15.2011 By

Dyn Mobile Experience

Web Development Tips For Navigation In Responsive Design

We coded Dyn.com’s HTML and CSS to respond well to different screen sizes because it was important to us that the site remain intuitive and easy to use on any device and in any orientation. We made sure it loads fast and that users can quickly find what they’re looking for, using media queries to shift and redesign our WordPress templates to make sure they flowed nicely at different sizes.

One of the most important parts of a responsive design is navigation and it can be really tricky to figure out what navigation should be removed, where it should live and how it should look among the rest of the content. We did a lot more in our media queries than just restyle and reorganize the navigation on our pages, but I want to dig in to our process for deciding how the navigation would change at different screen sizes.

From the planning to the execution, here’s how we attacked the navigation on Dyn.com from all experiences.

Read More

11.08.2011 By

Dyn Cookies

How To Use Cookies To Better Understand Your Customers’ Needs

Every online business wants to cater to their customers’ needs in the most effective way possible. Sometimes that means knowing your target audience better as a whole, but sometimes it means knowing a little more about your customers as individuals. Nowadays, there are all sorts of paid software and services to help better understand your online customers by tracking their behavior and spending habits on your site.

However, there are some great cost-effective ways to help you monitor your online users as well. One of the most useful ways is to utilize cookies, which are a great non-invasive way to gather information about visitor behavior on your website and learn how to improve their user experience at the same time.

Read More

10.19.2011 By

Web Development Best Practices: What’s An Ideal Page Weight?

I recently came across an interesting poll on CSS-Tricks about the ideal page weight/size for today’s modern web design. We worked really hard at optimizing the front end of this very site for page load time, using asynchronous assets, CSS sprites and tons of other things to create a happy user experience, but I’d never thought about the total page size ’til now!

So I opened Firebug to check out Dyn.com, which clocked in at 195.9K and could change a few kilobytes per day depending on the featured images we have on our homepage. Chris Coyier suggests that very few sites today come in at under 200K which “used to be a common goal”.

Used to be? Why can’t it still be?

Read More

08.22.2011 By

Clean HTML Code

How We Improved Page Speed By Cleaning CSS, HTML and Images

Page load time is a big part of the user experience.

Site speed can make or break conversion rates and impact your site’s revenue, so keep your page load time low by writing code semantically, use best practices and routinely cleaning up your CSS, HTML and images.

The root issue of heavy page load is typically poor planning at the beginning of a project or poor planning for routine site updates. For example: if a developer didn’t realize a block of content would be reused on another page, additional classes and ID’s may be added to “make it work” in the additional design. If a designer hasn’t created a master style guide for a site, tons of different hexadecimal color codes or RGB values may be used for the same purpose throughout the main CSS stylesheet. If pages involving unique designs are removed, their originally well-coded CSS may be left behind for all visitors to continue to download.

Page load time will increase as a site ages or as more hands are involved. Page size creep is a natural part of site growth, so we need to make this routine cleaning a natural part of the workflow to ensure a positive user experience.

Let’s get started!

Read More

08.03.2011 By

Welcome To The New Dyn.com!

It’s a big day for celebration here at Dyn as we officially unify DynDNS.com and Dyn.com!

You’ll notice some major changes in the design and content of the site as we’ve worked hard to make it even easier to learn about what we offer and how our products will be the solution that you’re looking for.

We’ve also been careful about retaining the DynDNS user experience: Sign In and Cart are still in the top right, while the Checkout process and account management still live on DynDNS.com. However, you’ll find that some old DynDNS pages are now being redirected to their new siblings on Dyn.com.

Read More

06.16.2011 By

How Dyn Launched A Page That Earned A Surprising 6x Anticipated Revenue

A few months ago, we launched a new page on our site. I’ll be honest that it’s not something that I thought would have a huge effect and I didn’t think that people would ever notice it.

I couldn’t have been more wrong.

The new page is performing incredibly well, earning six times as much revenue as I initially guessed. This project is a testament to how important it is to remind your customers how much you appreciate them and how imperative it is to take risks.

Read More