All posts tagged “Responsive”

Effective Web Typography: Rules, Techniques and Responsive Design

You’re reading Effective Web Typography: Rules, Techniques and Responsive Design, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Effective Web Typography: Rules, Techniques and Responsive

Responsive Web Design isn’t just about columns, grids, images and icons. All of this will not make sense without text for content. As Bill Gates once said “Content is King.” When it comes to content, we need to talk about web typography. Looking at modern web design trends, having responsive typography is a big factor […]



Designmodo

Ultra-Modern Free Responsive Design Agency Theme

Try this free responsive theme for web design agencies or similar content driven sites looking for highly aesthetical look and user-friendliness.
MonsterPost

How to Create a Responsive Email Template

You’re reading How to Create a Responsive Email Template, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

How to Create a Responsive Email Template

Reading emails has never been easy on phones and tablets. Just like modern websites, email newsletter design needs to be optimized for different viewports. Imagine having a non-responsive email newsletter design. It might look good on desktop devices; however, checking it on small screens will look awful with each element misaligned and broken columns. According […]


Designmodo

21 Great Tools for Responsive Web Design

As web designer, we knows that responsive web design had come to stay. You’ve taken your time to build a very beautiful and robust website, with considerable number of traffic to your site from search engines. Then, you come to the reality of devices. Which device will be used to open your website?. What about the height and width of the device? There are thousands of devices, along with several dimemsions and viewports.

21 Great Tools for Responsive Web Design

As web designers, we knows that our design will be viewed from various devices and browsers, and at the same time our blocks of code will be executed by various devices.

There had been massive increase in the number of web enabled devices, coming along with a lot of pixel density, interaction, resolution and so on, also judging by the current trends in technology, there will be more devices with which people can access web.

The fact that responsive web design is necessary for every web does not mean it is as easy as that, considering the fact that, you have to put put several devices into consideration as well as dimensions and viewports. The challenge is that, we have to make an interface that will scale with virtually all devices, from small screen to big screens at the theater hall.

This simply made it imperative for all websites to be responsive to various devices for easy navigation and better user experience.

If you’ve seen one of our past posts on useful responsive web design toolbox, then you know that there are so many tools on the web for responsive web design. But, from my many years of experience as web designer, developer, and consultant, coupled with thorough research which I had done, I will be sharing 21 great tools and resources for responsive web design. Mind you, for designers who are yet to come to terms with responsive web design. I recommend reading Importance and Reasons for Responsive Web Design, you may also ask your question, and an expert will answer you through your email address. After which you can continue here with 21 Great tools for Responsive Web Design.

01. ZURB Foundation

ZURB Foundation

ZURB Foundation is one of the world most accepted and advanced framework for a responsive site. A lot of resources had been spent by ZURB on the framework, in addition to the several effort that had gone to open source project on the framework.

ZURB Foundation has huge enhancement strategy, as you are allowed to increase the layer in complexity based on size of the screen and design capabilities. Not only that, You will also found a comprehensive library consisting of several UI component, making it easier for you to prototype any interface you can imagine.

Visit Website

02. Jetstrap

Jetstrap

There had been massive turn around in wed design process, as wireframe will not show how a particular design will look in several web environment. And coding knowledge is required to make use of some prototyping tools.

This is where Jetstrap comes. It allows designer to quickly assemble prototype simply by dragging and dropping components from the UI to the canvas. Frontend development skills are not required to start, and you will end up with a breathing web page. You only need to use the drag and drop tools on the interface.

Visit Website

03. Responsive Design Weekly

Responsive Design Weekly

Web developer Justin Avery spends time sending dedicated newsletter on resources, tools and techniques for responsive web design. As a designer, I spends part of my time on twitter reading feeds on responsive web design. Some of the feeds involve latest resources, and helpful tips on building a responsive web design. Joining responsive web design discussion from LinkedIn will surely improve you skill and get you latest ideas on current trends in responsive web design.

Visit Website

04. Style Prototype

Style Prototype

Style prototype is an HTML page showing button style, typography, color, photography style, roll over and other elements for a propose site.

One of the main purpose of style prototype is to create deliverables which are useful and replicable. While there are no rules to building a style prototype, you have to include some basic elements, like button style, typography, color and roll over aside from other elements which can be included.

Style prototype allows you to add animation, color, and other elements in web environment.

Visit Website

05. Element Collages

Element Collages

When creating full page mock-ups, one of the hardest thing we have to face as designer is the designing of the minute of each page. Professionally, it is advisable to spent more time designing the hero messages on homepage than spending more time on the rest of the pages.

As a designer, creating your site mockups in photoshop is not advisable with current trends in web development industry, as you have a lot of other things to do.

Founder of agency SuperFriendly Dan Mall had gone a step further in simplifying things with Element Collages.

Element Collages has a very good User Interface for visual exploration of interface components. Collages helps you in the visual direction, and you don’t have to create the entire component by yourself, considering the fact that you are not designing for just one device.

Visit Website

06. Pears

Pears

Some important benefits of frontend style guides involves, allowing for easier testing, better workflow, shared vocabulary, and serving as reference to keep coming back to. Pears is an open source wordpress theme created by Dan for creating guide to frontend style.

Pears makes it easy for designers to utilizes common library for a consistent design system.

Visit Website

07. Icomoon

Icomoon

Retina and other high resolution displays are fast becoming order of the day, bitmap icons doesn’t scale very well with these high resolution devices. Thankfully, the web development industry is equal to the task.

The effective solution to this is to a create resolution independent icon, which can be achieved by creating custom icon font and embedding it with CSS @font-face.

Iconmoon simply makes the process of creating and displaying icon font easy. You will be able to choose from a library of icons, with options to upload your icon. From there, you can then generate you custom icon font and download a package that includes the font and appropriate CSS. When it comes to creating resolution independent icon, Iconmoon is an important tool.

Visit Website

08. Foresight.js

Foresight.js

Various devices has different ways of displaying bitmap images, but as a designer, you must have it in mind that that loading high resolution images can bulk up page weight. Foresight.js detects has the ability to detect device display and connectivity to determine whether to load hi-res components or not.

Visit Website

09. Detector

Detector

Device detection and profiling can be tricky a times, as device library are difficult to manage. Since, feature detection relies on client side detection, so solely depending on it can bring some limitation in flexibility when delivering functionality to wide range of devices.

This leads to creation of detector by Dave Olsen, using PHP script, and browser based on Javascript, along with a host of feature detection library. The library users modernizr and user-agent detection to determine device classes. Detector has the ability to adapt to new devices and browsers on its own without any need to pull from central database of browser information.

Visit Website

10. Enquire.js

Enquire.js

Every designer knows the important of using media queries in CSS. Then what happen when you want to alters some experiences at a certain point? These can be easily accomplished Enquire.js script.

Enquire.js script uses uses matchmedia to conditionally execute some functions, and load some script if certain conditions are met. With this you can expect better user experience and easy from users.

Visit Website

11. SocialCount

SocialCount

Loading social media share widgets such as Facebook, twitter and Google takes 19 HTTP request widgets and added additional 246.7KB to pages weight, this often increase time for web pages to load, and consumes more bandwidth.

Zach Leatherman addressed it by creating light weight solution, named social count.It is a small script that lazy loads social widgets, so that users are not penalized at all.

Visit Website

12. FitVids

FitVids

Several media objects including videos are different when compare to images, in the sense that they don’t maintain some of their aspect ratio after resizing. This creates a scaling issue when viewing video from a host of different web enabled devices.< br/> Chris and other designer succeeded in developing a plugin called FitVids.js.the plugin is able to detect and use correct ratio of video or any other media objects when resize. With this, you can get correct resize ratio when your video is resize, and as a result get finely displayed media objects including videos in your applications.

Visit Website

13. IE-friendly mobile-first CSS

IE-friendly mobile-first CSS

Every designer knows how important is media queries, but the fact is that internet explorer does not support media query. At the same time, as a designer, you cannot decide to do away with media query, just because you want to support old IE. This problem can be easily overcome by using Sass. Sass will help us to mobile-first styles, and at the same time provide appropriate desktop styles to old version of IE.

Visit Website

14. ish.

ish

As a designer,if you check online to search for viewport testing tools, you will found many view port testing tools. But the issue there is that most of the viewport testing tools rely on popular devices widths such as 320, 768, 1024 and so on.

Ish classify and bring out general ranges (small-ish, medium-ish, large-ish, etc) just to make sure that your brings out the general resolution spectrum.

Visit Website

15. Proportional Media Queries

Proportional Media Queries

Some designers are still making use of pixel values to set breakpoints, while we’ve been using widths, measurement, and font units relative to various devices viewpoint. A good tutorial was given by Lyza Gardner which explains how we can use relative units for breakpoints to create better user experience.

16. MQTest.io

MQTest.io

As designer, a times, it might be somehow daunting to track media queries that a particular browser supports. This is easily solve by using MQTest.io developed by Viljami Salminen. The tool will help you to recognize and analyze various media queries that different web browser responds to. With this, you might also be able to utilizes media queries which are not commonly used.

Visit Website

17. Sparkbox media query bookmarklet

Sparkbox media query bookmarklet

Sparkbox is a media query bookmarklet which helps to determine queries for current media or media in use. It is imperative for designers to have access to screen dimensions, as it saves time and also helps in determining proportional media queries.

Visit Website

18. BrowserStack

BrowserStack

As designer, we knows how expensive, challenging and even daunting it can be when it comes to testing in a representative stack of browsers and devices. This is easily solved when we make use of BrowserStack.

Browser stack provides remote access to several devices and environments, thereby allowing you to do some quality assurance testing. BrowserStack is as impressive as anything as it is also effective when testing on old versions of internet explorer.

Visit Website

19. Mobitest

Mobitest

Performance is one of the most essential aspect of web design. With Mobitest, you will be able to see how your designs are performing with some analysis.

When testing your design on Mobitest, you only needs to enter a web address, after which the tool displays the site on a real device, and at the same time gives you a lots of performance statistics, as you will also be able to know load time, and average page size along with other statistics.

Visit Website

20. Adobe Edge Inspect

Adobe Edge Inspect

The importance of testing on a real device cannot be over emphasize for a web designer, as you need to see and analyze the kind of performance your design will bring to a user prior to publishing. An Adobe Edge Inspect had made testing on real device very easy and straight forward, as you have the tool auto-refreshing all connected devices. You are also able to test code on wide range of devices.

Visit Website

21. Codepen Pro

Codepen Pro

CodePen is a tool that quickly helps to demonstrate responsive patterns and techniques. It is a tool which also helps performance of our designs on different devices and computers, while still typing.

CodePen is a powerful tool which helps you to see the results of your code on multiple devices and computers as you type.

Visit Website

Conclusion

All the 21 tools mention above are good for responsive web design. But, each of the tools have different functionality, personally, I don’t have any preference, as all the tools are effective, though with different interface and functionality. The choice is yours.

Visit us at InstantShift.com

PSD to HTML


InstantShift

How Huge gave Vans a grown-up, responsive website

Read more about How Huge gave Vans a grown-up, responsive website at CreativeBloq.com


Popular retailer Vans has recently got a new website, designed by Huge, one of our favourite digital agencies.




Creative Bloq

Deliver Your Business Ideas with Free Responsive Corporate Template

Set up or redesign any business-related site with the help of free responsive theme in corporate style and featuring modern design approach.
MonsterPost

Creating a Responsive Menu in WordPress for Mobile Devices

You’re reading Creating a Responsive Menu in WordPress for Mobile Devices, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Creating a Responsive Menu in WordPress

In a responsive theme you will want some parts of your website to look the same whether you see it on a large screen device like a laptop or smaller device like mobile phones or tablets. But some parts of your website should behave and feel very different based on screen size as users interact […]


Designmodo

Dsquared2 launches responsive modular site

Read more about Dsquared2 launches responsive modular site at CreativeBloq.com


The internationally acclaimed fashion house Dsquared2 has unveiled its new web site. The brand’s playful, witty and innovative characteristics were captured and communicated online by the agency Code and Theory.




Creative Bloq

Responsive CSS3 Horizontal Application-Style Form Fields

Today we’d like to offer you a responsive CSS3 Form Fields tutorial. With it’s help you’ll be able to code a simple but really stylish form.
MonsterPost

20 Best Free Responsive WordPress Themes in 2014

If you are looking to start your own website, a high quality WordPress theme is what you should be looking for. Users love WordPress themes because it is painless to set up and can be used to create a website like blog, personal, corporate and portfolio site.

20 Best Free Responsive WordPress Themes in 2014

However, quality free WordPress themes are not easy to find that is why I decided to gather some of the finest free responsive WordPress themes on hand. All themes listed below are linked with their download location.

1) Moesia business theme

Moesia business theme

Moesia is a striking free business WordPress theme that you can use to build an effective online presence. Choose from eleven predefined blocks and build the homepage that best suits your company. Each of the homepage blocks can have a parallax background image and its own set of colors.

Theme details & download

2) Socute – Minimalistic WooCommerce Theme

Socute – Minimalistic WooCommerce Theme

Socute is a nice, clean and minimalistic theme based on Woo Commerce theme, and designed with a great responsive design layout. It included a powerful plugin with flexible use, Woo Commerce that mostly enables the creation of a rich WordPress shop, including thousands of layout options for users and a lot of powerful features to customize as you need to use it.

Theme details & download

3) Resolution Multi Purpose WordPress Theme

Resolution Multi Purpose WordPress Theme

Resolution is an absolutely stunning free WordPress theme from kopatheme. The theme is designed with a great looking colorful magazine layout with tons of great features included. This is a trendy, modern and flexible theme perfect for news websites and online portals. With Resolution you can display ton of articles and posts for your visitors to read in a perfect way.

Theme details & download

4) Karo

Karo

If you are looking for a free WordPress theme (responsive and SEO optimized) for your next magazine or blogging website, Karo is your perfect choice. This excellent theme is perfect for all kind of magazine and blogging websites. It is built with latest standards of HTML5, CSS3 and jQuery and will scale and adjust to look great on all devices with any screen sizes and resolutions. The theme works flawlessly on all major browsers such as Internet Explorer (IE8 or greater), Firefox, Chrome, Safari and Opera.

Theme details & download

5) Sixteen WordPress Theme

Sixteen WordPress Theme

Sixteen is a Very Artistic theme suitable for most blogs. This theme has a grid layout on homepage to display latest posts. It supports a custom header image, to which a parallax effect is applied making your site a lot attractive. Plenty of customization options present in the theme make it the perfect theme for your next blog.

Theme details & download

6) Minimable Scrolloable responsive one page theme

Minimable Scrolloable responsive one page theme

Minimamble is free WordPress theme based on Bootstrap framework. This responsive theme demonstrates that WordPress is not only made for blogging.

Theme details & download

7) Abaris

Abaris

Abaris is a multi-purpose, free responsive theme with beautiful design and cool CSS3 animations. It uses HTML5, CSS3, Bootstrap Grid system and coded with love and care.

Theme details & download

8) Journal Lite

Journal Lite

Journal Lite is a simple and responsive free WordPress theme for blogging, gathering content, and publishing your ideas. The flexible and clean structure allows you to focus and display your content quite effectively.

Theme details & download

9) Musica

Musica

Musica is a nice magazine WordPress theme. The theme has a clean and simple design with great readability so you content really is the focus and easy to use. With a responsive layout made for mobile ready and accessible on any device from desktops to mobile phones. Besides, it is a free magazine WordPress theme for anyone.

Theme details & download

10) Great Blog

Great Blog

This free WordPress theme is responsive and flexible across not only in different browsers, but more importantly, display also adapts to those individuals who are using tablet PCs and smartphones, thus making the site visit a great experience for everyone.

Theme details & download

11) Catch Kathmandu

Catch Kathmandu

Catch Kathmandu Theme is a fully responsive WordPress theme that looks elegant on any devices. It is simple, clean and lightweight full-fledged WordPress theme based on HTML5 and CSS3. This theme is widely been used by Photographers, Bloggers, Corporate Houses and Universities.

Theme details & download

12) Fyre

Fyre

Fyre is a portfolio theme created for creative professionals. This is a Bootstrap 3 based responsive WordPress theme. This is ideal to setup a portfolio/blog website for creative professionals. The theme comes with many options to customize the functions and the color scheme of the theme is also customizable.

Theme details & download

13) Zerif Lite Free One Page WordPress Theme

Zerif Lite Free One Page WordPress Theme

Zerif LITE is a free one page WordPress theme. It’s perfect for web agencies, digital studios, corporate, product showcase, personal and business portfolio. Zerif Lite is WooCommerce Compatible, Multilingual Ready (WPML).

Theme details & download

14) Martable

Martable

Martable is a Responsive eCommerce WordPress theme with WooCommerce support.

Theme details & download

15) CCR Limo- WordPress Business Template

CCR Limo- WordPress Business Template

CCR Limo is a nice, clean and professional look free WordPress template for business, corporate or personal use. It’s another free premium WordPress themes in 2014 Already Limo got popularity for its professional outlook, features, attractive design. CodexCoder opened it for free to their audience. You will find every version of Limo such as PSD, HTML or WordPress. All of them are still now free for users.

Theme details & download

16) RoVeR WordPress magazine theme

RoVeR WordPress magazine theme

RoVeR is a feature-rich WordPress magazine theme. Great for magazine, review, news and blog sites, with integrated reviews, video, slideshows, galleries and ADS system in each post, page. RoVeR theme is highly configurable; you can completely configure the homepage and posts using the very easy and powerful theme options. Using 20+ custom widgets you can create your homepage very quickly and you can get it just as you want it.

Theme details & download

17) SaleJunction

SaleJunction

SaleJunction is a WordPress theme to create your own E-Commerce Store to sell your products. SaleJunction is compatible with WooCommerce & Easy Digital Downloads plugin to enable selling both tangible goods as well as digital products.

Theme details & download

18) Blackbird

Blackbird

Blackbird Theme is a very clean and elegantly designed Responsive WordPress Theme. It is created with the aim to make your business website look professional to your visitors. Starting from the top header area, the Blackbird WordPress Theme allows you to upload your own Custom Logo and had a space on the top right to enter your contact details.

Theme details & download

19) SunRain

SunRain

SunRain is a beautiful theme which has Multi Layered Slider where two Slides can show many Items which can be controlled from the Theme Options Panel.

Theme details & download

20) Athenea

Athenea

Athenea is a theme for business or personal desktop and mobile fully configurable devices multitude of designs. It features front-page editable from theme options. Athenea is a completely free theme with premium features in future releases.

Theme details & download

Visit us at InstantShift.com

PSD to HTML


InstantShift