Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Tools’.

We are pleased to present below all posts tagged with ‘Tools’.

Revisiting Firefox’s DevTools

If you do any kind of development for the web, then you know how important tools are, and you like finding tools that make your life easier. Developing and testing new browser features, however, takes time. Between the time a useful tool first appears in an experimental nightly build and the time it’s available for everyone to use in Firefox, a while has passed.

Revisiting Firefox’s DevTools

That’s one of the reasons Mozilla released Firefox Developer Edition in November 2014 as the recommended Firefox browser for developers. It gets new feature updates more quickly so that you can use the latest tools.

Read more...

Website Layout Tools Compared: Flexbox Vs. Susy

Flexbox has become one of the most popular tools for creating website layouts. Susy is another layout tool that has gained popularity with the Sass community over the last few years.

Website Layout Tools Compared: Flexbox Vs. Susy

Many developers I’ve spoken with are unsure which tool is best for creating layouts for their websites. Some feel that flexbox is powerful enough to handle all of their layout problems. However, they are unsure whether to learn it because of its confusing syntax. Others feel that Susy is much simpler and prefer its simplicity to flexbox.

Read more...

Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo

Static website generation is quickly becoming a big part of the professional website builder’s toolbox. A new static website generator seems to pop up every week. Figuring out which one to use can be like a walk in the jungle.

Building The Web App For Unicef's Tap Campaign: A Case Study

In the last article, I looked at why static website generation is growing in popularity, and I gave a high-level overview of all of the components of a modern generator. In this article, we’ll look at four popular static website generators — Jekyll, Middleman, Roots, Hugo — in far more detail. This should give you a great starting point for finding the right one for your project.

Read more...

Why Static Website Generators Are The Next Big Thing

At StaticGen, our open-source directory of static website generators, we’ve kept track of more than a hundred generators for more than a year now, and we’ve seen both the volume and popularity of these projects take off incredibly on GitHub during that time, going from just 50 to more than 100 generators and a total of more than 100,000 stars for static website generator repositories.

Why Static Website Generators Are The Next Big Thing

Influential design-focused companies such as Nest and MailChimp now use static website generators for their primary websites. Vox Media has built a whole publishing system around Middleman. Carrot, a large New York agency and part of the Vice empire, builds websites for some of the world’s largest brands with its own open-source generator, Roots. And several of Google’s properties, such as “A Year In Search” and Web Fundamentals, are static.

Read more...

Switching From Adobe Fireworks To Sketch: Ten Tips And Tricks

Transitions can be painful. It is in our nature to resist change, even when the possibility of doing something new and different may be exciting. Changing your workflow can be a real challenge if you don’t know where to start or understand how to embark on the change.

Switching From Adobe Fireworks To Sketch: 10 Tips And Tricks

I’ve met with many designers (graphic, interaction, UI, etc.) who stick to old software because they are familiar and in their comfort zone, or because they are too scared to take the “leap of faith” and try something new (even when they know their old software does not allow them to work efficiently and effectively enough).

Read more...

Building Web Software With Make

Most web developers use a build tool of some sort nowadays. I’m not refering to continuous integration software like Jenkins CI (a very popular build system), but the lower-level software it uses to actually acquire dependencies and construct your applications with.

Building Software With Make

There is a dizzying array of options to choose from: Apache Ant (XML-based), Rake (Ruby-based), Grunt (JS-based), Gulp (JS-based), Broccoli (JS-based), NPM (JS-based), Good ol’ shell scripts (although no real orchestration around it). The build tool I want to look at in more detail here though is the granddaddy of them all: Make.

Read more...

How To Prototype UI Animations In Keynote

Whether it’s playful refresh states, subtle icon movements or complex transitions, beautiful animation is all around us. Once considered an aesthetic luxury, animation is now used so commonly in modern web and mobile applications that entire websites are dedicated to UI animation patterns.

Animating In Keynote

While animations may have great visual appeal, they also make app experiences more intuitive and engaging. Animation can make an app feel more fluid and responsive by providing feedback on user interaction. This means that, for designers, creating authentic animations is increasingly becoming a part of the job description.

Read more...

Constructing CSS Quantity Queries On The Fly

Often within a project, the presentation of our content changes based on certain needs. We see this when we use media queries to change our styles based on the user device. CSS quantity queries follow the same concept of changing the styles based on a condition: the condition within a quantity query being the number of sibling elements.

QuantityQueries.com

An example would be navigation where items are 25% wide when four items are available; yet when there are five items available, the width of the navigation items changes to 20%. This is a common problem with dynamic site frameworks like WordPress or Ghost. A client might not realize the complications that could arise, for example, by adding one more menu item when the CSS is not set up to fit it in.

Read more...

Fitting After Effects Into A UX Workflow

We all aim to be as agile as possible in today’s fast-paced web design world, while also remaining thoughtful of the end user and those we work with. After Effects is a great tool that enables us to quickly visualize and test robust animation patterns throughout web design, share those with the development team and clients, and even test variants with users to get quick validation on a design before it goes into production.

Fitting After Effects Into A UX Workflow

Web design transitions and animations, like parallax scrolling, hidden navigation, swiping, pull to refresh, transformations or really any UI transition, are great to prototype in After Effects. In this article, we will be scratching the surface of how to fit After Effects into your UX Workflow, and we’ll share details, advice, experience and links that you could use as influence and thought starters in your next project.

Read more...

↑ Back to top