Tag Archives: featured

12 Predictions About Web Design In 2015

The New Year’s Here, let’s just hope our new website does too in all its glory. We’ve had our design finalized, so as the Htmlization, and we are just waiting on our chief developer to pick up his pace. Developers, man! They’re all same and always over worked.

Actually, we’ve all been pretty busy and that’s one reckless excuse, but believe us when we say that- we are like one of those construction workers who would put a bucket below their own leaky ceiling because they just have so many homes to tend to!

But besides being busy, 2K14 was a great year and very happening- not only for us, but for the whole web design landscape. There came some very amazing practices with the code, new and improved design trends, exhilarating color and typography schemes, layout mashups and so much more. Among these spectacular innovations in the design industry, some held their ground and made history while some were fleeting.

So we waited to see if anything new pops up on the radar and decided to predict what design & development practices will continue to reign with staying power in 2015. This is what our today’s post is going to be about. So let’s get to it.

1. Responsive Web design Is An SOP

 12_predictions _img_01

Responsive technique which came out as an alternative to mobile specific sites and adaptive layout has solidified itself. Moreover, it has become a standard operating procedure in web development. So you need to have a really good reason for not being responsive. There may be some differences in the implementation of responsive technique, but over the period of three years no one has said, “Let’s Dump Responsive” rather, it is glorifying every day. Rest assured Responsive web design will be staying in power in 2015.

2. Can Responsiveness Be An Option, May be!

12_predictions _img_02

About, responsiveness- Yes! It has become an integral part of web designing for a majority of business owners. But there is and will always be people who will choose other options –Like a mobile app or a different mobile specific website. Now these folks are not a minority and by no means are they under-privileged to get a responsive website. You can Google “popular websites that are not responsive” and find out that there are business tycoons not following the responsive trend.

There can be one too many reasons for not getting a responsive site like your business ideology, goals and target markets. We believe that in the year 2015 on one side where businesses will widely accept responsiveness as a standard, there will also be businesses that will choose other solutions. Because of the progress & availability of advance web analytics systems, businesses will be more vigilant to choose what solutions will suit their interest and goals.

3. Ghost Buttons Will Not Disapparate

12_predictions _img_03

The minimalist design technique came with a lot of complementing features that gave it the look and feel for which it became popular.  Ghost buttons was one of them things and 2k14 saw it paring with almost anything to give amazing web appearances- like the subtle hover animations, large hero areas, large background images and videos. Considering this, we can say; look out for ghost buttons in 2015

4. Typography Will Rule

12_predictions _img_04

When type-kits were expensive only the big guys had all the fun with beautiful fonts and typefaces. Startups with minimal budget, especially those with WordPress were left with little to no options when it came to typography. But not anymore because now, stuff that previously asked premium is becoming cheaper if not free. Google Fonts is one such blessing with a library of amazing fonts all for free. This means that designers now have more freedom to bring their skills to the table with a smaller budget.

This also enables WordPress theme designers to bring more typographic flexibility in their themes. With researches hinting that responsive or large & prominent text is the essence of a readable and engaging website, this makes stylish and type-centric designs attainable for every website owner out there.

5. Bigger Background Images & Videos As First Impressions

12_predictions _img_05

Not only the text is getting bigger and prominent on the web, but images too. Large, beautiful images & videos used as backgrounds are becoming a staple of modern web designs. This is one of the simplest ways of a making your website stand out. This wonderful technique coupled with larger design style and philosophy is not at all gimmicky but elegant and powerful.

2015 will see, images and videos take center stage in amazing new ways. Not to forget responsive designing which will also sprout new ways for displaying dominant colors for backgrounds and optimizing these images for minimum load on servers. 

6. Scrolling Will Take Over Clicking

12_predictions _img_06

As the Mobile web continues to grow and revolutionize the web design towards a more enjoyable mobile experience, clicking will be subsided by scrolling. This is definitely easier to do, intuitive and reduces load time. Furthermore, scrolling enables a dynamic interaction between the user and website.

Perhaps, the most impressive trend that appeared in 2k14 was the concoction of long scrolling with parallax- commonly known as parallax scrolling animation. With tech giants like Apple & Google adopting parallax scrolling animation, we are sure 2015 will see more of this trend.

7. Card Design Will Get Better

12_predictions _img_07

Card design, although not new, but has proven to be a fantastic option when you want to keep things modular. If there is a lot of information or content to display, card design helps to keep things crisp avoiding a sloppy or disorganized look. It not only enables visitors to browse a lot of general data, but prompts them to dig more.

Simply put, Card design is versatile and clean which is exactly what the web needs. So expect to see more of it throughout 2015.

8. Flat Design Will Grow & Improvise

12_predictions _img_08

After emerging in the industry and taken in different and amazing directions, such as Microsoft’s UI language, Apple’s new aesthetic approach and Google’s Material Design – the flat design trend is in full bloom. It has achieved a lot of momentum in the past year and shows great promise to grow big in 2015. 

While some argue that flat design has issues in terms of user interfaces, but the general consensus agrees that it’s a favorable and modern technique for web design. This is because flat design counters the way we consume content served on web pages through minimalist principles and makes websites lean, fast, content oriented and clutter free. This allows visitors to interact more with the web site without any distractions.

9. Parallax And Microinteractions Will Stay

12_predictions _img_09

As mentioned above parallax is considered as the most impressive trend in 2014. The majority of sites is adopting parallax and coupling it with other techniques to give out highly dynamic impressions and storytelling experiences. One of such coupling with parallax like parallax scrolling is, parallax with Microinteractions.

Microinteractions are contained moments or experiences that come with a product such as modules or extensions. These revolve around a single use case, but give a playful experience to the visitors and promote engagement. We have seen plenty of WordPress plugins that use amusing Microinteractions to promote users to sign up, subscribe and provide general info. With parallax, Microinteractions take user engagement to a whole new level. The advance storytelling theme of parallax just fits great with modules with Microinteractions and I’d love to see more WordPress theme and plugin developers to start thinking in this vein.

In 2015, we can expect to see more designers integrating these elements into their designs.

10. Interactive Storytelling Has A New Meaning

12_predictions _img_10

Unlike normal assumptions, Storytelling in web design doesn’t mean that each page of your website has to tell a fairy tale, yarn or a bit of fiction. This is not what interactive story or narrative is all about. What it really means is that you turn the concepts that drive your brand, its elegance, creativity etc , and everything from your design, to the font you choose to the content and each tiny detail as narrative tools. With them you can tell stories that embody your goals and values and show them in action.

Now this is where most business owners get stuck, to try to work out what their story is, and how to tell it. However, some companies have found a way to do so- for instance, take a look at the Tesla Motors Website.

With more online solutions coming forward to help you showcase your story on the web, Storytelling, from a unique approach will become a traditional aspect of web designing in 2015. Here are two of such solutions you can use 1. Aesop Story Engine, 2.  Readz.

11. User Experience To Become More Personalized

12_predictions _img_11

Using cookies to display the most relevant content to the user is not a new approach. But just as some practices, previously known as spammy (such as the popup) have made a revolutionized return – this technique too has come back with best practices in place.

To name a few giants in the practice are Netflix, which uses it to remember what you recently watched, so does YouTube. I am thinking editorial sites just like eCommerce can use the same technique for return visitors and display a “recently read” sidebar widget and provide quick access to the articles they have liked or commented on – Or perhaps showing them new updates relevant to the recently read/seen items. Anyways, we’ll see more technical uses of this technique in the coming months.

12. Webgraphics To Become An Integral Part Of Web Design

12_predictions _img_12

Providing quick-to-grip information through visuals, which is both interesting & engaging was the main reason for the popularity infographics. They offered an easy way for large amount of information to be conveyed and digested. Much like infographics, a new trend has emerged; Webgraphics!

They convey loads of information through visuals, but unlike infographics, allow the users to physically interact with the information. They are more appealing and have a significantly higher degree of user retention. Consider seeing this webgraphics(above image) as an example.
We believe that more clients will demand Webgraphics as a part of their web design. In 2015 you can expect Webgraphics to rise in popularity and perform as an integral component of modern web design.

7 Reasons Why A Responsive Website Wins In SEO

The mobile web, which is accountable for more than 60 percent of search queries from all over the world, is the future of internet. With smart phones, People today get whatever they need from the internet on the go. This is the reason more businesses today are transitioning from a desktop only web presence to a more appealing and profitable; mobile web presence.

In DezineGeek’s previous post we discussed the easiest way you can make a mobile web presence. We compared the two main contenders of the mobile friendly web designs i.e. adaptive layout & responsive web design and discussed how the latter is far more superior to adaptive in-terms of functionality & UI. Here is our narrative on responsive v’s adaptive.

A responsive web design means that the website’s pages reformat themselves according to the screen size on which they are displayed.

But when it comes to SEO, can a responsive web design beat any other mobile web solution. The answer is YES! Let’s see how responsive web design works wonders for your SEO and is also the choicest web layout by Google.

“Sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.”

Google Loves Responsive Websites

7-Reasons-Responsive-Wins-Img-01-1

Since google is The Search Engine you will focus on with your SEO campaign, then it’s wise to know what Google prefers among websites to choose for its SERPs. And Google Recommends that Responsive web design is the ideal solutions to use for web visitors coming from any channel. Furthermore, Google also favors mobile optimized websites more when displaying searches made on a mobile device.

One URL, One Website

7-Reasons-Responsive-Wins-Img-02-2-2

Some webmasters debate on choosing between a mobile specific website and a responsive website. They are concerned that while avoiding retrofitting, mobile specific websites provide two separate URLs for a same website. On the other hand, a Responsive Website which has a lot of content ideally provides a single URL, but requires long scrolling on a small screen.

In SEO perspective DezineGeek believes that it’s easier to work on websites that have single URLs pointing to home page. having more than one URL pointing to a single website, which is the case with mobile specific website, requires you to put equal effort in getting the SE authority for all the URLs.

Rearding long scrolling, DezineGeek suggests that having a mobile first strategy while making a responsive website is the way around to this problem. This is where you design a website for smartphones up to devices with larger screens. Here is our take on mobile first strategy.

Responsive Websites Have Less Bounce Rate

7-Reasons-Responsive-Wins-Img-03-3

If you have a desktop only website which is sitting pretty well in search results, you are still prone to get a high bounce rate from mobile and tablet visitors. Since you haven’t paid any particular attention in improving your visibility to mobile visitors, they will find it hard to browse your website on their small screens.  The high bounce rate can become a big problem for your SERPs, Google will interpret this as a sign that your website isn’t offering relevant content which will result in you having a drop in rankings. A high bounce rate may also become a problem for websites that have mobile apps, or mobile specific websites with thin or stripped down content.

A professionally made responsive website will combat this issue by providing all the same content of a desktop in a dynamic and functional way. Without compromising anything, yet reformatting the pages for a screen size in an engaging way- responsive design ensures that the visitors find the information they are looking for and thus, keeps them on the page.

Enhanced User Experience

7-Reasons-Responsive-Wins-Img-04

A user-friendly website keeps the visitors engaged. It makes it easier for them to find, understand and share the content. Above all other solutions, a responsive design is made with an emphasis on designing for users. If your visitors are using a tablet or smartphone, they will be able to view all the content as easily as a desktop user. This also encourages greater sharing of your content. Say you find something on a website that you want to share with a friend who will view it on their phone. If this website is responsive and has an exceptional design, the content will work just as well on their screen as on yours.

A great user experience is also a big ranking factor. This is also the reason why Google is encouraging developers to embrace responsive web design.

Responsive Website Loads Fast

7-Reasons-Responsive-Wins-Img-05-5

Google prefers websites, especially mobile pages to load in one second or less. Hence, a slow website is as good as no website. Now considering that an average mobile page load speed today is over 7 seconds, you need to do better than that. This lapse in page load is due to media queries which redirect users coming from small screens to different URLs. Unlike mobile version pages or adaptive layout, a responsive website design does not redirect users to different URLs. There is just one URL; a smart and only one version of a website that adapts to any device it is being displayed. This significantly reduces the load time of your website.

Now it isn’t exactly shown how much direct impact a slow loading page has on rankings, but google is stressing its importance due to its impact on user experience- and we all know that whatever is good for user experience, is good for Google!

Improves Mobile SERPs

7-Reasons-Responsive-Wins-Img-06-6

In addition to Google’s Recommendation to adopt responsive web design for mobile, it also agrees to rank websites optimized for mobile higher in mobile search results.

Furthermore, with analysts hinting that mobile search would overtake desktop search in 2015, it’s a good idea to get an edge over your competition by making a responsive website now.      

Offers Stronger Link Building

7-Reasons-Responsive-Wins-Img-07-7

Unlike the mobile version or desktop version of a site, responsive design offers a single URL that works on all devices. Previously when we had separate URLs for a mobile site and Desktop site, it was not possible to get them to rank well at the same time in respective search engines. This was because the links to a mobile site were canonicalized to their desktop counterparts.    

Now with responsive design, the effort you pull to make a URL rank higher in desktop searches will pay in mobile searches as well. With this there is also no dilution in page rank, rather your link building profile becomes stronger for both desktop and mobile at the same time.

Bottom-line

After exploding into the Scene in early 2012, responsive web design has become remarkably different from previous solutions that served to display to the mobile audience. A responsive design does so exceptionally well and without sacrificing anything, rather benefits businesses with increased visibility, usability and performance. This is truly a solution for modern websites that want to appeal to modern users; users who usually navigate the internet using a mobile or tablet, but still want their desktop experience to be incredibly smooth.

Go Responsive to make the most of Mobile and Tablet Traffic- Contact DezineGeek for a Responsive Design.

Responsive Web Design Vs Adaptive layout, Which One Rocks?

The Mobile web has been revolutionized with smartphones, and tablets with their growing popularity are throwing another wrench in to the gears. Considering this, a website of today must perform parallel and with great efficiency on a low resolution smartphone, a medium resolution tablet or a high resolution desktop or laptop.

This is what a responsive or an adaptive web design offers. Both are basically processes that make a website work efficiently on very small screens, very large screens and at any resolution without sacrificing the User interface or experience.

Over the last few years, the design industry has collectively developed a list of common practices for making websites for the mobile web. Many of these practices involve retrofitting websites to perform on high resolution and down to the lower sizes. While some focus on smartphones first and then work up to the larger viewports, scaling the content as needed.  These practices can be categorized as either a responsive web design or an adaptive layout. Starting with the Adaptive layout, lets briefly discuss what these two are and how do they perform.

What Is Adaptive Layout Design?

Before responsive web design went big, adaptive techniques and layout dominated the industry. Although it’s easier to transition a normal website into adaptive layout, but they require more work if you are making a website in adaptive from ground up- even more than a responsive website. This is also the reason why most people choose this route while retrofitting an existing website to make it mobile friendly.

Designing In Adaptive

responsive_vs_adaptive_01

Before responsive or adaptive web design became a thing, you simply designed a single layout and developed it. However, in Adaptive layout you design for multiple viewports and then go for development. It’s generally easier to begin designing at low resolution view ports and work your way up.  But if you go reverse, meaning if you start with high-resolution and go down towards low, things can end up a little cluttered. The number of viewports you choose to design for is entirely up to you and the developer, but it’s also sensible if you first formulate a strategy based on where you are getting your visitors from and then decide from those view ports.

Developing In Adaptive

responsive_vs_adaptive_02

Developing in adaptive layout is similar to developing a traditional website. You will begin developing the site at low resolution for mobile viewport then you will use media queries to expand the layout for higher resolution viewports.

Keep in mind that the adaptive layout jumps if you decide to test it just by resizing your browser window. This is because you are only targeting multiple common viewpoint resolutions and not all the independent common viewports-which is also much more of a hassle if not required.

What Is Responsive Web Design?

As of today, responsive web design and development is a catch all term and the most commonly used approach for making a website to work on all resolutions. This is because in responsive web design there is technically less work and maintenance as you only have one layout. It can also be more customized for a website, and this is the key feature. Responsive web design also includes fluid layouts which are amplified by media queries at either low or very high resolutions. 

Designing In Responsive

responsive_vs_adaptive_03

Adaptive design lets you have a simple guide to follow while responsive design isn’t so simple. Many designers argue that designing in the browser is the best way to go about responsive. Some even suggest designing & developing at the same time. As in responsive you have to take all the viewports into consideration, there is more work involved on the design side. It is also an ideal practice to keep the viewports in mind, but not the design of any particular one. We also suggest that you should try to work on a middle ground by focusing on mid resolution and keeping in mind that the layout should be adjusted for lower & higher resolution later.

You would also need to keep in mind your existing user analytics and devise a design strategy in according to that.

Developing In Responsive

responsive_vs_adaptive_04

This is where the real fun begins. Once you have designed the layout of your website, you will use the media queries to make it responsive. However, here you will not be defining set viewports; instead you will manually resize your browser until you see breakage. This is when you will set your breakpoint width and add a media query to fix design breakage and continue. The ideal way of doing is from a high resolution device so that you can see and test all viewports. Once you have worked for both low and high resolution, move on to final testing.

Responsive Vs Adaptive

responsive_vs_adaptive_05

If the agenda is to perform exceptionally well on all the devices and screen resolutions, then Responsive web design and development is by far the best choice to make. But in some cases especially for complex web apps an adaptive layout can serve visitors better. That being said, there are some businesses that choose the concoction of both the solutions while inclining majorly towards responsive web design. This is because the idea is to have a rock solid display and experience across all mediums which is made relatively possible and budget friendly due to the technologically advanced responsive layout. Plus, most of successful startups of today, suggest that their key to convert on all the platforms is because of a well styled responsive website design and creativity which transforms the experience even more.

It is also worth mentioning that if you still have audience in IE6-8 and you are having problems serving there, you can make things work with polyfill CSS3 Media Queries. If you need inspiration regarding adaptive or responsive designs, you may want to have a look at Mediaqueri.es.

Need a website that looks great and brings customers from all screen sizes, Contact us for a responsive web design. Quotations starting from $400.

The 10 Hottest Trends In The Web Design & Development Industry

If you are ready to make a mark on the web and your new or first ever website is in the pipeline, you would be visiting countless of websites in a month to get some inspiration. So what kind of impact does that leave on your view of a good website design?

Besides the W3C standards which are in fact constantly expanding and innovating, Dezine Geek too is seeing and experiencing new design and development trends being introduced to the masses.

Here is our selection of some show stopping and appealing web design trends which are making waves of popularity today.

1. Flat UI Designs Are IN

webdesign_trends_img_01

Flat User Interface is what bringing web application and websites to life these days. It is a mix of fun and smooth colors coupled with total simplicity. Although Microsoft has been into Metro UI for a fairly long time, Apple introduced its Flat UI design first with iOS 7 and now in iOS 8 beta. 

We believe that Flat is going to stay and evolve into something more dynamic this year and the next too. Above image from Munch (Flat WP theme)  

2. Large Hero areas take over sliders

webdesign_trends_img_02

Large hero areas have become a big trend of web design today. This term, which has been borrowed from the print media was previously the “intro area”, often having a small image or slider with very little text. Now they are running rampant in some of the best websites as big and bold and taking over the websites which used sliders.

Whether with a simple blurred photo in the background with text in the middle, or a more elaborated one with illustrations, large hero areas are attention grabbers and continuously becoming very creative. Consider Bryter’s larger hero area (image above) practice as an example.

3. More Focus On Responsiveness

webdesign_trends_img_03

Although there has been quite some debate on responsive web design vs  mobile app and which one is the best, but responsiveness have now been around for fairly long. Strictly speaking, responsiveness has become a standard now, being the best and the most enriched alternative for making websites device friendly.

However, we believe that there is still room for growth in this sector, considering designers who are introducing new art to their responsive websites.

4. Videos Where There Used To Be Text

webdesign_trends_img_04

You can only write so much before people realize that they can process the same information interactively in the form of a video and without reading.

This is because the video content is cheaper and easier to produce and surely we are going to see more of them, especially when it comes to showcasing your product or introducing it to the world.

Same goes for websites which opt for interactive videos as a background. Have a look at the media boom page (image above), there retro style background tells the story of their business. 

5. Minimalism Sidelines Fluff

webdesign_trends_img_05

Besides Flat which hints towards minimalism without all the fancy colors, minimalistic and simple web design has been emerging already. One of the main reasons for minimalism is the huge emphasis that has been put on content and content only. 

Simply put, minimalism in web design is the future as people will not stay more than a minute to find something that has been hidden behind the fluff. (Above image from mecre)

6. Your Personal “Branded” Typography

webdesign_trends_img_06

Fonts have been evolving for the past couple of years and they are available in a surplus amount. For example, consider Google Fonts, which offers hundreds of diverse fonts for free. However, now there is a trend setting among designers who are using more personal and “brandable” fonts for a change. 

“Brandable” fonts mean only one thing that the website which uses them is sending a message that they are independent and free from other’s opinions on how to run their business. (Above image absinthe font)

7. One-Page Scrolling/ Long Scrolling

webdesign_trends_img_07

Why put content on different pages when it can be served from a single page? Single page website, the name it goes by now is “long-scrolling” or “one-page scrolling”. Its use has now evolved and lets visitors view all of your pages by vertically scrolling up or down. (Above image from an online health service infographic)

One-page scrolling can be taken as a trend which has made its comeback, or maybe it just never left. Anyways, One-page scrolling is showing signs of popularity in the web design community and we are constantly running into businesses which are taking full advantage of this trend.

8. Fixed Navigation & Social Media Themed Sites

webdesign_trends_img_08

Think of the fixed navigation layout, as your Facebook wall, no matter how far below you scroll, the menu or in other words navigation sticks on top of the screen so that you can easily access your notifications, messages & profile etc.

This style of navigation bar is emerging quickly and there are a lot of creative uses for it as well. Fixed navigation is often dubbed as Social media themed websites and they tend to make the user experience seamless and more accessible. We will be seeing a lot of this advancement not just now, but in 2015 as well. (Above image from Virgin Racing)

9. Dumping The Sidebars

webdesign_trends_img_09

 Now you don’t need to have a sidebar on every single page of your website, instead focus more on the full width content pages and incorporate widgets which scroll-out sidebars from the side of the page when needed.

Although you would need to do some coding in JavaScript, or jQuery, but this feature is still quite simple to implement and gives you more website space to utilize.

10. Parallax And The Other Similar Crazy, Cool Stuff

webdesign_trends_img_10

Parallax websites take an interactive story telling approach to guide visitors through the site. This is generally done by making the background of the site move slower than the foreground as you scroll down. This renders an impressive visual effect which allows for countless creative applications for online storytelling.

Parallax websites are often categorized under one-page scrolling sites, but we have seen plenty of websites that present single parallax images keep the visitor engaged and scroll through the entire image. Here is an excellent example of a Parallax website www.boycoy.com. (Above image)

Plus, expect similar things to hit the web in the coming times, such as the use of HTML5 in animating different parts of a website (see ’’Tobi’s Story’s website”). The subtle scrolling timed in tune with animation is the cool stuff and it will continue to evolve in 2014 & 15.

At Dezine Geek, we closely follow the latest web design and development trends and we do not advise what we ourselves haven’t followed or implemented.

So if you have achieved the inspiration or the plan you needed, but say you need some assistance with its execution; feel free to contact us and we will help you with your website.

Project Post-Mortem: How To Make Your Project A Success

Your project is mostly done. You’ve designed & tested it, it’s live & works. The gears are whirring on their axels just the way you wanted and your final invoice is paid.

But before you move on to the next project, or your next looming deadline, did you happen to review your operations and the project you just finished. A post-project launch review/audit, in our words, A Project Post-Mortem, is basically just analysing tasks in your head that you have performed, or discussing with your partner over a cup of tea.

Try googling the term “Post-Launch Review“ and you will get thousands of results of businesses boasting success stories with a great post launch audit or offering to do yours for a fee. However, we believe that you make sure to do your own real and private assessment.

Discussed below is our take on the Project Post-Mortem, and how you can turn it into a positive and productive practise. Dezine Geek’s “what & why” overview is with the intent to help you break down evaluation processes into measurable parts, to be specific, write down stuff and make your upcoming prospects even better.

1) What Went Great?

project_post_mortem_01
Photo credits: Sufinawaz

Highlight a few things that went really great in the project you just did. You may also try to find out the exact reasons why that happened. The specifics for such achievements are really important and if you think that they were possible just because you are awesome, then you need to rethink your successes a little more.

For example; your success in strengthening the brand through its smallest details can be because you spent more time in researching about your client’s business, their history and future vision.

For some the step “what went great” is tempting one to gloss over, but it’s really important if you want to turn your experience into craftsmanship. This is the reason this step gets our #1 spot. Always remember to force yourself come up with 5 things that went great in the project, even if you only get to the details of about one or two.

2) What Went Wrong?

project_post_mortem_02

Now that you can name some of the details that went right and your morale is high, ponder over the stuff that went wrong- And how you can do it differently the next time.

From communications with the client to the operations, jot down everything that you feel could have happened more efficiently.

If you had some issues with the client, consider which of their character clues you can recognize next time. You may also want to be more alert around new clients who balked at your quotation. This can be a warning that such projects will actually cost you in revisions and stress more that it earns.

Furthermore, look for easier solutions to the age-old problem of “last minute changes”. Again, if there are areas which you think you could have handled differently or through some new skill sets, identify the specifics and plan to take it to the next level.

3) Stash Your Creative Assets

project_post_mortem_03

With the next looming deadline coming close, or a new project breathing down your neck, this is another important step which can be forgotten. Stash those last minute assets which you made but fell to the wayside as the project was nearing completion or the things were rushed. Was there some great piece of design, illustration or artwork that you made but got dropped, archive it with your other royalty free resources, or wherever you’ll be able to find it easily.

File all the resources, printouts, purchased photos, fonts and templates in clearly marked folders and backup the whole project.

4) Update Your Portfolio

project_post_mortem_04

Organize and upload your best work. If you think that the architecture and page layout of this website clearly showcases your creativity, then give it some polish and let the rest of the world appreciate it as well.

Now remember that this step ties closely with our #2 step as well. For example, if a project or the client gave you tough time and the project seems like a waste of time, then consider posting the nice set of illustrations you created and post those in your portfolio.

5) Stay Informed About The Project

project_post_mortem_05

Even if you freelance, it’s still in your best interest to stay informed and keep yourself updated about your past project and its status. This will not only help you create longer-term relationship with your clients but also improve your future work.Because of an ongoing conversation with a client, they are more likely to come to you for revisions.

Although, it might be unpleasant to know that some of your features were problematic for a project, but this knowledge will save you from committing the same mistake again and help you avoid any more unpleasant situations.

6) Documentation

project_post_mortem_06

If you have somewhat skipped the documentation of your project, then spare some time and do it now. Documentation helps you leave “tracks” which will help you if you are asked to handle revisions.

For newbies, documentation will provide assistance in learning patterns, style sheets, rules etc. If there is a management above you and no documentation strategy is adopted, do what you can to convince them in giving you some time where you can do yours. However, if you are independent then it’s your job to make documentation a priority.

The knowledge of the Good & the Bad of a project which make you improvise, is the #1 cause of successfully concluding a project. But in the ever changing web, always make sure to establish and continue evolving your technique to Project Post-Mortem.

But, it has been seen that some professionals and even companies which lose cross functionality can tragically blow this practice and turn post-mortem into a frightening blame game. This is because, we all have tendencies to hold onto bad stuff, letting it worry and weigh us down while disregarding the good stuff. With a more conscious process of project post mortem, we can not only harvest valuable ideas from the entire project, but also inhibit this negative trend and make our work greater.

How do you conclude a project? Which steps do you think are essential? Share your thoughts with us in comments

How to be a Design Geek (Dezine Geeks best design practices)

A good design isn’t always just about good looks. It should also perform with same efficacy, should convert and also keep on astonishing web visitors which is one of its main purposes. At the same time a good design should also be innovative or it might just get the job done; says Dezine Geek.

Inspired by Dezine Geek, I have always kept a close look on their habits and operations while they are busy doing, what they do best; Web Designing & Development. I have long kept a list of what I thought should be things to look upon while designing web application, however what I was missing was sequence.

Upon my request to know the best practices while designing or being a designer, I was bestowed by an ever expanding list of tidbits by Dezine Geek, which I believe Web Designers & Developers out there can find very useful.

So do you want to rock your Design the Dezine Geek way, read on below to see what are the best practices of Dezine Geek while designing & hand-coding websites.

Never Claim To Be A Guru, Always Learn & Improvise

how_to_be_a_dezinegeek_01

Even if you have been working as a designer for ages and that your personal portfolio consists of some great master pieces, you should still never call yourself an expert, let alone a Guru. Calling yourself a “Design Rockstar” or a “Development Guru” concludes your online sales pitch with great many doubts. And if you are posing to be one and something goes wrong with your work assigned by a client, this can get fingers pointing at your image as a designer.

Let people recognize your worth through your work and let the quality of your design speak for itself. A well-presented portfolio can be your best arsenal but then again if you are a learner, hopping and excelling into new technologies and improvising your skillset, will always get you appreciation from clientele looking to acquire your services.

Don’t Hesitate To Innovate, Be Creative & (Borrow Ideas)

how_to_be_a_dezinegeek_02

Every great design is made through innovation, but every innovation at some point has a borrowed idea, a fascination or idolization of something as great. Although, every great designer isn’t great right from the beginning, it’s just their innovative skills getting toned up with time- But this one secret is what very few of them accept.

Innovating something new, equally or more greater than its predecessor idea or fascination is a talent. In other words, this is called creativity. In web designing, creativity is the holy grail of innovation. It is an art that takes the very best of designers into procuring something new and far more astonishing while abstaining from plagiarism.

Even Steve Jobs, Founder of Tech Giant, Apple accepts the fact as:

“Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while”.

Be A Critique But Appreciate A Quality Design (See Point 2)

how_to_be_a_dezinegeek_03

If you see an exceptionally great web design, or let’s say a website, don’t just start shredding it to find any possible design loop holes or development bugs. Appreciate its details, bookmark it and take notes on anything new you learn from that design.

No doubt, it’s tempting to contemplate, what you could have done, or how you would have toned the details given the opportunity to design the same website. But, taking notes on all the innovative features of the website is even more useful. The next day if you get to make a website of same sort, you can churn your creativity faster and as mentioned above- with the notes in hand, you can make websites even more wonderful.

Maintain Your Library, Don’t Just Bookmark, Save Screen Shots As Well

how_to_be_a_dezinegeek_04

Your creativity, innovative skills and design ideas aren’t going to spark on their own, or come as revelations, so research more and more to get a grip on what’s in trend and what you can do make something trending.

Researching, studying designs from all over the alcove and stashing ideas are food for thought for every designer and keeps their creativity flowing. So maintain a library of every amazing design and artsy thing you see on the web. Bookmark websites you seem to like and want to come back to for ideas and more researching. You can also save screenshots which is useful especially if you are designing for cross gadget compatibility.

Don’t miss out freebies, they are Free!!

how_to_be_a_dezinegeek_05

Sometimes an intrinsic detail to your design piece can come from the common most examples on the web or what if you could use that same common example to make a rare master piece. So never miss out freebies on the web, thinking that they are common and could be in possession of every other designer or developer out there.

Whether it’s a free theme, a template, free subscriber images from icon finder or iStock, illustrations or even just wallpapers- bag them all and as said previously, make a library. Down the road, you’ll be amazed to have new ideas and designer intuitions just from a free image you saw and collected.

5 Great Tips for Tuning a Mobile E-Commerce Site

5_great_tips_mobile_ecommerce_01

It has been estimated in the last holiday season alone that mobile e-commerce traffic is accountable for more than 50% of the traffic generated in the online realm. Besides traffic, more than 25% of the online conversions or purchases have also been made through various mobile devices.

With experts in mobile strategy hinting that there are more mobile devices than all the people in this World, the competition is tough- too tough for mobile commerce or M-commerce to be ignored in 2014.

So if you own an online Store, it’s high time for you to go mobile and enhance your reach to the millions of potential customers wanting to explore your catalog through their fingertips. What’s even more important than crafting a mobile ecommerce store, is tweaking it to become a magnet for mobile explorers with an interface that promises a swift buy out process.

Here are 5 things to keep in mind while tuning your mobile ecommerce site for greater performance, UX and traffic.

1. It Isn’t Just Your Desktop Website On A Small Screen

5_great_tips_mobile_ecommerce_02

Your desktop website could have some great design works and features and it’s tempting to have them scaled and adapted into small screens, but that’s not what you should be doing. Instead, try leveraging your design and features and show only what’s necessary and appealing to a mobile user. Always remember that a mobile website or app isn’t just a compatible view of your website on small screens-So don’t try retrofitting your desktop ecommerce website. Plus, this is called “Satisficing” and can affect your smartphone experience.

A mobile first strategy in designing a mobile ecommerce website, requires you to redesign from smartphone up. Here you need to ensure that besides showcasing your catalog, you have minimum viable content, functionality and that your pages load faster. Also keep in mind that a mobile first approach isn’t just hand coding for a smartphone only. You can keep the tablet experience as your starting point and then scale your design requirement accordingly.

2. Make Simpler & Smarter Forms

5_great_tips_mobile_ecommerce_03

Whether it’s a single field email entry system or a complex setup of user registration and checkout, most of the websites or mobile apps these days make form submissions as their main conversion goals. Hence, best practises for a mobile ecommerce website in tweaking forms are to keep them simple and as less sophisticated as possible.

Try inhibiting fluff entries from the forms you use for your mobile website. Also, place labels before each field, avoid in-line labels and disable the feature of first letter capitalization from email and password fields to enhance the experience of users while they are providing touch input.

3. Prevent Mobile SEO Hiccups

5_great_tips_mobile_ecommerce_04

In an official note Google states that “Faulty Redirects” and “Smartphone-only error” are the two commonly occurring mobile SEO hiccups that developers can easily fix. What faulty redirects do is that they detect wrong user agent and they send your mobile visitors to another URL (wrong URL), which is often the home page.

On the other hand, Smartphone-only errors occur when Googlebot Mobile is botched which creates an infinite loop of redirects between your desktop website and the mobile website. It can also result in serving a 404-page error at a smartphone friendly URL.

4. Display Content In The Context

5_great_tips_mobile_ecommerce_05

As mentioned above, you don’t need to copy your desktop website for your mobile website. The fact is if you know the context of your user’s mobile, it’ll be a lot easier for you to design your website, find out what images can you keep in the navigation, what products to feature and understand what needs to be where.

Aligning context with your content can also help you to find out which site tools you can use in accordance with your web needs, such as displaying physical store finders etc. You can also provide your mobile web visitors with an app like experience by taking advantage of the gadgets rich media such as camera, geo-location, push alerts and other features by using HTML5.

5. Be Fast

5_great_tips_mobile_ecommerce_06

Loading speed is a very critical point on mobile. Users are on the go and if your services are slow they are unlikely to stay. This is why it is always an advantage in using a mobile specific design which has light load than a responsive design to serve users.

You can resize, compress and optimize you images for small screens in a mobile specific design. You can also reduce fluff, scripts and redirect- OR further use a CDN service to speed things up even more.

If you want Dezine Geek to implement the above mentioned tasks in your mobile site or if you want to discuss a mobile app development.

7 Deadly Sins Of Custom WordPress Development – Part 2

Like our Previous Post, Here too we’ll look at some cardinal offenses committed in Custom WordPress Development and how you can avoid them. Remember if your WordPress website is judged, you will be held accountable for any of these sins.

1. Overloading Your Theme’s “Functions.php” With Tons Of Plugins

7_deadly_sins_2_01

There are a number of reasons for you to avoid this as much as possible. First being the sake of your whole website as this makes it really hard to troubleshoot plugin conflicts especially after upgrades.

As an example, let’s just consider that you added tons of functionality into the theme’s functions.php. Now, if down the road your website starts having a problem, there would be no easy way for you to turn each part off one by one and find out what is causing trouble.

What’s the remedy: If you have WordPress developers working on the same website, it’s better to keep the presentations separated from your website’s functionality. If all such functionality exists in separate plugins, you would be able to troubleshoot errors more easily and isolate stuff that needs to be updated or removed.

2. Still Having The Default URL

7_deadly_sins_2_02

Your default URL on WordPress which looks similar to this: “www.yoursite.com/?p=120”, would make sense to WP, but it means nothing to search engines and even your users.
www.yoursite.com/get-me-a-pizza (hint*) makes way more sense to your users and it is also great for the SEO purposes.

What’s the remedy: You can set the URL structure for the pages of your WordPress website by going to the “settings” menu in your WP install and selecting “permalinks”.

3. Welcoming The Comments From Hell

7_deadly_sins_2_03

If you want your website to encourage users to participate after engaging them through your content, one way of doing this is through your website’s comments portion. Hence “comments” should be there on your website but you should keep out all the spammers.

What’s the remedy: The easiest way to get rid of spammers is not by using Captchas, but by activating Akismet. This fine plugin comes bundled with WP and rids most of the spam for you. All you need is an API key which too, you can find here.

4. Having no backup plan

7_deadly_sins_2_04

So you don’t have a Backup plan. Imagine what will happen if your website decides to go for a nap which lasts a bit longer than you expect. What will become of your content or your post comments? All gone, but it doesn’t have to happen like that; you can still make amends now and save your website.

What’s the remedy: Simply install WP-DB-Backup. This plugin will let you schedule a site backup whenever you like. You can further mail that backup to your email as well.

5. Displaying Your WordPress Version

7_deadly_sins_2_05

You don’t need to be all flashy about the version of WordPress install. As WordPress normally shows its version number in the header of your website. This can be a potential vulnerability for your website; hence let your custom WordPress development team remove it and make your website more secure.

What’s the remedy: Here is how you can remove the WP version from your website’s header. Simply add this code into your theme’s functions.php file or tell your WordPress developer to do so.

remove_action('wp_head', 'wp_generator');

Not feeling like playing with the code, here you can do the same with this plugin: WP Remove WordPress Generator Meta Tag.

6. Not Optimizing Your Website

7_deadly_sins_2_06

How many times have you wondered why is your website still slow even after going exactly by the books? There can be multiple reasons for your website being slow, but if you have already addressed the hosting and too-many-plugins issues, then improvise and use the below mentioned caching systems for your WP website.

What’s the remedy: You can use a site cache system like W3 Total Cache and optimize the images used in your website using WP Smush it

7. Neglecting On-Page Schemes And WordPress SEO Tools

7_deadly_sins_2_07

Besides full-fledged online marketing campaigns, On-page SEO activities are the basis for your website to be crawled by search engines. These are tasks that let you make your website friendly for Search engines so that they can be crawled easily and quickly.

What’s the remedy: Before your online marketing teams tells you to round up your WordPress developers and integrate on-page SEO tools, meta titles, descriptions and tags- Try getting this done when your website is being made. Moreover, to get your website easily optimized we recommend you to use All in One SEO pack and Simple Google Sitemap XML plugin.

Always remember that Awareness is the key but making progress in WordPress can become much easier when you become cognizant of theses 7 Deadly sins of Custom WordPress Development. Drop your suggestions in the Comments below,

What are some of the most harmful and annoying development practices that you’ve come across?

7 Deadly Sins Of Custom WordPress Development

WordPress, the choicest CMS all over the world is renowned for its freedom that lets WordPress Developers extend their platform to just about anything. However, when coding for WordPress, you should make sure that your plugins & themes can play nice and smooth with other WordPress extensions. This is because; Developing in a vacuum is just inexcusable and down the road it can cause you or your client a lot of trouble.

We call such inexcusable schemes the Deadly Sins of WordPress and here are some of the major things that you should abstain from!

1. Loading Your Very Own JQuery Copy

7_deadly_sins_01_1

Now this would sound dumb! But yeah Some WordPress developers load their own copy of JQuery for God knows whatever reasons. People!  Loading your own copy of JQuery is one fine way for ruining everything on your WordPress.

Some WordPress Developers while making a WordPress website in many cases de-register the jQuery copy that comes with WordPress, which looks similar to this:

<!--?php if(!is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"), false, '1.3.2');
//wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"), false, '1.7.2');
wp_enqueue_script('jquery');
}
?>

By de-registering the WordPress’s copy of jQuery and loading another one, you can easily break all kinds of JavaScript in the rest of your WordPress themes & plugins.

What’s the Remedy: Don’t do this. Just use the jQuery copy that comes with WordPress.

2. Loading JS/CSS Files Improperly

7_deadly_sins_01_2

Now, what makes this Sin Deadly in WordPress development are two smaller sins. The first is incorporating both inline Script and Stylesheet tags through your header file. This activity can cause both of them not to load at the right time and once they do, they will be loading on your website’s every single page. Result- Your WordPress website will take ages to load.

What’s the Remedy: You can use WP Enqueue Script or WP Register Script which will help you load your JS/CSS files the right way, on right pages and at the right time.

The Second junior Deadly Sin related to the bad loading of JS/CSS files is loading custom JavaScript & styles on each page of your WordPress website– instead of loading it conditionally or when necessary.This activity is often unwanted and can significantly delay the overall loading time of your website.

What’s the Remedy: Only load your scripts when necessary to keep your website running smooth and fast. Here is how you can do this via a very common example by Phil Bank’s tutorial on Loading plugin Scripts During WordPress Development.

add_action('wp_print_scripts', 'deregister_cf7_javascript', 15);
function deregister_cf7_javascript(){
if(!is_page(15)){
wp_deregister_script('contact-form-7');
}
}
add_action('wp_print_styles', 'deregister_cf7_styles', 15);
function deregister_cf7_styles(){
if(!is_page(15)){
wp_deregister_style('contact-form-7');
}
}

Originally, this script disallows contact form script from loading on every other page except the contact form page, by using the ID of the page. Although it would take you some time, but you can tweak the same method during your WordPress development so that it may stop unnecessary loading of useless scripts.

3. Not Sanitizing User Input In SQL And Encoding It For Output

7_deadly_sins_01_3

The SQL injection attacks are the most commonly used ways to exploit any website’s vulnerabilities and they can be deadly for WordPress websites as well. Hence if you don’t escape an SQL based input from a user, you can leave your website extremely vulnerable for this kind of attack.

Secondly, these types of attacks can also be lured if your Custom WordPress website design  and Development team are using plugins and extensions that come from an untrustworthy or obsolete source.

What’s the remedy: Make sure youclean and moderate user input in-order to protect your WordPress website from such sort of attacks. You can later encode user input for display to inhibit XSS vulnerabilities on your website. We found the Data Validation information on WordPress Codex really useful in this regard. Also, go through the excellent reference by WP Tuts on Data Sanitization and Validation With WordPress that goes into more detail.

4. Adding Too Many 3rd Party Services

7_deadly_sins_01_4

You can literally overload your website with too many social media buttons and third party services and this seriously is a bad idea. The only place where such type of exhaustive integration makes sense is when you have rather significant number of user base, which is active round the clock on social network. – And you are offering the ability to register via Facebook, Twitter and Google+. Only then such type of connection is convenient. But if that’s not the case with you, you will simply make your website sluggish with such sophisticated functionality as they’ll be running every time your website loads.

What’s the remedy: Only integrate third party services if absolutely necessary otherwise, sparingly.

5. Being “Admin” For The Rest Of Your WordPress Life

7_deadly_sins_01_5

Keeping “Admin” as your administrator username and “Password” literally as your password is like a jackpot for a hacker. Furthermore, there actually are some evil bots that lurk around on the web looking for WordPress installations that have this practice in order exploit them.

What’s the remedy: Give your WordPress a unique username and a very strong password. If you have a Custom WordPress design and development team at your side, enforce them to change the username and password just after WordPress installation. You can even force your users to select strong passwords by adding this plugin.

6. Not Testing Your Work

7_deadly_sins_01_6

If you keep on making changes in your website, but you don’t verify them being formatted correctly you are welcoming trouble and putting your time and if your website’s is live, your company image at stake. Once your WordPress Designers or Developers make anything, don’t force it to go live in miniature deadlines. At the very first what you should do is- testing.

What’s the remedy: Of course, you can do cross browser testing, but WordPress codex also provides a number of tools to help make this process a lot easier. You can use Debug mode to single out PHP warnings and errors. Use Theme Unit Test to pre-format post data and also Theme Check to examine the codebase of your theme

7. Expecting A Lot From Shared Hosting Plan

7_deadly_sins_01_7

Shared hosting can never fulfill your website’s needs. End of Discussion, So don’t fall for hosting plans that offer a buffet type of deal boasting on unlimited number of resources. For starters, such hosting plans may sound and feel great but eventually when all the resources get oversold and your site slows down, you will have to waste a lot of time and effort trying to sort things out with your host.
It definitely is a mistake to think that you can add all types of media snippets, plugins and extensions into your WordPress website while being on a shared hosting plan and have them running seamlessly.

What’s the remedy: Go for a better hosting plan from the beginning, especially when you want your website to grow. Dedicated hosting is good, but if you have a bigger budget, Cloud hosting can be great! If you do some research and find an affordable hosting provider with same offerings, you can let your custom WordPress designer & development team to accommodate anything you want in your website.

These are our picks on the deadliest WordPress development sins, however, there is more to come. So stay tuned for our next post. In the meantime, please use the comments box to suggest what you would add to the list!

5 Simple Tips to Turn Your Ecommerce Website Efficient & Friendly – Part 1

Having an ecommerce website is a very competitive business because your rivals are just a click away. Hence if a customer doesn’t like the way your ecommerce website feels like, he or she will simply go & buy the products from your rival’s website.

In the World of ecommerce, it doesn’t matter if your prices are cheap, or your products totally from off the planet- If your customers are always confused while navigating your website, they are unlikely to reach your pre-set targets i.e.,  See the “Thank- you-for-Buying-from-us” Page !

If you want to make your ecommerce website gain more attention from your customers, it is imperative that you make sure your website’s functionality is great and it is very customer friendly. Such parameters also known as User Experience (UX) can only be achieved when you don’t only have a commendable ecommerce website design but also its seamless development. This is the foremost responsibility of your ecommerce website development and designing team.

Regardless of how you take charge on your ecommerce website developers, here are some tips from ecommerce website design & development perspective that will let you have a more user-friendly website as well as make the buying process as easy and quick as possible.


1. Categorize Your Inventory

5_ecommerce_tips_1_01

Online businesses that categorize their Products and service and make them easy to find reap rewards in not one, but two ways: Online customers covert more and you experience greater overall satisfaction for your ecommerce website. You should think like a customer and consider offering your products that make logical sense together. For example; try up selling and  cross selling opportunities- if you sell paintings and frames, figure out a way to showcase frames that would best complement the paintings as well. For a line of products that have varied prices, display you products in a way that progression from least expensive to the most expensive is shown.

In this way, customers are more likely to purchase expensive items if they are presented as options. 


2.  Integrate Search Function

5_ecommerce_tips_1_02

Make your ecommerce website developers integrate the Search functionality “Big & Bold” on your website. In this way, customers would know for sure that they can explore and Search your catalog for their desired item- and it would make their shopping experience more satisfying than frustrating.

This step is highly recommended for Ecommerce websites that sell a wide variety of items. Furthermore, if the search functionality on your website is added with category refinement, it would allow buyers to find their required items even more quickly.


3. Keep It Simple

5_ecommerce_tips_1_03

It has been observed that overly complicated navigation and too many pages are biggest reasons for customers to not complete the online buyout process or abandon the shopping cart.  Successful Ecommerce websites always have a simplified checkout process with very little pages in between. Also, try displaying clear pricing, shipping information, return policies and access to customer service up front. Putting the phone number of your physical store in a visible place is also a good idea.

Experts suggest that customers feel more confident while shopping online when they know that you are just a phone call away if they have any problem.


4. Incorporate Breadcrumb Navigation

5_ecommerce_tips_1_04

While placing orders, customers would want to know where they stand in the whole purchasing process and how many more steps have to go. Without the breadcrumb navigation functionality, online customers can easily become bored to think that your checkout process takes forever and they may abandon their purchase even if they are halfway through.

Moreover, breadcrumb navigation also allows customers to easily go back and forth the checkout procedures and edit any mistake, rather than start over from step 1.


5. Modify Sign-Up Buttons & Call To Actions

5_ecommerce_tips_1_05

Try to avoid lengthy signup forms that would take ages for a customer to actually register to your ecommerce website. In fact, for just registration, you simply don’t need the address, phone numbers and work history of a customer. A single email address and password should suffice the need of registration. This being said, never underestimate the power of Call to Action buttons as they extremely help in improving your ecommerce website’s usability and building higher conversions.

Try to make your ecommerce website designers consider what button size, font, color and positioning would make your Call to action or sign-up button stand out from your website’s background.


There you have it! Some easy tweaks that can make your ecommerce website increasingly friendly with great user experience. However, our job here in not done!! Stay tuned for 5 more tips to turn up the user experience of an ecommerce website. 

Read Part 2 of 5 Simple Tips to Turn Your Ecommerce Website Efficient & Friendly