Archive

Archive for January, 2016

Planning a Tech Event in 6 Months

January 19th, 2016 No comments

The following is a guest post by Brad Westfall. I ran into Brad at a conference not long ago and we talked about potential guest post ideas. Brad recently ran a conference of his own, CSSDay.io, and as you would expect he is full of thoughts on that experience. The perfect time to write!

If someone told me a year ago that I would be planning a CSS conference with only six months to prepare, I would have been very surprised. As a developer, I don’t plan events for a living and I have no intention making a career of it. After all, I love being a dev and there’s no money in planning events. I did it for fun. I learned a ton of things and made a ton of mistakes. This article is about the journey and those lessons learned. I hope it will give you the upper hand should you try such an endeavor.

How does one even start?

Your first decisions will be about what type of event you’re having. I don’t mean the technology like and CSS- or JavaScript-themed conference, I’m taking about how you want your event to be perceived by others. Some questions that I asked myself, for example:

  • Should there be paid tickets? Should tickets be super expensive to convey the event’s importance?
  • Will there be sponsors?
  • Is it a hackathon or conference? Is it single or multi-track with speakers?
  • Will it be one day or multiple?

To start, I felt two decisions were key to event planning:

Paid or not-paid?

For our event we decided on a “paid tickets” approach, but moderately priced. The revenue from the tickets was not as important as the potential for sponsor funds to underwrite the bulk of the event. That said, a ticket purchase encourages a more significant commitment from attendees. Plus, mine was a new event. So, we kept prices cheap, but more on this point below.

What kind of event? Speakers?

I knew that I wanted a “speaker conference”. Where I live, my network knows I do meetups and help out with hackathons so they would ask me if CSSDay was just a one-time-meetup. I needed to set an early tone that this was a bigger type of event. It was a conference, which to me suggests something much bigger than a hackathon or meetup.

I should have asked two more

While making these initial decisions above drove every event-planning detail that followed, it might have been helpful had a I answered two more key questions for myself: how do I want my event to be perceived? and is producing this event a good idea for for me?

Getting the word out

I don’t think that planning events is for everyone, let alone a tech event. Without the right network of tech friends and colleagues, my event would not have been possible. Particularly, these are some of the major reasons for my success:

  1. I’ve been lucky enough to lead one of the larger tech meetup groups in my city which gave me an initial community for marketing the event.
  2. I’ve been an instructor at a developer bootcamp for the past two years, which meant I had access to not only all of my past students as well as each of the local tech companies where they now work.
  3. I hold a membership at an amazing, local co-working space (Co+Hoots) which has an engaged and active community that proved supportive and significantly helpful in getting the word out.

While I hope most of this article is encouraging, the fact of the matter is that I would not have had any sort of successful event without my friends helping me out. This leads to a key strategy though: how to accept the right kind of help.

Create a help funnel

Chances are you will have no shortage of people asking if they can help plan the event. The hard part will be knowing who can really help and who’s just being polite. There’s a good chance that your best friend who said they can help will end up getting too busy, and even a better chance that your best help will come from someone you don’t expect, and maybe you don’t even know.

Create a private forum (Google Plus Community, Slack, etc) and invite anyone who says they want to help you plan. Although, I wouldn’t invite potential sponsors or speakers since you will need to discuss them on this forum. The forum will serve two primary purposes:

  1. It will be a soundboard for you to discuss ideas for the event with those who want to help.
  2. You can see who’s more active in the forum and therefore, who you can rely on for the bigger roles as planning progresses.

It’s okay to be forthcoming and let your help forum know that you’ll be choosing the major “coordinator” roles later after you’ve seen who really has time to help.

Coordinators and Volunteers

In the first few months of planning, I was the primary coordinator and therefore, the bottleneck in the planning process. This was difficult to avoid since most the planning in the beginning is correspondence and I created a situation where I was the source of all the planning knowledge. I wanted to utilize my friends for help but I didn’t know how. They’re busy with their jobs and I already started most the ground work, and thus had momentum in all areas. Maybe since it was the first event and I wanted to see how all the parts worked, I took on a larger role. I don’t regret being the main bottleneck though. At least for a first event, it’s important to have fewer people involved at the beginning.

Once I got the ball rolling for our venue, lunch, speakers, sponsors, and after hours party, I handed the control to others. With 45 days left before the event, I created the following coordinator roles and chose people from my help forum to take over:

  • Sponsor Coordinator
  • Lunch and Drinks Coordinator
  • Registration Coordinator
  • Venue Coordinator
  • CSS Contest Coordinator
  • Video Recording Coordinator
  • Photo and Social Coordinator
  • Speaker Coordinator
  • After Hours Party Coordinator

Coordinators are distinctly different from the vendors. You’ll have a vendor to cater lunch, but on the day of the event do you want to be stuck with greeting them and showing them where to set up or dealing with any issues that arise? Probably not. You want to enjoy your event too, so designate a person you trust to coordinate with the vendors. Same thing with speakers and sponsors. Imagine all the questions and issues you can avoid by having designated coordinators take on those roles.

Planning lunch, speakers, and sponsors with months of lead time is not so bad, but the week and day of the event is where everything comes to a head and it’s too much for one person. Just be sure to document these roles in terms of expectations and give every coordinator each other’s contact info and role description.

General Volunteers

Besides the larger coordinator roles, I knew we would need 20+ volunteers the morning of the event to help setup before registration. For this I created a Mailchimp mailing list and asked potential volunteers to subscribe to it. Then a week before the event, I sent an email explaining when and where to meet. I had lists of things to do for the event setup and any given list could be handed to any given volunteer. This flexible plan allowed for no-shows and for unexpected volunteers. This is why I didn’t give volunteers specific tasks ahead of time. This also meant that I could tell volunteers there was no pressure to show and if they had to cancel last minute, it wasn’t a big deal. The plan worked but it was slightly chaotic with tons of people asking me what they can help with. I think next year I’ll work on making self-explanatory lists that I can pass out.

The coordinators and volunteers were a huge help and I owe all the success of the event to them.

Selling Tickets

Since it was a new event, I decided to make the tickets extremely cheap. With sponsor money we wouldn’t need a lot from the attendees. This was actually a huge decision which influenced more things than I could list. Actually, having a free event would have been okay with me except that I wanted my RSVP list to be accurate and I thought that having paid tickets would mean a lesser chance of no-shows. I’m not sure if this strategy worked though, since we had about 65% attendees show. I was hoping for closer to 90%.

There are a few options out there for ticketing and RSVP systems. We used Eventbrite which did a great job for us. The one thing to known ahead of time is that you won’t get your ticket payout until after the event is finished! Wait, what? This could be a big deal because if you’re planning on using funds from tickets to pay for things ahead of time, you might need to loan your own event money and pay yourself back later. This could end up being a large amount — be prepared.

Don’t worry about starting your tickets sales too early. I know you’ll be excited to sell your first tickets, but polishing the website and branding the conference on Twitter is a prerequisite. Create some buzz for a while and don’t be afraid to ask your friends and help forum for retweets. Your first week of ticket sales needs to be strong to set a tone for how people think of your event. Be sure to have early-bird tickets that are massively discounted to create buzz and announce them ahead of their availability.

Being our inaugural event, we only had 45 early-bird tickets along with 20 extreme-early-bird tickets (which we actually called “Doors Open, Free Shirt”). Perhaps at your event everyone will get a free shirt if your tickets are more expensive, but at our event shirts were $20 so getting a free one was an incentive. It’s not a bad idea to have the extreme-early-bird tickets come with an incentive prize, whatever you decide it to be.

Keep in mind that you want to sell out of early-bird tickets as soon as possible. Having a lower availability of early-bird tickets will help them sell out and it is invaluable to be able to say “we sold out in only X days” (or “hours” if you’re lucky). You want to create an early perception that the event will be fun and well-attended.

So did it work? Heck yeah, we sold out early-bird tickets in three days.

After the early-bird period I had to work hard to sell every regularly priced “standard” ticket. The standard tickets were only $35 which is really cheap for a tech conference, but the fact that there was no incentive to get them with 5 months left made people hold off. I suppose they thought there was no rush to get tickets with so many still available. With no discount, what was their incentive? Nothing.

To combat this, find every reason you can to offer special codes or discounts “for a limited time” to entice buyers. I feel like the only times I sold standard tickets were when they were on sale or there were discount codes available.

The real secret? Give tickets away…

Give tickets away to anyone who helps with the event in any way. This is the least you can do for their help, plus it drives up the buzz when they talk to their friends about the event. But also don’t be afraid to send them the link to the volunteer signup sheet, they will probably be happy to help.

Contact every meetup organizer in your area and offer them free tickets if they will mention the event to their members. Also write the verbiage for them to include in any newsletters to make it as easy for them as possible – and to ensure the correct message. Give each group a distinct discount code so you know the effectiveness of this strategy. Some groups will help out more than others so it’s nice to know who it was.

Special (Private) Tickets

Create VIP, Speaker, and Sponsor tickets to give away separate from the standard ones. With Eventbrite you have lots of control over ticket types and so make these invisible to the outside world. You’ll register these attendees manually so there’s no reason for them to be public. Having separate ticket types also comes in helpful for correspondence and statistics.

Late-bird?

I struggled at the end with whether or not to do late-bird tickets. I thought that I might get some backlash for having more expensive tickets in the final weeks, and that it looked tacky and greedy to do so. After all, my event would be largely paid for by sponsor funds, so how was this going to look?

With about two months before the event I started hearing the same message from people I talked to – that they wanted to attend but have been procrastinating on buying tickets. The problem for me was that I needed to plan lunch and other details that were dependent on our attendee count and these procrastinators were making my life miserable with trying to guess what the total count will be. After consulting with my help forum, the answer was unanimous. We doubled the price of the tickets for the last few weeks leading up to the event and called them “Late-bird”. I never heard anyone complain and it was one of the better decisions we made from a planning perspective.

Finances

For legal and accounting reasons, I strongly recommend having a legal entity for the event. Especially if you plan on having sponsors or if you’re paying some of your speakers. Since this is a lot of work unto itself, I decided to run all finances though my web consulting business. There’s nothing wrong with piggybacking on an existing company. It’s actually very smart and easy if you already have one. I created a separate checking account for all finances related to the event.

Accounting is not a strong area for me I can’t stand financial spreadsheets and analytics. However, I did make two simple spreadsheets for my finances which helped a ton:

  1. Create a budget of what you plan to spend. Have two columns for “must-have items” and “want-to-have items”. Have two totals at the bottom.
  2. Keep track of incoming and outgoing money. Have two columns for funds spent and received.

Some sponsors will prefer to pay via credit card. Since I didn’t have a way to accept cards, I went with PayPal as a means of sending them “requests for funds”. This was a blessing in disguise because most online shopping allowed me to pay with PayPal funds and I ended up spending almost every incoming dollar online. This meant I never had to transfer PayPal funds to my bank account and therefore never incur fees. Also, PayPal recently went through a major UI overhaul and it’s actually nice now.

Since your money might be spread around in several places (banks, PayPal, locked up at Eventbrite, etc) this is even more of a reason to keep track of incoming and outgoing money in spreadsheets. This should be one of the first things you do.

Sponsors and Speakers

I didn’t think attracting sponsors and speakers were related, and I was wrong.

Try to create a win-win situation for you and the sponsors. Obviously the event needs to be funded so you can buy lunch and swag, but what does the sponsor receive in return? Is it their logo on your site? Do they get a table at the event? What price should be charged for each sponsor perk? To answer these questions, you’ll need to understand what motivates the types of sponsors you’re going after.

The tech companies in my city have jobs to fill and would want booths at tech events to market to programmers. I knew my event, being about CSS, might be an issue because most non-techies (recruiters and HR people) have the impression that CSS people are the same thing as graphic designers and that we don’t program. So it actually turned out to be very convenient that my original concept of the event was that it was “Advanced CSS topics for programmers“. I was honestly able to say that senior level programmers would be there, and while this did make the conversation easier, it was still a tremendous amount of work to attract sponsors.

I setup a tiered sponsorship package which had scarcity. In other words, there were only a certain number of sponsorship slots available at each level. I was trying to entice sponsors to buy sooner than later as to not lose the opportunity to another sponsor. I guess I thought this would create a feeding frenzy and attracting sponsors with limited spots available would be easy. I don’t believe this plan worked though. While we did get two sponsors quickly, I had to wear my salesman hat for about four months leading up to the event. I would say about half of my time planning the event was spent corresponding with potential sponsors. Attracting sponsors was truly the most difficult part of planning this event.

I thought the scarcity of slots available would motivate sponsors but the real motivator, as it turns out, is return on investment. If the sponsor doesn’t know how many attendees there will be and what types of people are attending, it doesn’t really matter that there’s only a few spots available. Of course they want to postpone their investment to see how ticket sales go. But I wanted to plan cool things to attract attendees and planning costs money which I didn’t have until I had sponsors who wanted to see lots of attendees. It was a classic chicken-and-the-egg effect.

At this time I was also gearing up for our call-for-speakers. I developed a plan that I was going to get a keynote who was very well known. I didn’t know who yet, but even if I had to pay them out of my own pocket I was going to try to get someone good.

Announcing my speakers along with our keynote led to a boost in attendees which I had not seen since early-bird tickets sold out. Then with the new buzz with our speakers and attendees, I was able to have much easier conversations with sponsors. The strategy to give sponsors a bunch of complimentary tickets was self perpetuating in that the more sponsors I received, the better ticket sales looked and the easier it was to sell standard tickets to people who saw the event was getting big. This in turn made it easier to talk to more sponsors.

The takeaway is that this is a momentum sport. It won’t start fast, but as time goes on, if you make the right moves, hopefully you’ll get to where you want to be. For me, the catalyst was having great speakers.

Here are some additional things to consider with sponsors and speakers

Sponsor Package

Have a page on your site dedicated to sponsorship that explains all the perks and prices. This should be public to make it easy for sponsors to pass around among their decision makers. Having a page up and easily accessible is invaluable when in a random conversation with someone who suddenly asks “what sponsorship opportunities are available?”

Have a speaker dinner and speaker lounge

Treat your speakers very well. Take them out to dinner on your tab and give them a private space for the day of the event. Don’t worry, they won’t spend all day in isolation. They’ll want to socialize and see the other talks too, but they might need somewhere to go in silence to look over their slides for a bit. Chances are, they’re nervous, even if they are a veteran speaker.

Call-for-speakers

We actually did call for speakers about a month after ticket sales started. We surveyed our early attendees to see exactly what kinds of talks they wanted to hear about. Then we did call-for-speakers using WuFoo‘s simple form creator and let speakers “bid” on which talks they wanted to speak on. It was a different approach, but it all goes back to that early decision of what kind of event is this? Our event, CSSDay.io, is an event for programmers. I wanted to ensure the talks reflected that, and I can’t wait to do it again next year!


Planning a Tech Event in 6 Months is a post from CSS-Tricks

Categories: Designing, Others Tags:

9 eCommerce design trends to embrace in 2016

January 19th, 2016 No comments

In today’s fast-changing eCommerce world, it’s challenging for any web designer to predict the future. What’s new today may be outdated tomorrow! To deliver customers a seamless shopping experience and also put yourself one step ahead of the competition, you as a designer need to constantly assess the merits of current trends.

If you’re planning to set-up (or redesign) your online store, you must be aware of what’s trending right now in the eCommerce sphere. Here’s a closer look at some of the hottest eCommerce design trends that are going to dominate 2016.

1) Material Design

Material Design continues to be popular, and is now being adopted by eCommerce companies on a large scale. This vibrant, content focused design style has been trending since its release in 2014 and will continue to make waves in the future. It’s Material Design’s unified, tangible and playful experience across multiple devices and platforms that makes it so attractive for developing engaging eCommerce sites.

Despite the fact that applying Material Design to an online store is quite a daunting task, some eCommerce ventures have implemented this design style successfully, PA Design and Bewakoof to name just two.

2) Hidden menus

Hidden menus, most commonly a variation on hamburger menus, have become tremendously popular due to cleaning up of a lot of clutter on eCommerce sites. Initially they were designed for use on mobile, but increasingly they’re making their way into desktop designs.

In 2015, numerous online sellers used hidden navigation menus on both small and large screen devices to save up a lot of screen space and in future, this trend too will continue to grow. Hidden menus are now being used by many popular online shopping stores like House of Fraser and EtQ.

3) Upwardly responsive

Responsive design is an essential requirement for most websites in 2016, but it’s vital that you design for large screen devices as well as optimizing for mobile and tablet views. That’s because there’s an increasing trend towards browsing and shopping, on high-res devices like TVs.

Over 32% of web users have devices with a screen resolution of 1920 pixels of higher, which demonstrates just how important it is to consider those larger sizes. Through 2016 more and more sites will take their lead from eCommerce stores that work well on large screen devices, such as Firebox, Smythson and Burberry.

4) Rich animations

Since animation is a great way to engage with and connect to users, many eCommerce sites have started injecting it into their designs to make online shopping experiences more playable and enjoyable. When used in the right place at the right time, animations make your customers feel like you really care about their experience on your site.

In 2016, you’ll see more eCommerce websites creatively using animation — like button spins, icon rotatation and loading bars — to leave a memorable impact on their customers. Looking for some inspiration? Take a look at the Nixon, Fleet Feet Sports and Fallen Hero sites, which have done a great job of employing animation.

5) Storytelling

In today’s highly competitive eCommerce landscape, only storytelling can make your brand stand out from the crowd. Presenting your content in a unique and compelling way, a great story not only establishes an emotional connection between your brand and your customers but also increases loyalty and sales. Simply put, storytelling brings a stagnant brand to life.

Although storytelling is not an easy thing to achieve in eCommerce, many fastest-growing eCommerce stores are now practicing this strategy to their advantage. Two of the popular eCommerce businesses which I think are taking full advantage of storytelling are Bonobos and Greats.

6) Card design

In recent years, card (and card-like) layouts have gained tremendous popularity amongst designers, and this trend will undoubtedly continue into 2016 and beyond. Firstly because cards are one of the main components used in Material Design; Secondly because they work extremely well with responsive web design.

One of the best things about Card layouts is their user-friendliness. Allowing you to arrange and organize your products, they not only help visitors easily get all relevant information at a glance, but allow them to browse more easily if a particular product doesn’t suit, enabling more effective upselling. Both Rejuvenation and Lord & Taylor use cards to excellent effect.

7) Large and flexible typography

Content is certainly king, but the way you represent the content demonstrates how powerful the king really is! Just like 2015, 2016 will be a notable year for large responsive typography that works great on all kinds of devices ranging from a small screen mobile, to a large desktop monitor.

Since typography plays a vital role in developing a strong visual brand identity, and in attracting potential customers towards products in your online store, numerous stores are keen to implement this approach. AYR, Nasty Gal and Brdr. Krüger all make great use of large, flexible typography.

8) Large backgrounds

While we’re thinking about large typography, let’s consider large backgrounds for a moment. They have always been among the most engaging of website design trends, so it’s no surprise that large, absorbing product shots are used extensively by eCommerce stores to make their products desirable. Giving your online store a very clean, professional and sexy look, full page background images or videos compel your potential customers to make a purchase as soon as they enter your online shop.

Although large backgrounds work great on the home page, they can also be used on product pages to immerse customers in your products. Using immersive and interactive images/videos on product details page makes your visitors feel like they own the product even before hitting the buy button. Look how beautifully Eye Heart World and Bugaboo have implemented this feature.

9) Dynamic search

And finally, the most recent and prominent design trend that caught my eye is Dynamic Search. In 2016, many eCommerce sites will be using JavaScript and Ajax-powered search to display products dynamically. This technique is especially successful when you have a very large inventory.

The most compelling example of the eCommerce sites using this amazing feature is JadoPado. Go to their site, search for something and you’ll see products displayed on the page changing dynamically. Another great example of dynamic search is Stuart Weitzman.

Collection of 10 Unique Fonts From Dirtyline – only $17!

Source

Categories: Designing, Others Tags:

Firefox Developer Edition: The Browser for Developers

January 19th, 2016 No comments

Nowadays, every browser provides developer tools that allow you to thoroughly test your web projects regarding design and functionality. By default, JavaScript debugging and the inspection of the source code are among these features. Firefox Developer Edition is a browser developed by Mozilla and is dedicated solely to web developers, providing even more useful tools that help to optimize a website. Its features include the testing of CSS3 animations and transitions.

Slim Design, Fast Access to Developer Tools

Firefox Developer Edition is based on the Aurora branch of the popular browser. New features that are not available in standard Firefox are already implemented here and can be tested in advance. The thing that sticks out the most at first glance is the slim design of the user interface. Tab and address bar take up less space compared to standard Firefox. The browser also comes wrapped in a dark theme by default. If you prefer brighter colors, you can quickly switch the color scheme to the ones you know from standard Firefox.

firefox-developer-edition
Interface of Firefox Developer Edition

As Firefox Developer Edition is directed towards developers, finding the different specialized tools is more accessible and presented significantly more prominent. In the address bar, you will find a menu option that grants you access to all developer tools.

Developer Tools Now Support Animations

CSS3 has turned animations into an important aspect of contemporary web development. Now, the new inspector of developer tools supports them as well. An index that visualizes animations on a timeline has been introduced. The individual animated elements will be displayed as layers below each other. You already know similar presentations from video editing and animation software.

firefox-developer-edition_animationen
Animation Tool With Timeline and Layers

The CSS attributes changed by the animation are listed up for every element. Via keyframes, the places where changes occur are displayed on the timeline.

Buttons allow you to play and rewind an animation. Particularly for fast animations, it can be important to be able to check if every little detail is correct. Here, you have the option to play your animation at reduced speed, meaning either half as fast, a quarter or even a tenth of the original speed. It can be useful to play very slow animations faster than usual. This is also possible, up to ten times as fast.

Testing and Adjusting Easing Effects

The CSS3 easing effects allow you to play animations with specifically defined accelerations and decelerations, instead of a linear animation speed. Within the new inspector, you also have the option to directly alter the easing effect of an animation or transition.

firefox-developer-edition_easing
Simply Choose an Easing Effect

Right next to the easing value, a small icon that allows you to change the easing effect is displayed. You’ll receive an overview of all available easings, including a diagram that describes the animation curve. Additionally, a small example animation shows you the easing in action. Apart from the common effects „ease“, „ease-in“ and „ease-out“, there are some individual processes that are defined by separate bezier curves. You can edit the bezier curve yourself using the handle in the diagram. This way, you create your custom easing which is marked in the CSS source text via „cubic-bezier()“.

With this new feature, you can quickly test new easings for animations and transitions without having to leave the browser.

Applying and Testing CSS3 Filters

Similar to the application of easing effects, you can change an element’s CSS3 filter or add new ones. When a filter is applied to an element, the inspector displays a small icon next to it. Using this icon, you can change the filter or add another one.

firefox-developer-edition_filter
Changing and Adding Filters

All applied filters are displayed as a list of their defined values. You can edit values, delete filters, or add new ones from a list of possible filters.

Since especially easing effects and filters need to be tested in the browser due to the plethora of different possibilities, Firefox provides a very nice way of displaying CSS rules for these effects directly in the browser. Especially developers that manually write HTML and CSS source code will be able to save a lot of work with this feature.

Choosing Colors Using a Pipette

The editing of the color values is done on an individual interface which allows you to choose a new color directly from a color palette. If you want to select another color from the document, just use the pipette. The color chosen that way will be assigned to the CSS attribute as a new value.

firefox-developer-edition_farbe
Choosing Colors From a Palette or Via Pipette

You can quickly add an alpha channel to a covering color using a slider. This automatically turns an „rgb()“ into an „rgba()“ information with the respective alpha value.

Editing CSS Rules and HTML Within the Browser

The same thing that works for animations, filters and colors also works for all other CSS rules of a website. You can access and alter every CSS rule directly in the browser. While particular visual interfaces are available for animations, transitions, filters and colors, the only option for all other rules is to directly alter them in the inspector via key input.

To do so, choose a rule and overwrite it with new values. You can also easily deactivate any rule by removing the checkmark in front of it.

The HTML source text can also be edited directly within the browser. Here, it is possible to modify individual attributes or whole elements at once. Of course, all changes made are only available for the duration of one session. When reloading a page, they disappear.

Saving Storage Dump

While the tools named up to this point are also available in regular Firefox, there are some things that are only provided by the Developer Edition as of now. One of them is a new saving tool that has to be activated in the settings first. Afterward, the browser can create a storage dump of any website.

firefox-developer-edition_speicher
Display of the Storage Dump

After creating the dump, a list that shows you how much storage each part of the site takes up will be displayed. This way you can recognize which object needs how much storage. Starting from Firefox 44, this storage tool will also be available there.

Measuring Tracks

Another new feature only available in the Developer Edition is the measuring of tracks in the browser. This feature needs to be activated in the settings as well. Subsequently, the measuring tool is available as an icon on the menu bar of the developer tools.

firefox-developer-edition_speicherfirefox-developer-edition_messen
Measuring in the Browser

Once selected, you can use the measuring tool to draw any desired rectangle in the browser window. Afterward, width, height and the diagonal will be displayed. Guides also help to compare the position of the rectangle to other elements on the horizontal and vertical line.

Testing Other Browsers With Valence

If you want a website to work correctly on as many browsers as possible, you need to test them on there as well. Valence allows you to test websites in other browsers and on mobile devices. While accessing a website in the Mobile Firefox on your Android device, you can simultaneously test it in Firefox Developer Edition.

Tests on mobile devices are a particular challenge, as there are no developer tools on these devices and their mobile browsers. Valence runs on WebIDE, which is available in Developer Edition. WebIDE is, amongst other things, a development area for Firefox OS apps.

firefox-developer-edition_valence
Using WebIDE to Check Websites That are Loaded in Other Browsers

But you’re not restricted to Firefox on mobile devices. Chrome and Safari are also supported. On Android devices, for example, the USB debugging has to be activated to make sure the browser is displayed in WebIDE. Afterward, WebIDE transfers the websites loaded on the mobile device to Firefox Developer Edition, where the actual testing takes place. There, you have access to the inspector, the console, and the debugger.

DevTools Challenger to Test New Possibilities

The DevTools Challenger is a website by Mozilla, which you can use to test the new possibilities of the developer tools. The website has an appealing design and gives you an overview of the new features in short paragraphs. Short videos explain how to access and use each tool.

devtools-challenger
Website: DevTools Challenger

This way, you can playfully learn how to control animations, change and add filters, as well as how to overwrite any CSS rule with new values.

Conclusion

The new developer tools in Firefox Developer Edition take the pain out of web developer work. Especially when it comes to testing complex animations and effects, you save time, because you don’t need to switch between browser and HTML editor, as you can check and edit everything in the browser.

Additionally, the Developer Edition provides many features that are not included in “the normal” Firefox yet. This gives you an idea of what will be possible with Firefox in the future. As usual for Mozilla, Firefox Developer Edition is totally free to use.

(dpe)

Categories: Others Tags:

The Issue With Global Node Packages

January 19th, 2016 No comments

Node.js brought about a great revolution for JavaScript developers by allowing us to write code that runs directly on our machines; our skills were no longer limited to browsers alone. At first, many of us simply saw this as a way to write our application servers without needing to learn another language, but we all quickly caught on to the fact that we could also write tools for the command line that automate a lot of things in our development cycles.

The Issue With Global Node Packages

npm, which is bundled with Node.js, made this even easier by giving us quick and easy access to tools that others have created, which we install on our machines to access from wherever we are in our system. JavaScript was finally a “real” programming language. But with these new capabilities came a lot of best practices that needed to be discovered, because there were many new scenarios that wouldn’t be found in the browser. In particular, I’d like to discuss a practice that has been on my mind a lot lately that I think much of the community needs to evaluate.

The post The Issue With Global Node Packages appeared first on Smashing Magazine.

Categories: Others Tags:

21 Beautiful Non Profit Charity WordPress Theme

January 18th, 2016 No comments
umeed-charity-wordpress-multipurpose-theme

When we see the word charity, things come to mind are compassion and love for those who are deprived. The fortunate give of themselves and their resources to assist the poor and the needy. Some help through working with institutions. Others use technology to awaken the awareness of the masses. Even in creating websites, some themes, such as charity WordPress theme, are used to send the message across and help site owners be heard and understood. Many of them are feature-rich, SEO-maximized, and developer-friendly. We have 21 Beautiful Non Profit Charity WordPress Theme that really helpful for charity, non profit, events, and multipurpose.

Umeed WordPress Multipurpose Charity Theme

Here is one example of a charity WordPress theme that includes features exclusively for the purpose of managing funds, donations, and volunteer individuals or groups. It does not come short of the modern aspects sought in a website: responsive, HTML 5 validated, and minimal.

Welfare NGO – Nonprofit Organization Charity Theme

welfare-ngo-nonprofit-organization-charity-theme

For non-profit organizations, there are tailor fit nonprofit WordPress themes that help meet the purpose. There’s the integrated Events Calendar, the CMSMasters Donation plugin, and the CMSMasters Visual Content Composer to make sure that the website is created seamlessly to meet needs.

Maisha – Charity/Non-Profit WordPress Theme

maisha-charitynonprofit-wordpress-theme

Perhaps the Maisha charity WordPress theme is a few of those that were inspired from a documentary. That’s what Google loves: a theme that has a sense of reality and authority. Site coding is SEO-friendly, templates are eye candy, and features are tech-savvy. Plugins in this theme are just as abundant.

Church WordPress Theme Evangelist

Church WordPress Theme Evangelist

Church theme, perhaps are nonprofit WordPress themes that have an air of dependability, reverence, and completeness; just like how God is best described. This particular theme’s retina-ready, responsive, and fits on the budget perfectly.

Church and Events – Responsive WordPress Theme

church-and-events-responsive-wordpress-theme

Just because a church or the charity WordPress theme has tons of features does not mean it’s only intended for the pros or techies. This particular theme can be created and customized with just a few clicks. It’s not just fast to learn, it’s also speedy when it comes to site performance and utilization.

Bethlehem – Church WordPress Theme

bethlehem-church-wordpress-theme

An advent to an ideology? Giving birth to your profession of faith? The Bethlehem Theme is one of those non profit WordPress themes that’s just right for starters. It’s also great for those who are in search of the optimal and basic.

Exodus

Exodus

Flat and Wide. That’s how the wilderness was like when the Israelites took on the journey towards Canaan. Just like the story, Exodus, a church and charity WordPress theme, can be described that way. It has a flat design and a wide layout. And the great part is that it’s responsive across devices and easy to customize too.

Peak – Charity Nonprofit WordPress Theme

peak-charity-nonprofit-wordpress-theme

Peak claims itself as a complete solution for charity, non-profit organizations due to its embedded features. It comes with a Give plugin, a campaign-type custom post system, and an events calendar that makes your site dandy.

Zion WordPress Theme for Churches

Zion WordPress Theme for Churches

For those who are looking for an effective charity WordPress theme that’s loaded in a tight budget, Zion is an excellent choice. It comes with plugins for events, sections for media sermons, and a layout that’s flexible for different devices, whether through computers, smartphones, and tablet PCs.

Green Grunge Church WordPress Theme

Green Grunge Church WordPress Theme

When you need to create a church website really fast, the Green Grunge church non profit WordPress themes are your theme of choice. It’s got basic features that church websites need: an intuitive events calendar, customized menus, and sections for media.

Versatile Church Theme for WordPress

Versatile Church Theme for WordPress

For something free, the Versatile Church Theme offers more than enough to have you control over everything you want to customize for your website. An adaptive layout for all devices, a loadful of widgets, and unlimited color schemes make this charity WordPress theme an amazing choice.

Delta Theme

Delta Theme

The Delta Theme from Theme Loom makes this unique selection. Aside from its wider than what’s offered from other sites, it also has a threaded comment system that’s just worth your time and effort apart from most free themes.

Panaroma

Panaroma

Normally for photo blogs, the Panorama is considered one of a few non profit WordPress themes that can be used for a church theme. It offers a feast for the eyes. You can use different photos from your church activities for the slider, making the invite a captivating sight.

Charitas Lite

Charitas Lite

The name of the theme speaks for itself. Charitas is a charity WordPress theme that offers clean details and proficient presentation. It’s designed for NGOs and foundations. While this may be a lite version, you’ll never feel lacking using this theme.

Maisha Lite

Maisha Lite

When you wanted to use the premium theme Maisha on a limited budget, the Maisha Lite, being free as it is, can offer you the stuff you need. Widgets, visuals, and the homepage slider should be more than enough to fill you in.

Stylish Church WordPress Theme

Stylish Church WordPress Theme

Even on a limited budget, the Stylish Church WordPress Theme is one of those non profit WordPress themes that offers functionality and beauty at the right price. Make it your own with 4 colors to choose from, and a customizable homepage slider.

Simple Non-Profit WordPress Theme

Simple Non-Profit WordPress Theme

As the name suggests, the Simple Non-Profit WordPress Theme offers basic features. Despite of which, however, it has an events calendar, a news publication tool, and over 7 color schemes to choose from.

BlogMaster

BlogMaster

While the BlogMaster theme is meant to be for blogs, this could be considered as a charity WordPress theme. Thanks to the feats added by WordPress Customizr, you can personalize it almost any way you want.

Charity Review

Charity Review

NGOs are for a treat with the Charity Review as it’s a WordPress theme that’s loaded with features that can be used in blogs or corporate sites. This theme is totally free notwithstanding the pro-like perks included.

Non Profit

Non Profit

A clear distinction of the non profit WordPress themes, Non Profit offers a fresh theme that’s all about the content and less on the visual elements. Not only is it new, but it’s also simple and comfortable to use.

Causes

Causes

Whether your site will be used for church, for funding, or for charity, the Causes Theme will provide you what you need for a modern-paced website. It’s responsive and SEO friendly. The design is also slick and attractive.

Read More at 21 Beautiful Non Profit Charity WordPress Theme

Categories: Designing, Others Tags:

Drupal is Now 15 Years Old

January 18th, 2016 No comments
drupal-featured

Drupal, the world’s second most popular Content Management System, recently completed 15 years of active development.

The first version of Drupal was released back in January 2000, and as such, it has completed over a decade and a half of development, and still continues to grow strong.

While Drupal was once more popular than it is today, and it lost its crown to WordPress, it is still used by millions of websites and has earned a reputation for being a robust and stable piece of software for building your websites. In comparion to Drupal, WordPress is currently 12 years old, whereas the third player in the top CMS league, Joomla, is a decade old.

drupal-2

It is also noteworthy that Wikipedia was launched on the same day as Drupal. Back then, Facebook and Twitter were nowhere to be seen, and even basic features such as RSS were not popular. Drupal was one of the first software of its type to fully support RSS. Of course, among web browsers, Chrome, Firefox or Safari were yet to be born, and the internet was still being dominated by the likes of Internet Explorer and Opera.

Now that Drupal is trying to balance its target audience by focusing on the needs of both end users and enterprise users, it will be interesting to see how the future development roadmap of Drupal pans out. As more and more Content Management Systems focus on the integration of APIs for interacting with other services, Drupal too is adopting a similar path.

What do you think of Drupal as a CMS? Have you ever used it to build your websites? Share your views in the comments below!

Read More at Drupal is Now 15 Years Old

Categories: Designing, Others Tags:

New Simbla 2016: Responsive Websites for Everyone

January 18th, 2016 No comments

Thanks to plenty of building kits and website builders, it’s possible to create a website easily and without any knowledge of HTML, CSS or JavaScript. However, these websites often lack quality regarding design and technology. Simbla is a website builder directed to both, professionals that speak HTML fluently and laymen that simply want to create a website via drag and drop. Websites created using Simbla are responsive and thus suitable for the display on mobile devices such as tablets and smartphones.

Starting With a Template or an Empty Page

Once you have registered for the Simbla Website Maker for free, you can instantly set up your first website. Those that don’t want to design their websites from scratch can choose one of many free templates. The templates are filled with example content and come with a live demo that delivers a solid impression of the template’s appearance and functionality.

The templates are categorized to make sure you find the right one for your project quickly. There are branch categories for gastronomy, technology and property, for example. This allows you to find a matching template for your business or other use cases that you can customize later on.

Gallery With Templates

If you prefer working without templates, you can as well start off with an empty website and build it up from scratch.

What further sets Simbla apart from the competition is the new Theme Maker. This tool allows you to take a theme as a template and derive your own theme from it. All the template’s areas are customizable within the visual interface of Theme Maker.

Defining Master Pages and Setting Up Websites

It doesn’t matter whether you start with a template or with an empty page: All contents of the website are designed modularly. There are header and footer elements to contain e.g. the logo, navigation as well as social media links. All elements are already designed. Colors and fonts are deposited in a theme. You can choose one out of different themes from a palette. Of course, you can also adjust the appearance of all elements as you wish to. Colors, fonts, sizes, and positions are all to be defined freely.

Every element placed on the website has two menu options: „Edit“ and „Design“, which can be used to adjust functionality and appearance. For the header, there is the option to choose whether the header should be fixed while scrolling or if it should fade out and slide in.

Depending on the element, different menu options are available. For the navigation, you define the appearance of the single menu options. These are displayed as simple text, framed text or as text in a rounded rectangle. Font and colors are also editable. When choosing a font, the system fonts, as well as plenty of web fonts, are available.


Setting Up a Master Page With Fixed Elements

Of course, you can also set up multiple pages within a website project. You can add these to a navigation in the header or footer area. All pages are individually customized and filled with content. There is also the option to set up so-called master pages. Here, fixed areas, which will be the same on all pages, can be defined. Master pages assure that all pages keep these fixed areas. It’s also possible to create multiple master pages for one website.


Defining an Element’s Appearance

Every master page has a „Dynamic Content“ area. This serves as a placeholder to place the individual content of the single pages on later.

Content Variety: Text, Images, Videos, and Intros

There is a bunch of elements that allow you to integrate text and images in different ways. There are classic templates to combine texts and images. There are also templates for team presentations, on which you can add captions to the pictures.


Intro Element

As the importance of videos is constantly growing, Simbla provides unique content elements for them as well. You can integrate both YouTube videos and HTML5 videos from any desired source. Simbla also supports the popular trend of incorporating videos as a background. To do that, a library with plenty of videos to choose from is provided. You can also set whether to play the video in a loop or just once.

There’s a new carousel element for the presentation of images which allows you to display images as image sliders. Simply choose images and decide on a slide or fade effect to be displayed when switching between images. You can customize the time until the automatic image change. Also, choose the design of the pagination and the navigation arrows.

There are special intro elements for the design of your landing page. You can attract attention with impressive large format images and incisive headlines. You can easily place videos, links and sliders in an intro as well.

Full Width for Content

By default, all content that you add is displayed over the full width of the browser window, as you know it from many contemporary websites. However, you can also edit the width and height of your content containers.


Adjustable Size for Containers

If you prefer a classic presentation with borders on the sides, you simply do that. You can also adjust the height of the containers. A container adapts to an automatic height or the full window height. Sizes in between, ranging from tiny to small to large are also possible.

Thanks to the setting options for container sizes, you are very flexible when it comes to displaying and designing your website.

Adding Content Via Text and Image Editing


Integrated Image Editor

Once your website is set up, the diligence work begins. Texts and images need to be implemented. This is done fast and uncomplicated, thanks to integrated text and image editing.


Integrated Text Processing

Images are cropped and enhanced or scaled down with the integrated image editor. You can rotate the image and define a section. Image material is available in a media gallery with plenty of categorized photos. Of course, it is also possible to upload your own images or use images from external sources.

You can directly enter text int the website builder. Due to the integrated text editor, all standard format options are available. Font type, size and color definable, as well as the text orientation. Enumerations, indentations, and text links are also possible.

Pro Mode for More Options

By default, Simbla is operating in a mode that allows visual and content editing using a graphical user interface. In the so-called Pro mode, further options for a more in-depth editing are available.

For example, the single elements of an area, like containers, rows, and lines, can be edited individually. The Pro mode is switched on and off using a simple button. It should only be used by experienced users, as the sophisticated editing options come at the cost of clarity. However, Pro mode gives you full control over all of the content.


Display in Pro Mode

Additionally, there is a particular HTML element only available in Pro mode. It allows you to implement HTML source code into the website. Everything that Simbla does not offer already can be added this way.

Individual CSS, JavaScript and Media Queries

If the variety of options to provide and alter content is not enough, you can individually add CSS and JavaScript using an editor. Especially the option to deposit your own JavaScript opens up many doors.

You can even edit select device and browser sizes with the media queries editor. By default, pixel information for tablets and smartphones is deposited. But it is also possible to enter a custom resolution.

Responsive Preview

The unique thing about Simbla is, as mentioned before, the responsive design of all websites. There is a preview page that displays the site as a desktop, tablet or smartphone version. Images are displayed either enhanced or scaled down to a responsive layout. The menu is displayed via the famous burger icon and content aligned in columns is displayed underneath each other.


Preview for Different Devices

When setting up and designing a website with Simbla, you don’t need to worry about the display on mobile devices. Especially laymen and semi-professional web designers should benefit from this.

Free and Paid Plans

A simple website that doesn’t take up much storage space can be set up for free. However, when you need more than 300 megabytes of space and bandwidth, you need to switch to one of the paid plans. These cost between 72 and 288 Euro a year and provide more storage space and bandwidth.

Paid plans also allow you to access your new website using your own domain. Otherwise, you’d have to accept that the site is accessed via „sites.simbla.com/NameOfYourWebsite.“

Conclusion

Simbla impresses with an easy-to-use interface. It is very clear, even though it has tons of content and design options. The Pro mode gives the users even more options to customize their web projects.

The source code is HTML5, and every website is responsive – optimized for desktop devices, tablets, and smartphones. Those that don’t know much about web development will be able to work with and enjoy Simbla just as much as experienced web developers.

Simbla defines itself as an „Easy Website Builder”, but the word “easy” should not be misunderstood. Simbla is easy to use, but by far does not offer only simple features. Build your own opinion, and check it out.

(dpe)

Categories: Others Tags:

Google is Planning to Get Rid of Passwords

January 18th, 2016 No comments
password-google-abacus

Google is planning to get rid of passwords, and switch entirely towards a new system of authentication. Currently codenamed as Project Abacus, this new method of authentication is one of Google’s top innovative entities for the current year.

Basically, the idea involves using a set of biometric readings based on smartphone usage in lieu of passwords or SMS verification. As such, Project Abacus will lock or unlock your devices on the basis of trust score — it will monitor the manner in which you interact with your smartphone, voice and speech patterns, the way in which you type, your face or other biometrics, location and travel habits, and so on. Thereafter, it will evolve a method based on such data to identify “you”, and authenticate you accordingly.

Of course, this sounds pretty fancy and futuristic — the fact that your smartphone will truly be smart enough to “identify” you, and act accordingly. It is still in development, but more and more users are speaking in favor of it.

Alphabet’s #ProjectAbacus is algorithmic/probabilistic user identity & trust scoring. HUUUGE https://t.co/Ff6uGDjfcV pic.twitter.com/iAg2r2YY4K

— ?? Chris Messina ?? (@chrismessina) January 10, 2016

However, those against the concept of Abacus are strong too. Breach of privacy, access to user behavior and possibilities of a security issue, etc. are just some of the arguments against Project Abacus. More importantly, its practical implementation too is questionable — assuming Abacus identifies a user on the basis of their current behavior, what if the said user’s behavior changes due to a life-altering accident (say, a physical disability)? How will Abacus adapt to such changes and more importantly, how will it verify identity immediately after such changes?

To learn more about Project Abacus, check out this video:

What do you think of this step by Google? Share your views in the comments below.

Read More at Google is Planning to Get Rid of Passwords

Categories: Designing, Others Tags:

What’s new for designers, January 2016

January 18th, 2016 No comments
Theme cards

In this month’s edition of what’s new for designers and developers, we’ve included lots of jQuery resources, theme and mockup collections, email tools, productivity tools, collaboration tools, job hunting resources, and much more. And as always, we’ve also included some awesome new free fonts!

Almost everything on the list this month is free, with a few high-value paid apps and tools also included. They’re sure to be useful to designers and developers, from beginners to experts.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to [@cameron_chapman](http://twitter.com/cameron_chapman) to be considered!

Theme.Cards

Theme.Cards is a collection of the best free themes out there. There are collections of blog templates, landing pages, one page apps, Bootstrap themes, WordPress themes, and more.

CloudMagic for Mac

CloudMagic is now available for Mac! It makes email more efficient, and works with Gmail, Yahoo, Google Apps, Outlook, iCloud, and many others.

CloudMagic

jQuery Cards

jQuery Cards is a repository of over 1000 quality jQuery plugins. You can subscribe to have them delivered straight to your inbox twice a month.

jquery cards

Elevtr

Elevtr lets you test your app ideas by seeing if there’s an audience for it. You can also browse around and support ideas you like.

Elevtr

Design Workflow with Sketch

Design Workflow with Sketch is a free e-course from Invision that shows you how to have a better, more streamlined workflow when you’re working with Sketch. Sign up to get weekly lessons delivered to your inbox.

Design workflow with sketch

Remotely Awesome Jobs

Remotely Awesome Jobs is a curated list of the best remote job listings from across the web. Search by keyword and add tag filters to refine that search.

remotely awesome jobs

Profile Hopper

Profile Hopper makes it super easy to generate new leads by using LinkedIn. It automatically visits the profiles of people you select on LinkedIn, which often causes them to visit your profile in return and check out what you’re offering. It’s a great method for freelancers to gain new clients.

profile hopper

Zurb Notebooks

Zurb Notebooks lets you get contextual feedback from clients to let you iterate faster and better.

zurb notebooks

Techruiter

Techruiter is a curated collection of resources and reviews for your tech hiring needs. There are resources for employer branding, social search, job boards, and more.

techruiter

Placemat

Placemat gives you nice placeholder images of people, places, and things for your site. It’s simple to use and flexible.

Placemat

CommuteKit

CommuteKit lets you take control of the time you spend on your commute. It includes over 120 tools for learning, relaxing, and being productive on the go.

CommuteKit

Founder Mantras

Founder Mantras gives you a daily dose of wisdom from startup founders, owners, and independent creators. Subscribe for updates to your inbox.

Founder Mantras

Everlist

Everlist is a daily list app that makes your lists more beautiful. Use it for to-do lists or any other lists you need to manage simply and elegantly.

Everlist

Project Oxford

Project Oxford is a set of AI APIs from Microsoft that you can use to make your apps more engaging. There are APIs for vision, speech, and language.

project oxford

Guesstimate

Guesstimate is a spreadsheet for things that aren’t certain. Explore public models to see the kinds of things people guesstimate, or create your own spreadsheets.

guesstimate

Proud

Proud aims to be the best time management app ever for those who like to have total control over their lives and are already very busy.

Proud

Doc Search

Doc Search makes it easy to add search to your documentation. It’s already been integrated into several open source projects.

Doc Search

Appolo

Appolo makes it easy for developers to showcase their apps in style. It’s a set of Jekyll plugins and themes for creating a static portfolio website.

appolo

Mockup Catalog

Mockup Catalog is a collection of free design mockups and related resources. It includes UI kits, fonts, mockups, packaging designs, and more.

mockup catalog

Persona

Persona is a new publishing platform from the makers of Cargo that let you enhance your online presence globally. You can get a personal web page with a device-agnostic layout in an ever-evolving collection of design styles.

persona

Odoo Website

Odoo Website makes it easy to quickly build websites that are open source, mobile, and SEO-friendly. It has a drag and drop editor interface, lets you edit text inline on the web page, and reduce development time.

odoo website

Colofilter.css

Colofilter.css lets you create duotone images easily with CSS filters, inspired by Spotify’s ads from 2015.

colofilter.css

Brand-colors

Brand-colors is a collection of official colors for web brands, with a fun and easy to use UI.

brand-colors

Design for Startup

Design for Startup gives all sorts of information on how design works and what makes a good design aimed specifically at startups. It’s a curated list of useful articles, tools, and resources.

design for startup

Funder

Funder is a fun game where you can create new slogans for popular websites that can then be voted up or down by the community.

Funder

Missive

Missive lets you collaborate with others right in your inbox. It’s compatible with Gmail and lets you instantly collaborate right within email conversations.

Missive

Retype

Retype is a next level typographical photo editor. It’s available for iPhone and iPad.

retype

The Unbeatn Path

The Unbeatn Path is a collection of stories from successful dropouts. Subscribe for regular updates.

the unbeatn path

Codesign.io

Codesign.io is a simple way to share and discuss feedback anywhere on the Web, using a free Chrome extension.

codesign.io

Filestage

Filestage is an easy way to share, review, and approve media content. Use it with clients or colleagues.

Filestage

Colordrop

Colordrop makes it simple to color your designs using a drag and drop interface.

colordrop

Fabricator

Fabricator makes it simple to build your UI toolkit. Organize your design system the way you want, with the taxonomy you choose.

Fabricator

189 Quotes for Developers

189 Quotes for Developers is exactly what it says: 189 quotes perfect for developers. Some are directly related to web dev, while others are a little more abstractly related.

189 quotes for developers

Wimool

Wimool is an easy to use app for generating images. Use it to generate favicons, iOS touch icons, and startup images for various iOS devices.

Wimool

Mathieu

Mathieu is a casual hand drawn font with a dripped paint style. It’s free for personal use.

mathieu

Plum

Plum is a simple, playful sans serif font with rounded corners.

plum

HK Grotesk

HK Grotesk is a sans serif typeface inspired by classic grotesques that comes in three weights.

hk grotesk

Haida

Haida was inspired by the artwork of the Haida tribe of Canada’s Northwest Coast. It comes in basic and ornamental styles.

Haida

Exodus

Exodus is a luxury serif display typeface that comes with a unique set of alternative characters that’s free for personal use. It comes in six different styles: regular, stencil, striped, sharpen, subtract, and wacky.

exodus

September

September is a display font based on old school knuckle tattoos.

september

Honey Llama

Honey Llama is a free script typeface for personal use.

honey llama

Hellfire Club

Hellfire Club is a tribal-inspired typeface.

hellfire club

Santa Rosa

Santa Rosa is a western-inspired display font that’s free for personal use.

santa rosa

Brushed

Brushed is a simple brush typeface that comes with a full set of glyphs: uppercase, lowercase, numbers, symbols, and more.

brushed

1-Year of IconCrafts’ Library of 2000+ Customizable Icons – only $37!

Source

Categories: Designing, Others Tags:

A New Generation Of Website Making

January 18th, 2016 No comments
tablet-1

2016 is definitely going to be an extremely interesting year for all tech lovers. Wearables are getting better and more accessible, devices are going to be talking between themselves better, and let’s not forget the bee’s knees of 2016, the VR.

2016 promises to continue the revolution in website building, moving from old platform such as Joomla, Drupal and WordPress to Cloud platforms such as WIX, Squarespace, Simbla and many more.

We took for a test drive one of the new and promising platforms – Simbla with their new version released at the beginning of the year.

Simbla’s new website maker will meet the needs of all different user types, from beginners who need to simply edit one of the templates on offer, to professionals who can enjoy many new and advanced options, such as adding HTML, CSS and JavaScript.


templates

Large variety of templates

We started off with a blank page to check the system’s capabilities, and straight away we got a popup guide that took us through the process. The walk-through was short and quick and showed us the new system’s main features. Great for new users and truly a lot to offer on such a platform!

walk throgh

Quick walk-through

We wanted to build a single page website, so we started to drag and drop different elements from the huge stock of blocks that Simbla has built for the system.

The new concept was no less than amazing! The process was so simple and quick – dragging the elements felt like we were playing around with Lego parts. It was so simple that anyone could use the system, even with zero knowledge in website building or programing.

In just a few minutes we had a single page built out of five blocks with a follow-down menu bar.


One of Simbla’s strongest sides is the responsivity. On other website makers, we encountered a serious problem trying to make the website we built look the same on a mobile device’s.

It seems that Simbla have absolutely nailed it! Once you click on the Preview button you will be able to view your site in three different modes: PC, Tablet and mobile phone. Yes, that’s right, you don’t need to edit anything – just click on Preview and watch it all shrink and fit all three different devices!

You can even rotate the screen to see it from all angles. The responsive side of Simbla is all thanks to Twitter’s Bootstrap technology that Simbla chose to embrace and build their whole system around.

tablet

Tablet rotated

mobile

Mobile view

Change the appearance of your site with just one click

Any website builder’s dream has come true – with Simbla’s new system you can change the overall appearance of the site with just one click. How? Well Simbla have presented us with the Theme Maker, a remarkable tool that allows you to choose a ready-made theme that includes background colors, textures, fonts, icons and more. Or you can just customize your own theme and change the whole “feeling” of your website exactly as you want it.

theme

The Theme Maker is on the left side. Clicking a theme will change all blocks even in the top bar.

Each theme has four block styles that you can play around with and choose which block style you want for each block.

As you can see,it just takes one click and colors,texts, and the whole feeling of the site have all changed, it’s a powerful tool that anyone from the beginner to the professional user can use to maximum.


Let’s go Pro!

If you have some knowledge in site building and know a bit about programming, you’ll be glad to meet Simbla’s website maker.

Simbla allows the Pro mode user to drop down HTML elements, edit the page using CSS and JavaScript and to customize more features than in Edit mode.

In Pro mode you are basically able to create your own page from scratch. Using the grid system, you can position items, edit all items and designs, add images, text and forms – literally anything you want to do you can.

One of the coolest and new features we saw is the Video Background tool, which lets you select a video from a large library. The video plays in the background and you can add any element that you want.
vid

The video library

vid2

Trust us, it plays!

Let’s sum up

Simbla has done a spectacular job in the new version.

It seems that Cloud solutions are the next big thing in website building platforms, and as it seems today, they are getting better day by day, making all of our lives easier. If they continue in the same path, Simbla are definitely on the right course to become one of the best, friendliest and surprising website makers out there.

click here to visit Simbla

Read More at A New Generation Of Website Making

Categories: Designing, Others Tags: