aetles + webdesign   119

CSS Pseudo-Elements and Transforms: My Favorite CSS Tools | Lullabot
Six years ago, if you would have asked me how much I used transform and pseudo-content, I would have told you ‘I don’t.’ Now, I use them a hundred times on large projects, and I can’t think of a project of any size in recent years when I haven’t used these tools to accomplish visual effects, animations, and slick, flexible layout solutions.
css  webdevelopment  webdesign 
june 2018 by Aetles
How To Enforce Code Standards In WordPress Development Using Composer
As a follow up to that article, I’d like to show you, technically how you can implement and adhere to a set standard, such as psr-2 or even the WordPress coding standards. You can do this using a tool called PHP Code Sniffer, in this article I’ll show you how to use this and other tools to test that your code follows these rules and fix most deviations automatically. Also, we’ll lint the code too.
php  programming  webdesign  webdevelopment  wordpress  tools 
january 2018 by Aetles
11 Awesome WordPress Page Builders to Cut Out Coding
A Quick List of the Best WordPress Page Builder Options
We’ll talk about each of the WordPress page builders in-depth, but if you’d like to try them out right away, feel free to click through the list below.

Elementor
GeneratePress with Sections
Beaver Builder
Divi
Themify Builder
Page Builder by SiteOrigin
Visual Composer
Page Builder Sandwich
Oxygen
Live Composer
Visual Page Builder from MotoPress
Find the Best WordPress Page Builder for Your Website
Quite a few WordPress page builders exist on the internet, and this makes it rather tricky when it comes to choosing one. The good news is that we’ve whittled down your choices to ones that have excellent ratings and incredible features based on our tests.

It’s also important to us that the page builders are compatible with most WordPress themes. So, we’ll outline the best of the best and talk about some of the situations in which you might consider one WordPress page builder over another.
wordpress  pagebuilders  webdevelopment  webdesign 
december 2017 by Aetles
dwyl/learn-tachyons: Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS!
Learn how to use Tachyons to craft beautiful, 100% responsive, functional and fast User Interface/Experience (UI/UX) with minimal CSS in much less time.
tachyons  css  webdevelopment  webdesign  framework 
october 2017 by Aetles
tachyons tldr
quick lookup for tachyon classes, scales and colour palette
code  css  framework  webdevelopment  webdesign 
october 2017 by Aetles
Khroma - The AI color tool for designers
Discover, search, & save color combinations you'll love.

Make it yours

By choosing a set of 50 colors, you'll train a neural network powered algorithm to generate colors you like and block ones you don’t, right in your browser.

Browse infinite combos

Khroma has learned from thousands of the most popular human-made palettes accross the internet to produce great combos. Browse as typography, swatch, gradient, palette, or image.
colors  design  webdesign  tools 
september 2017 by Aetles
Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh
CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. This guide was created as a resource to help you better understand and learn Grid, and was organized in a way I thought made the most sense when learning it.
css  grid  web  webdevelopment  webdesign 
may 2017 by Aetles
Grid Garden - A game for learning CSS grid
Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.
css  grid  web  webdesign  webdevelopment 
may 2017 by Aetles
Grid by Example
Everything you need to learn CSS Grid Layout
css  grid  webdesign  webdevelopment 
may 2017 by Aetles
Pinegrow Web Editor | Website Builder for Professionals
a desktop app that lets you build responsive websites faster with live multi-page editing, CSS styling and smart components for Bootstrap, Foundation, AngularJS and WordPress.
app  editor  webdesign  wordpress  tools  webdevelopment 
may 2017 by Aetles
Diverse UI
Diverse UI is a free set of user images that can be used in personal or commercial projects.

We built Diverse UI because who we assume our users are, and how we represent that in our visuals, affects who those users turn out to be. We want those users to be diverse. For more information, we wrote a blog post about why we think diversity in UI mockups is important.
design  ui  photos  diversity  mockup  webdevelopment  webdesign 
april 2017 by Aetles
Color fonts! WTF? 🌈
They are the next big thing in graphic design
They bring multiple colors, shades, textures and transparency to type 
They include vector shapes, bitmap images or even both into font files
color  typography  fonts  webdesign  design 
march 2017 by Aetles
Learn CSS Grid | Jen Simmons
People are starting to ask: where can I learn about CSS Grid?

There are a lot of fantastic resources out there. When it comes to the technical how-to, most of what’s out there was written by Rachel Andrew. If you don’t know her work, take some time to get to know her and follow her.

So here are the links to resources I recommend. I will keep updating this list:
css  design  grid  webdevelopment  webdesign 
february 2017 by Aetles
Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
For example, line-height can be set as a length or a unitless value 1, but the default is normal. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that point. We know that unitless line-height is font-size relative, but the problem is that font-size: 100px behaves differently across font-families, so is line-height always the same or different? Is it really between 1 and 1.2? And vertical-align, what are its implications regarding line-height?
Deep dive into a not-so-simple CSS mechanism…
css  font  line-height  typography  webdevelopment  webdesign 
february 2017 by Aetles
Great Alternatives to Hamburger Menus
This is a much debated topic and while designers, developers mostly agree on when it is a good idea to use a navigational drawer and when not there are still a lot of mobile apps that rely on this pattern. It usually boils down to the fact that there is no place to put navigation on a small screen, because it lacks a well thought out information architecture or just because of the sheer amount of content.
If your app gets too complex, think about unbundling. Look at what Facebook did with Messenger. They broke out functionality around key actions and put it in their own separate app.
Hamburger menus drive engagement down, slow down exploration and confuse people. If you are reading this, it won’t confuse you, but it damn will confuse others who might be happy to consume your content.
ui  ux  webdevelopment  webdesign  userinterface  userexperience  navigation 
february 2017 by Aetles
nishanths/zoom.js: Medium's Image Zoom (no dependencies, IE 10+)
A pure JavaScript image zooming plugin; as seen on Medium.com.

Has no dependencies on jQuery or Bootstrap.
webdevelopment  webdesign  images  javascript 
january 2017 by Aetles
Google Web Designer
Create engaging, interactive HTML5-based designs and motion graphics that can run on any device.
design  web  google  webdesign  webdevelopment 
december 2016 by Aetles
Create a logo with Affinity Designer | Creative Bloq
Affinity's Dale Cook walks through how to use this popular new design software to create, adjust and export a unique logo.
design  mac  webdevelopment  webdesign 
december 2016 by Aetles
Sans Francisco
A collection of tools to help designers craft delightful experiences.
design  tools  webdevelopment  webdesign 
september 2016 by Aetles
Cool CSS Text Effects - 20 Amazing Examples
CSS3 is considered to be a true revolution when it comes to web development. The new properties contained in CSS3 allow developers to visually enhance their designs in such a way that is not only impressive in a visual sense, but is also quick and easy.
Web typography is one major thing that has dramatically changed with CSS3. You can make your design look attractive with typography and make everything visually appealing.
When it comes to web design, CSS will help you to obtain many different font effects, including using such effects as animation and clipping to spice things up a bit.
To help further illustrate this, we’ve put together a list of effects that are visually stunning and beautiful, all of which are made possible through CSS, and some of them with a little bit of Javascript as well.
css  text  webdesign  animation  typography  webdevelopment 
september 2016 by Aetles
Adactio: Journal—Hamburger, hamburger, hamburger
Now that we’ve established the three criteria for evaluating an icon’s effectiveness, let’s see how the hamburger icon stacks up (if you’ll pardon the pun):
Representation: It depends. Is it representing a stacked list of menu items? If so, good. If not, reconsider.
Usage: it depends. Is it being used as an excuse to throw literally all your navigation behind it? If so, reconsider. Prioritise. Decide what needs to be visible, and what can be tucked away.
Clarity: it depends. Is the icon labelled? If so, good. If not, less good.
So there you go. The answer to the question “Is the hamburger icon good or bad?” is a resounding and clear “It depends.”
design  ux  webdevelopment  webdesign  interface 
february 2016 by Aetles
The Ten Most Popular Web Fonts of 2015 (And Fonts You Should Consider Using Instead) → Typewolf
Welcome to the third annual edition of the ten most popular web fonts of the year as featured on Typewolf. Based on font usage data from 365 websites featured over 2015, these are the ten fonts that were used the most often. You can check out the previous year’s lists for 2014 and 2013 as well.

While reviewing the data for this year, I noticed something a little disconcerting: this year’s top ten list is almost identical to the top ten list from 2014. Other than swapping out Franklin Gothic with Brown, these are exactly the same ten fonts that were featured the most on Typewolf last year.

I curate all the sites featured on Typewolf – so I may be partially to blame for this – however, the sites I feature tend to be a solid representation of what is popular in the design community. About one-third of the sites featured are submissions that people send to me while the remaining two-thirds are sites that I find featured on other popular design gallery sites, Designer News, Twitter, etc. Overall, I think this list generally shows what fonts are most popular with designers at the moment.

So in the spirit of hopefully making type a little more diverse on the web, I decided to list four alternatives for each of the ten fonts featured here. The alternatives all fit a similar aesthetic yet aren’t used quite as much. They may be worth looking into if you want to stand out a little from the crowd.

As always, this is an independent source of data that includes all fonts regardless of where the fonts can be purchased (including indie foundries that don’t make their fonts available on popular services such as MyFonts and Typekit).

Ok, on to the top ten!
design  fonts  typography  webdevelopment  webdesign  webfonts 
january 2016 by Aetles
Simple Icons
124 Svg Icons For Popular Brands
webdesign  icons  logos  svg 
october 2015 by Aetles
How to Get Pixel-Perfect Designs in Adobe Illustrator : Medialoot
Pixels are not what most designers are thinking about when they launch Adobe Illustrator, but there are some pretty awesome things Illustrator can do with them. By default Illustrator is set up to be a resolution independent vector drawing and print layout tool — in short, not for pixels — but in this tutorial we will go over a few techniques which can add pixel-perfect design to it's list of uses.
As regular Medialoot visitors will know, I have previously posted a few articles discussing the advantages of using Fireworks instead of Photoshop for certain design tasks, this tutorial will hopefully do something similar for Illustrator by demonstrating it's widely unknown ability to work well with pixels.
illustrator  tips  tutorials  pixels  webdesign  design 
september 2015 by Aetles
Flexbox Cheatsheet Cheatsheet
I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? decision tree-ish thing?) that is a cheatsheet...based on cheatsheets.
css  flexbox  webdevelopment  webdesign 
september 2015 by Aetles
Color Hunt
Color Hunt is a curated collection of beautiful colors, updated daily.
We collect and bring you the best color schemes you can use for anything.
By creating smart and simple compositions of several tones, we provide beautiful palettes of colors that work together.
colors  design  webdesign 
august 2015 by Aetles
The Language of Modular Design · An A List Apart Article
Start with language
Language is fundamental to collaboration. In her book How to Make Sense of Any Mess, Abby Covert says that the biggest obstacle teams face is the lack of a shared language. To help establish that shared language, she suggests that we discuss, vet, and document our ontological decisions in the form of “controlled vocabularies.”

In short, we should start with language, not interfaces.

For about a year now, our team at FutureLearn, an open education platform, has been experimenting with a modular approach. I’d like to share a few ways we have tried to hone a shared language to help our team transition into modular design.
css  design  webdesign  webdevelopment  ui 
august 2015 by Aetles
LukeW | Dropdowns Should be the UI of Last Resort
All too often mobile forms make use of dropdown menus for input when simpler or more appropriate controls would work better. Here's several alternatives to dropdowns to consider in your designs and why.
design  ux  ui  webdevelopment  webdesign 
july 2015 by Aetles
ish. yet another viewport resizer.
I’m happy to introduce ish. 2.0. For the uninitiated, ish. is yet another viewport resizing tool. It’s called “ish.” because it focuses on general ranges (small-ish. medium-ish. large-ish.), rather than popular device widths. It’s our jobs as web designers to make sure our interfaces look and function across all screen sizes, and ish. is here to help.
css  design  webdesign  webdevelopment 
june 2015 by Aetles
The PLAY button is not optical alignment — Medium
Lots of people say that you can not center align the play button,the physics center is not the visual center . Well,actually I think you can,the key is to find the real center of the triangle.
design  ui  ux  webdesign 
june 2015 by Aetles
Solved by Flexbox — Cleaner, hack-free CSS
CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.

Finally, thanks to Flexbox, we have a solution.

This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser.

Check out the demos below. View the styles in the Web inspector or dive into the source to see just how easy CSS layout will become once Flexbox becomes mainstream.
css  design  layout  flexbox  webdevelopment  webdesign 
may 2015 by Aetles
LukeW | There Is No Fold
On the Web, people use the concept of “above the fold” to support layout decisions, call to action designs, ad placements, and more. Here’s why most of these arguments don’t fly.
design  fold  webdesign  ux  webdevelopment 
april 2015 by Aetles
LukeW | Obvious Always Wins
It’s tempting to rely on menu controls in order to simplify mobile interface designs —especially on small screens. But hiding critical parts of an application behind these kinds of menus could negatively impact usage.
design  ux  navigation  webdevelopment  webdesign 
april 2015 by Aetles
CSS Flexbox
Curated collection of CSS Flexbox related articles, tips and resources
css  css3  flexbox  webdevelopment  webdesign 
april 2015 by Aetles
Do you really understand CSS linear-gradients? — Medium
Want a nice gradient background on your site?
background-image: linear-gradient(red, blue);
BOOM, done!

Ok, it’s a little boring. So if you want more, I recommend this css-tricks article and MDN page.

Still here? Alright, let’s go and have a look at some of the details of how linear-gradients actually work.
css  css3  gradients  webdevelopment  webdesign 
april 2015 by Aetles
Flat Color Icons | Icons8
312 free icons for personal and commercial use. No credits required.
design  icons  webdesign  webdevelopment 
april 2015 by Aetles
Harnessing Flexbox For Today's Web Apps - Smashing Magazine
Although the syntax might be initially confounding, flexbox lives up to its name. It creates intelligent boxes that are stretchable, squeezable and capable of changing visual order. It provides simple solutions to layout paradigms that CSS has always struggled with: vertical centering and equal heights. Flex items are truly accommodating and a pleasure to work with.
css  css3  design  flexbox  webdevelopment  webdesign 
march 2015 by Aetles
It’s Only Color
Working with color while designing is really about creating another dimension in your medium. Choosing a successful palette creates a foundation for adding meaning and hierarchy to your design. Although it may seem overwhelming at first, choosing a palette can be a very straightforward process.

I’ve found that three colors are all you need – and choosing them doesn’t have to be arduous. Equally, putting them to use shouldn’t be stressful. In this post I’ll introduce some basic color theory and share a few tips I’ve learned along the way. Hopefully, it will help inform your choice and use of color – enjoy.
color  design  webdesign 
march 2015 by Aetles
Gridset | Fully-custom grids for responsive layouts
Gridset for design
Designing grids with Gridset is as easy as dragging guides in Photoshop or Fireworks. Gridset provides whatever you need: PNGs, a comprehensive cheat sheet and CSS.
Gridset for prototyping
Put the calculator back in the drawer. By simply adding classes to your HTML, Gridset allows you to build responsive prototypes fast, without doing any maths.
Gridset for production
Gridset provides all the measurements and tools you’ll need to integrate with your existing markup, without the need for any new classes or HTML.
css  design  grid  webdesign  webdevelopment 
february 2015 by Aetles
Number off-center in notification bubble - meta - Atom Discussion
braver11d
Yeah, this is basically just a nightmare in CSS. Most fonts are made to sit on a line, not in the middle of a box. CSS however somehow wants to have them in the middle of the "line-height", a concept that didn't previously exist. So while fonts are drawn in a box, that box doesn't need to be filled fully and there was previously no reason for that box to have the same amount of space at the top as it has at the bottom: as long as it sits on the baseline it used to be fine. Most fonts we still use, like Helvetica (1957) or Courier (1955), are pretty much ancient.
This creates problems: a font might not visually sit in the vertical middle of a box in CSS. In fact, it may vary wildely between fonts (i.e. Helvetica,Arial,sans-serif could go all over the place depending on the font selected).
In my experience Safari on OS X is very reliable, perhaps because compensates for a lot of fonts. The rest is basically a crap-shoot and you're left making presumptions about sizes and relative amounts of padding required.

So there is no right way, frustratingly. Safari implements it in accordance with the intention of CSS in a way you can actually make stuff look right. Font rendering on Apple software is still ages beyond the rest in every possible way. The others are perhaps more "straight" but in a way that's almost impossible to work with.
webfonts  fonts  css  design  webdesign 
february 2015 by Aetles
Grunticon
Grunticon is a Grunt.js task that makes it easy to use SVGs (Scalable Vector Graphics) for crisp, resolution independent icons, logos, illustrations and background images. SVGs aren't supported everywhere so Grunticon auto-generates bitmap (PNG) fallback images and loads the right format for compatibility with pretty much any browser.
grunt  svg  icons  webdevelopment  webdesign 
february 2015 by Aetles
Entypo
What is Entypo+?
Entypo+ is the third version of a free suite of premium quality pictograms. It’s released under the license CC BY-SA 4.0. Each pictogram has been drawn for pixel perfection at a size of 20 x 20 pixels and with a very consistent style. The difference between this version of Entypo and previous ones is that the suite now only consist of SVG images. There is no fonts or PSD.
design  fonts  typography  icons  webdesign  webdevelopment 
february 2015 by Aetles
Inspiration for Text Input Effects | Codrops
Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements.
css  design  forms  webdesign  webdevelopment 
january 2015 by Aetles
PhotoSwipe
I’m excited to announce the new PhotoSwipe – fullscreen JavaScript image gallery, just like native.

Core features of new PhotoSwipe include:

image zoom for desktop and mobile (multi-touch)
advanced gestures, like pinch or vertical swipe to close
script is modular, you can exclude parts that you don't need
default UI is optimised for desktop, for mobile and for devices with mixed input types (like Chromebook Pixel or Surface)
pure Vanilla JS (no depencies, no jQuery required!)
IE 8 support (just basic functionality)
gallery  image  javascript  webdevelopment  webdesign 
december 2014 by Aetles
PaymentFont
A sleek SVG webfont containing 74 icons of all main payment operators and methods
fonts  icons  webdevelopment  webdesign 
december 2014 by Aetles
Google Web Fonts Typographic Project
HAND-PICKED TALES from
ÆSOP’S FABLES
with HAND-PICKED TYPE from
GOOGLE FONTS
There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the 25x52 initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.
design  fonts  typography  webdesign  webfonts 
december 2014 by Aetles
Color Template
How do you choose the right colors for your designs?
design  colors  webdesign  webdevelopment 
july 2014 by Aetles
Design+code: Learn iOS design and Xcode
Design isn't hard to learn. That's because most of us are already building products and are familiar with what design means. What used to be complex and confusing is now simple and effective, thanks to Sketch, an app that is entirely focused on user interface design. Unlike Photoshop, you don't need to worry about photo editing and the hundreds of other settings that are noises to designing a simple application.

Sketch uses one unit, styles only relevant to UI design, a built-in iPhone previewing tool called Mirror and Artboards, the most efficient way to template multiple screens.
Everything is already in vector, so you don't have to worry about designing for multiple devices. And delivering assets is a breeze.

It's only been one year since Sketch has completely changed my design workflow. As a design application that I spend 8 hours a day on, there is no other tool that has influenced my life more than Sketch. The growth that I see for Sketch is out of this world; new resources and plugins are coming out almost on a daily basis. This tiny team of 4 is innovating at a faster rate than the gigantic team building Photoshop.
design  graphics  webdesign 
april 2014 by Aetles
Solved By Flexbox — Cleaner, hack-free CSS
CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.

Finally, thanks to Flexbox, we have a solution.

This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser.

Check out the demos below. View the styles in the Web inspector or dive into the source to see just how easy CSS layout will become once Flexbox becomes mainstream.
css  css3  webdesign  webdevelopment 
march 2014 by Aetles
Why “Simple” Websites Are Scientifically Superior — Design / UX — Medium
In a study by Google in August of 2012, researchers found that not only will users judge websites as beautiful or not within 1/50th — 1/20th of a second, but also that “visually complex” websites are consistently rated as less beautiful than their simpler counterparts

Moreover, “highly prototypical” sites — those with layouts commonly associated with sites of its category — with simple visual design were rated as the most beautiful across the board.

In other words, the study found the simpler the design, the better.

But why?

In this article, we’ll examine why things like cognitive fluency and visual information processing theory can play a critical role in simplifying your web design & how a simpler design could lead to more conversions.

We’ll also look at a few case studies of sites that simplified their design, and how it improved their conversion rate, as well as give a few pointers to simplify your own design.
design  webdesign  webdevelopment 
march 2014 by Aetles
CSS polyfills from the future | GSS
GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.
css  webdevelopment  grid  layout  webdesign 
march 2014 by Aetles
The Ten Most Popular Web Fonts of 2013 — Type & Grids
The use of web fonts has continued to explode in 2013 – designers are no longer content with using standard system fonts like Arial and Georgia. On my side project Typewolf, I categorize the latest website designs by the web fonts they use. These are the ten most popular fonts I’ve noticed from analyzing font usage on Typewolf in 2013.
design  fonts  typography  webdesign  webfonts 
february 2014 by Aetles
coreysyms/foundationStickyFooter
Easily add in a "sticky footer" to your site, works great with Foundation or just as is.
foundation  webdesign  web  development  css  javascript 
february 2014 by Aetles
Liquidapsive (Liqui-dap-sive)
Ever wondered what the difference between Adaptive, Responsive, Static and Liquid sites is? Had someone try and explain it only to be left more confused?

Pick a flavor from the drop down on the top of the page then drag your window narrower and wider, taller and shorter. It will make much more sense when you see for yourself how the approach works.
design  webdesign  responsivedesign  rwd 
february 2014 by Aetles
Why flags do not represent languages | Flags are not languages
Why flags do not represent languages

Flags are symbols that represent countries or nations.

Languages represent a shared method of communication between people.

Flags are unique to a country or nation: but languages are often spoken across national borders. By using a flag for a language, you may confuse or even offend users.
languages  webdesign  webdevelopment 
december 2013 by Aetles
colourcode - find your colour scheme
Pick colours based on hsl. Scheme-mode with monochromatic, analogic, complement, triad and quad colours.
color  design  webdesign  colors  inspiration 
november 2013 by Aetles
Spur - A fun and easy way to critique a webpage.
A fun and easy way to critique your web pages.

What is Spur?
Spur is a fun and easy way to critique web designs in ways you’ve never done before. Just paste a URL (or upload an image) and you’ll be able to use seven different tools to help you find what’s working (and what isn’t!).
design  usability  webdesign  testing  tools  web 
october 2013 by Aetles
The Theme Foundry
Handcrafted with care since 2008.

We're obsessed with building beautiful and functional template designs (themes) to use with your WordPress powered website. We'll worry about the design details and clean code so you can stay focused on writing great content and running your business.
design  themes  webdesign  wordpress 
october 2013 by Aetles
Emmet LiveStyle — live bi-directional CSS edit of new generation
Emmet LiveStyle is a plugin for live bi-directional (editor↔browser) CSS editing of new generation. Currently, it works in Google Chrome, Safari and Sublime Text, more browsers and editors will be available later.
css  plugin  chrome  webdevelopment  webdesign  inspector 
august 2013 by Aetles
Typewolf — Typographic Inspiration for the Modern Web
Typewolf is a curated design showcase that identifies the fonts used in the design. Our goal is to serve as a one-stop resource for designers seeking typographic inspiration for the modern web.
design  typography  web  webdesign 
august 2013 by Aetles
magic css3 animations
Magic is a CSS3 framework with many animations. Is simple to use and many animations are cross-browser compatible.
css  css3  animation  webdesign  webdevelopment 
june 2013 by Aetles
Handy Sass Mixins - Web Design Weekly
Mixins are one of the most powerful features of Sass. Mixins allow for efficient and clean code repetitions as well as an easy way to adjust your code with ease. If you are using Sass in your development workflow, no doubt you are using some of the mixins that I have covered below but some might also be new and helpful.
css  webdesign  sass  webdevelopment 
may 2013 by Aetles
A Collection of Page Transitions | Codrops
Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics.
Please note that this is just for showcasing some interesting effects and for inspiration. It is not a slider or anything like that. We’ll just apply some classes to make the page transition visible, not for navigating.
The CSS animations are divided into different sets, depending on what they do.
css  css3  webdesign  animation 
may 2013 by Aetles
Reuters News
We are building a new site and invite you to explore a preview of it. Our new approach will let readers focus on the world's best reporting, photojournalism, market data, video and opinion, all delivered with the context that you need. Let us know what you think.
design  news  webdesign  inspiration 
may 2013 by Aetles
Responsive Retrofitting - Web Standards Sherpa
What Is Retrofitting?
Responsive web design has changed the way standards-loving-web-makers across the internet think about building the web. Embracing the fluid nature of our medium is really about creating sites that give more access to more people, regardless of device or screen size. Those of us who believe in these underlying tenants — web standards, accessibility and content priority — tend to be idealists. But the reality is we work in a not-so-ideal world.

Responsive retrofitting, at it’s core, is about compromise for this reality. It’s about finding a way to use responsive techniques on legacy sites to create a better experience for more users. While most of us probably agree that the web is never really done, we often choose “File > New” over a steady evolution of our sites. The truth is, we don’t always get to start over. This article is about putting our users first, taking small steps toward a more universal experience and understanding when doing so is the right approach.

Welcome to responsive retrofitting.
webdesign  rwd  css 
april 2013 by Aetles
Litmus Scope
LITMUS SCOPE
SHARE EMAILS FAST
Create a clean, web-based version of any email, with desktop and mobile previews.
It's perfect for sharing, and it's totally free.
design  email  newsletter  webdesign  bookmarklet 
april 2013 by Aetles
A Good User Interface
A Good User Interface
has high conversion rates and is easy to use. In other words, it's nice to both the business side as well as the people using it. Here is a running list of practical ideas to try out.
design  ux  ui  webdesign  webdevelopment 
april 2013 by Aetles
FavIcon from Pics -- free, instant favicon for your site
Brand your page with a custom icon in the address bar.
design  webdesign  tools  favicon 
april 2013 by Aetles
Put the logo below the fold: Breaking design rules for profit. | Studio Fellow Blog
I’ve had to relearn certain aspects of design now that I’m running my own business. I’m making decisions I’d have considered a major error only a short time ago. Like putting the logo below the fold. Or using a color that doesn’t match the rest of the palette on purpose. On purpose!
design  business  webdesign 
march 2013 by Aetles
Font Custom
Generate custom icon webfonts from the comfort of the command line.
css  webfonts  fonts  webdesign  icons 
march 2013 by Aetles
The Era of Symbol Fonts · An A List Apart Article
Improving performance is a constant process. First we ditched tables, spacer gifs, and inline markup such as the <font> element in favor of CSS, reducing page sizes, and separating style from layout. Then we became aware of all our DNS requests, caching, and the total number of files and started using CSS sprites, moving many small images out of the HTML and into a single background image.

Embedding a symbol font lets us move some of those tiny icons into a single font file rather than a sprite. This has the same caching and file size benefits as a CSS sprite, as well as some additional benefits we’re only now realizing with high-resolution displays. In this article, I’ll walk you through some of the advantages and issues you’ll encounter when using a symbol font.
font  fonts  webdesign  icons  webfonts 
march 2013 by Aetles
Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad | ConversionXL
I’m sure you’ve come across dozens, if not hundreds of image sliders or carousels (also called ‘rotating offers’). You might even like them. But the truth is that they’re conversion killers.
carousels  sliders  design  ux  ui  webdesign 
february 2013 by Aetles
Re: Re: Sponsive Design — Part I — vanSchneider Blog
A lot of examples of RWD actually impact the user experience, providing an inconsistent desktop experience. When we scale the browser, the layout changes, content changes and the hierarchy isn't the same anymore. This is more confusing than helpful. Let's continue to experiment and push the boundaries, but we need to think a little more when a client next screams "...and it needs to be responsive". Everything we do should be well designed and thought through. Right now RWD feels more like a bandaid trying to kill two birds with one stone.
responsivedesign  rwd  design  webdesign  webdevelopment 
february 2013 by Aetles
No One's Forgotten How to Pinch and Zoom | Jack Smith - Journal & Portfolio
In my opinion, brilliant design at a traditional desktop size is a better experience on mobile than mediocre or rushed responsive design. Pinch and zoom can work.
responsivedesign  rwd  webdesign  webdevelopment 
february 2013 by Aetles
« earlier      
per page:    204080120160

related tags

ads  animation  användarvänlighet  app  banners  bookmarklet  brushes  business  buttons  carousels  chrome  code  color  colors  compass  css  css3  design  designprocess  development  diversity  drupal  editor  email  favicon  fireworks  flexbox  fold  font  fonts  forms  foundation  framework  gallery  google  gradients  graphics  grid  grunt  html  html5  icons  ie  ikoner  illustrator  image  images  inline  inspector  inspiration  interface  ipad  ipadmini  javascript  languages  layout  less  lightbox  line-height  logos  mac  menus  mobile  mobiledesign  mobileweb  mockup  navigation  news  newsletter  optimization  pagebuilders  performance  photos  photoshop  php  pixels  plugin  presentation  programming  reset  respo  responsivedesign  responsiveness  restaurants  retina  rwd  sass  screen  sliders  standards  svg  symbols  tachyons  testing  text  textures  themes  tips  toolkit  tools  tutorials  typography  ui  usability  userexperience  userinterface  ux  web  webbdesign  Webbutveckling  webdesign  webdevelopment  webfonts  wireframes  wordpress  work 

Copy this bookmark:



description:


tags: