Tag Archives: web design

Current Common Practices in Web Typography Part 1

Summary:

It is true that web typography is a bit different from print and constantly evolving due to ever-changing nature of web itself. At present, we are experiencing new opportunities on presentation front due to emerging mobile era as well as facing intricacies in implementations. These all force us to reconsider our practices and outlook.

Intro:

Day before yesterday, we were focusing on the print media and little on web media for static desktop like devices. Today responsive web designing practices have changed the entire landscape of web typography. Therefore, today we have to think about the font type, style, font size, and spacing in respect to the ever-changing viewports according to the client mobile and desktop devices. We strive to optimize readability of the web typography across the devices, browsers, and OS. In due course, we need to focus on certain current common practices prevailing in web typography landscape. Let’s check one-by-one.

Type Face

The choice of typeface sets the tone of the entire website and sends right or wrong messages by creating an atmosphere. Our designers are struggling between the Serif and Sans Serif typefaces for an appropriate choice since 2009. If we look back in the web typography of 2009, it was increasing trends for sans-serif typeface in body copy as well as in the headlines. Today designers are creating contrasts in body copy and headings by interchanging of serif and sans serif typefaces in order to improve readability and visual appeal of the website.

If we fine grain the data, we may find that serif typeface has replaced the sans serif in body copy gradually over the last four years. We can see the emerging trends for Georgia and Arial as the most popular typefaces on the responsive websites like The Guardian, Financial Times, BBC, etc.

The Most Common Typefaces

Besides Georgia, there are other popular typefaces such as Chaparral Pro, Freight Sans Pro, Helvetica, Verdana, etc. which have taken place in either body copy or headlines/headings and differentiate from others by creating contrasting effects. However, interesting trends are also visible for the non-standard typeface usage on the recent web development, especially in responsive websites made for multiple devices and screens. This indicates the increasing diversity in web typography.

Diversity in Typeface

As we use CSS in responsive design and fallback typefaces including standard core Web fonts like Times, Times New Roman, Arial, Georgia, Helvetica, etc. are used predominantly as mobile platform fonts. Ironically, comeback of Times, and Times New Roman have widened the diversity of web typography still keeping the old players intact. The real genesis of diversity is leaning trends towards individuality and responsive web on designing landscape.

Many smart web designers are experimenting with typefaces mostly in headings because drastic changes in body copy may prove disastrous particularly in case of responsive designs. However, use of alternative fonts for body copy may create rich panorama and bring more diversity in web typographic landscape.

Fortunately, Lujayn has dedicated web developers who are accustomed with current trends and common practices in web typography landscape and capable to make your project a success legend in this fiercely competitive market.

Some Technical Aspects that Affects Search Engine Crawling

Summary:

The success of SEO is greatly depending on how search engines look and feel your website. Therefore, technologies and technical aspects of the website determine the overall success at the end of the day.

Intro:

It was a time when e-commerce and other websites were made up using Flash like animation technologies. At present, we have innumerable technologies at hand and they are producing simple standstill HTML websites to highly interactive and dynamic web portals using PHP like open source technologies.

Earlier, we were mainly focusing on the audience who accessed front-end side of the websites through browsers, giving cloying graphics and animations using appropriate technologies. Gradually, search engines added one more dimension in the web development and it was SEO friendly website development. Now, businesses are looking for ranking on SERP along with tempting the human visitors on the website.

Website Access at Technical Point of View

Our modern websites have two types of visitors, one is human and another is search engine. Humans have eyes to see and brain to read, feel, sense, and analyze the website content. Whereas crawlers have algorithm to read the source of the website on the server, means bots read backend only.

At front-end, web developers take care of user experiences through myriads of factors in designing as well as in programming. For instance,

  • Cloying UI design with smart UI elements
  • Rapid and dynamic interaction programming
  • Comprehensive information architecture or navigation schemes
  • Content architecture or layout
  • Content on images
  • Multimedia content including images, audio, video, animations, and so on
  • Integration of various 3rd party solutions and extension for advance as well as personalized functionality

These are some considerations for web developers at front-end.

Against these, at back-end we need to take care of all technical aspects that allow all sorts of search engines to crawl the web pages in source code. For instance, various technologies of web design such as

  • HTML
  • CSS
  • JavaScript like various scripts
  • Cookies
  • Robot Tags
  • Programming language
  • IP addresses
  • Hosting
  • Cloud

These all deliberately affects the crawling of the web pages for websites and web application whether they are on traditional servers or on the cloud and displaying in the browsers on desktops or smart handheld devices.

Obstacles for Search Engines

As described above, search engines have to access backend through source code and source code reside on the web server or cloud and it is made up of various components including the front-end elements along with technologies in programming documents.

Search Engine Crawling Issue
Search Engine Crawling Issue

Location Factors

Hosting, cloud, and IP addresses are some of the location indicating and permission granting factors. Thus, if you don’t have SEO friendly hosting solutions, how crawlers will access the server and source code easily? If the region of host or cloud is inaccessible for the search engine, you have meager chances of indexing regularly.

Flash, Images, PDF, Animations like Banned Technologies

We know Google like advanced search engines can crawl Flash, Images, PDF at some extent only while rest of other search engines are of primitive type and have banned such content for their visits.

CSS, JavaScript, Cookies like External Factors

We know that CSS and cookies like files are residing at the external locations in the hosting environment and are not included in the main source file like HTML. Similarly, JavaScript is tough to crawl rapidly even for the Google. If your navigation is based on the CSS and your important website info is collected in the cookies, your dream for indexing will abolish soon.

Robot Tags

If you don’t have robot tags or your robot tags are with some serious errors like ‘noindex’ or ‘nofollow’ tags, how poor crawlers dare to proceed further in your web page source code?

In sum, if your design is good, but your source code is not search engine friendly you will lose the ranking battle at long run. Fortunately, Lujayn has expert technical web designing team, familiar with such issues and capable to manage them during the web development process.

Working with and Building Modal Windows in Web Design Part 1

Summary:

Modal windows are offering extra spaces on the screen without intimidating user experiences if designed smartly. No doubt, making its semantic is the need of moment. Therefore, let’s check the best practices and trends for working with modal windows in your web design project.

Intro:

In web design whether for static or responsive websites, you need to take care of readability, usability, accessibility, and functionality during entire designing and programming process. In due course, organization of information architecture along with design layout is crucial and demanding a bit experiences as well as expertise.

At present, most of the websites are business oriented and highly relying on online identity to accomplish their critical tasks or processes of the business. Therefore, intricacy in design and functionality is natural. Majority of clients and their web developers are screen real estate hungry. They constantly try to include maximum info in minimum space. Thus, their trade-off with layout blocks and responsive design become more complex and force them to find out innovative ideas to justify their content needs.

Technically, we have innumerable GUI elements and structures to organize our ever-increasing content needs. For instance, jQuery-based sliders, Ajax based tabs, and simple pop-ups or modal windows through programming. Among these, modal windows have certain advantages to do off-canvas designing for web and mobile platforms.

Advantages of Modal Windows

Let me list those advantages in brief just to mention:

  • Modal windows are quite smaller UI element in most of the cases so save space
  • It is floating over the existing page so you need not to create special space for them in your layout, just give links or CTA UI element to pop it up
  • It never requires loading of entire page and simulate the Ajax like functionality so end-users like them so you can consider the modal window as improved usability step in your web designing
  • You can move modal window simply by dragging it on the existing page so offer great convenience for users
  • As modal windows are part of off-canvas design, you can add them in multiple occasions and in as many as you need, of course, don’t exceed here too

Contextual Usage of Modal Windows

No doubt, modal windows are excellent structural UI elements, but they are not applicable on all sorts of content or media so be careful while incorporating in your UI designs. Here I am going to listing and depicting where and when modal windows elements should use and not.

For Lightbox

In these days, our images and videos are of large to extra-large size. Therefore, incorporating them on live web page or UI prove costly and strenuous for layout designers. If we use lightbox for images and videos we don’t have to load or reload web page frequently and can reduce the loading burden until lightbox is not opened. You can use thumbnails of images/videos at linking UI element instead of mere text link or simple button. Thus, you can give ideas of the content before clicking it.

Moreover, you have many options to highlight your content of lightbox in modal window design. For instance, you can blur the background of the rest of screen against the lightbox so your visitors/users can easily see the image details or watch video without distractions. Workings with background of modal windows are easy in styling so you can show your creativity freely.

Another usage of lightbox is converting modal windows into the image galleries. Here you can use auto-sliding or manual next-previous buttons to the lightbox to give best user experiences.

There is much other usage of modal windows in web or mobile UI designing, but we will check them in the next part of this series.

 

Author Bio:

Shoaib Marfatiya is an eminent writer in web development industry and its verticals. He has contributed a lot by throwing lights on very intricate issues of web and mobile development community.

 

Test Hard, but Test Smart—A New Message to the Designers Part 1

Test Hard, but Test SmartIt is hard fact that we are living in multi-screens and multi-devices era of the web and mobile applications. Unlike earlier desktop only designing, we have to design UIs for cross-platforms and cross-browsers. Designing itself is not tough as we know how to go responsive well now. The real issues arise when we are going to test our website or mobile application for a release.

Today, I shall restrict up to website designing and testing leaving mobile application for next time so my target is responsive web design. Few years back, we have to consider testing our website on five to six browsers on the desktops including Windows and Mac PCs. Unfortunately, today we have to test on nearly 15 browsers and numbers of mobile devices including tablets along with smartphones of various sizes.

Testing Tough & Costly

Therefore, testing is not only time-consuming, but also costly affairs for small start-ups or even seasoned freelancers. Hardware fragmentation is at its peak and we have numbers of mobile devices to test the responsive website. It is true that we can’t cover entire our audience with profound testing as possessing numerous devices is a nightmare even a big web development company.

Think of Smart Testing

In short, you have to forget the complete testing on all the devices your target audience is using. Instead, if you have a solid testing strategy, you can cover majority of population of your targeted audience. In other words, you should be smart enough in testing and cover sizable audience with least investment of time and most importantly money on purchasing real testing devices.

If you closely observe the properties of browsers and testing devices, you will find best clues to get some smart ways to do things quickly and cheaply. For instance, if you code is running smoothly on the Chrome of Samsung devices, then probabilities are higher that they will have less friction on other browsers of Android devices. If your IE 9 has error free screen then least chances remain for IE 11 to show JavaScript errors.

Based on such similarities and peculiarities of browsers as well as devices, we can group them in a logical manners and can give them priorities according to our website and our targeted audiences. Unfortunately, each website is unique and have unique audience as no business is same in the market, we have to carve browser groups each time for each new project. Based on my experiences, I can say that it is not much difficult to get mastery over time.

As per my strategy, I sometime test only 50% browsers and release the website. Afterwards, I test rest of browsers and fix the long tails without delaying my release data further. Another strategy is I never leave brand new version of website that is releasing first time without testing on all of my browser groups, say four groups.

Of course, I do test only primary and secondary browser groups when I am a bit in hurry and website is for redesigning. However, accomplish rest of browsers in one or more steps at later dates. This way I apply the rules of ‘smoke testing’ by fragmenting my testing schedule. However, smoke testing offers you only some flexibility and relaxations, but never let you escape from complete testing on your all browser groups.

I especially, apply smoke testing on the PSD to Joomla conversion projects where we have to deal with mainly B2B clients and they are in hurry to produce results of their end clients. I hope we will discuss on testing and creating browser groups in next part as we have space constraints in this post.

 

 

Assure a Successful Email Marketing Campaign Part 3

 

Newsletter Email Marketing
Newsletter Email Marketing

Lujayn is not only mean to designing and programming, but also dependable friend of its patrons and their businesses. Since marketing is prime need of success. E-mail marketing is still functional and viable strategy in modern marketing. Therefore, Lujayn is extending helping hands to create HTML-CSS based emails with modern concepts of email marketing. This series will introduce its various facets in friendly manner.

In previous part 2, we have explored the welcome email types of marketing emails in this series. Keeping it continue, we will see now Newsletters types of emails in this post in-depth manner.

Newsletters Types of Email Marketing

Perhaps this one is the most often shooting emails in marketing emails genre because once the subscriber is accepting their occurrence in their inbox they are happen regularly like daily, weekly, fortnightly, or monthly in some cases. No doubt, exaggeration in their frequency is never advisable anywhere and in any niche.

Purposes of Newsletter Emails

  • To acknowledge the brand: For those who are not aware of the brand yet interested to know about, this email serve them. It is true that we have other media to augment our brands including social media, but email newsletters are consider as the most professional approaches yet in industry and 90% people accept this fact.
  • To update the existing customers: once you shopper coming in touch with you they are eager to know about some more similar products of your niche or have temptations to get various marketing incentives and offers from you in personal manners. Therefore, newsletter emails keep them updated with each new move on your side.
  • To get personalize touch: If you are offering unique opportunity for your patrons to come in one-to-one bases contacts through newsletter emails they like.
  • To save marketing budget on other channels: if you have good subscriber base you may don’t need frequent Ads or traditional marketing expenditure since you have good ROI with newsletters.

You may have question that why a team of developers has interest in describing these purposes upfront. Well, if we are not aware of the purposes of design how we can we implement them for a success. For instance, we have to think of its content planning, layouts, interactions through links, and user experiences at last during the course of email development and its executions.

What Lujayn Do for You

We have to design easy CMS for regular content update keeping theme of email. We have to think of acquisition cost, duration of user engagements, and revenue over reminders against the CTR on your website or online store. Therefore, we always do custom designing for your newsletter email according to your niche and needs. We go in brief on content size, be they text, image or video. We always stay relevant and give only interesting and relevant links of your website or storefront pages.

 

Some Words of Wisdom on Usability

We might have heard lot of talks on the usability, but in simple words, it is easy to describe and understand usability as a web designer. Therefore, I have given a few lines or phrases regarding to usability and bring them in our web development as well as mobile development project with least hassles, but much efforts!

Phrase #1: Understand the Usability

If you give assurance that your product will work well for the average users with some average abilities and experiences, you are offering absolute usability in the product because you never let your users to fail whatever they intended and without much frustrations. – Make Product Completely Usable.

Phrase #2: Create Self-Explanatory Product

It is obvious that if your users don’t know how to use the product, they definitely leave earlier so make self-explanatory products by guiding them through visual and textual clues and incorporate most possible conventions in UI and UX designing.

Phrase #3: Avoid User Confusions and Frustrations

Users are always in hurry so create UI design and content layouts such a way that your visitors have to think least (simplest products) and can reach at their intended goals rapidly without any frustration in the usage of the products.

Phrase #4: Don’t Trap Users and Offer Free Reigns

It is a fact that back button on the websites is the most used UI element in the history of web and hiding Home button is a sin for good usability. Moreover, search field is a shortcut for repeat users as well as tech-savvy audiences. Therefore, offer all without playing any game with your users’ psych.

Phrase #5: Push Users towards Conversion Rapidly

Try to remove all possible obstacles including some happy talks with your users and push them to reach at their goals hence your websites’ goals-Conversion. Otherwise, they will change their mind and you missed them forever. In order to do this you should keep restrictions over your marketing driven grid to extract maximum info from your users by sign in or registration mess or offering social buttons in the way of checkout unless they push shopping carts in wish lists.

Finally

In short, you never let your users to go without achieving their goals for that they had visited your website or web application. Thus, above usability guidelines will make you an excellent usability and UX designer.

 

Gestalt Principles Sit At the Foundation of Everything We Do Visually As Web Designers Part 1

Gestalt had drawn some useful principles in human psychology and we web designers always and all time dealing with human psychology anyhow. Therefore, today I have decided to introduce some useful principles and their importance in web designing process.

Every individual have a different perception. They perceive things and objects in their own way. Human being when looks at an object he perceives it entirely before she sees the particular object. Human sees an object as whole before she starts seeing its parts and looking minutely about its features. Humans tend to see the objects in a group rather than as different objects, whether they may relate or not. Technically human brain has a few characteristics in which it collects information and perceives the environment around it. Following are the ways in which an individual perceives objects.

Emergence

Emergence is the process of forming complex patterns with the help of simple rules. When an individual attempts to identify an object she looks at the outline first. Only after identifying outline, she matches the shapes and parts of that object and gets the clear picture of it. Emergence is a way in which an individual processes the information that she receives from his perception and draws a result.

Perceptual organization

Perceptual organization is a way in which an object that is perceived contains more spatial information then what is actually present. Generally, humans match the patters of what they see to the patterns of the objects that are actually present in their memory. Moreover, always there is no exact match present. They find a near match, fill in the gaps and spaces with it, and perceive an object in that manner.

Multi-stability

Human brain is active in such a way that it does not rest on an object for a certain time but keeps on moving over the other information inputs that it receives. Multi-stability is the tendency of human brain to dodge between the objects perceived at a time and their alternative interpretations. An individual can perceive an object in more than one way. She is not capable of seeing both at the same time but dodges between two alternatives quickly.

Invariance

Human brain is capable enough of identifying an object or processing information by just from a clue given to it. Invariance is a way of perception in which an individual perceives a single object and recognizes it independently whether of its rotation, translation or scale. Despite an objects different appearances an individual can identify it as she have developed an ability to recognize it from different perceptive.

Conclusion

The perspective of every individual is different from that of his fellow individuals. To attract attention and to motivate an individual to act on it you have to put forward something that attracts attention of the individuals perceiving it. In graphic design too, you will have to make a design that appeals your observers. You can get attention from your observers by designing something that touches them and appeals them based on their emotions, needs and wishes.

In this article, we have just discussed about the outline of how an individual perceives objects and environment around him, collects information, and relates to it. In the next article, we will discuss about the gestalt’s principles and their working in designing.

 

Incorporate Current Trends to Make Your Website Look Fresh and Relevant

In 2005 when I have started web designing and web programming, we all have an awesome platform and it was Micromedia Flash. Yes, Adobe was not on the horizon except for Photoshop.

With Flash, we were creating entire website and lots of animations, splash pages, introductory presentations, etc. Unfortunately, today Flash website or Flash technology itself is considering as antique piece. This indicates that how time is changing fast and trends are changing rapidly. Many new styles comes and many go to disappear in timeline.

Our tastes, standards of likeness, fascinations, and definition of sumptuousness changing ever with the pace of time. Therefore, as successful web designers, we have to keep learning constant, keep our eyes on coming trends and technologies, and most importantly try to experiment new things with some creative thoughts.

 

Website Performance Matters More

Today we can’t think about the Flashy animations, splash pages, or heavy weight images, which can kill time and interest of the ever shortening attentions of our audience. Load fast and place important things in logical yet alluring manner using superb information architecture and content strategy. UX is a new buzzword in the market. Thus, you have to respect the needs of the market and afford UX professional or learn UX fundaments right now.

 

Flat yet Intelligent Web Designs Rocking

Today we need intensive image optimizations in order to make responsive designing or mobile specific web layouts. This directly eliminating usage of excessive Photoshop effects such as rounded corners, drop shadows, reflections, embossing, gradients, and other various filters as they increasing our KBs. The biggest players like Google, Apple, etc. are more banking in flat and sweet designing.

Today our main focus is to deliver message of the website or image effectively therefore, we have to avoid all distracting things from the ways of the eye flow of our audience. Thus, white spaces, judicious style of texts and most importantly simplicity matter more here. We have only one slogan “Go to the point, no disturbance please”.

 

Off-Canvas but Smart Web Designing

However, popups and flyers/fly out windows are prohibited in the beginning of the website as they cause higher bounce rate. We still use popups intelligently in our web and mobile designing. As most of the time we never prefer to let our users to leave their existing page, product page in e-commerce, in particular, therefore, we have to take help of popups or fly out windows to show additional yet temporary information.

Off-canvas approach are desirable in present responsive web designing era as they solve our major problems without creating distractions in user experiences and various iconic designing prefer springing or popups whenever user tap it or hover it.

Finally, learning HTML5, CSS3, JavaScript, jQuery, and other contemporary scripting equip us to accomplish high quality animations, splashing effects, and much more in real-time using Ajax like technologies are our insurance against the success in modern web designing.

 

Use White Space as an Active Element in Your Web and Mobile Designing

Once upon a time web designers and even graphics designers for print were considering white spaces a wastage of real estate of the web or printing page. However, it was costing factors that lead print media to use maximum space whereas the size of monitors at that time force web designers to utilize the most available spaces on the small screens.

Today, both have changed and we are living in an user experiences era where we have new parameters to consider the hearts of the readers so let’s take a brief review of the usage of white spaces on the web designing front and their ultimate benefits in order to improve our ROI.

Benefit No. 1—Readability

Yes, we are living in fast-paced era where everyone suffering from time shortage syndromes and its ultimate solution is reading the text as quickly as possible. Now, tell me if you have a paragraph with condensed text and intimidating you grasp the content quickly, what will you do? Definitely, you may prefer to leave it and jump to another para or page, which is rather easier to read.

Now, if you technically deprecate that para you will find that whether the font size of the text is not good enough or the space between the two lines are not adequate to separate them properly and give ways to your eyes to read quickly. There might be some other factors like padding of paragraph margins might not enough and making it clumsy at first look.

Sure, the researchers on the readability have found out that if text font size and line height (space between the two consecutive lines) are not in ratio of 150%, means if font size is 10 then the line height should be 15 pixels. Same the way padding or leading space between the page margins and para should be somewhat more than 10 pixels or appropriate to the font size of the texts. Similarly, usage of bullets and other tricks to make texts scanning easy will prove useful to achieve greater readability.

Thus, judicial usage of white space makes texts easy to read and comprehend. The scientific reason behind it is that people love scanning the texts rather than reading it word-by-word. The same principle is working in case of images where congested typography is prohibited for sake of good user experiences.

Benefit No. 2—Comfort to the Eyes

If you leave enough white space in your image/graphics designing, it will offer a comfort to the onlookers and let them to focus on the main message of the image first. For instance, you wish to evoke a sensation through some graphics, but your typeface and their background is attracting attention first you might lost the delivery of your important message to your audience and visitors will leave image just after reading the text only.

Benefit No. 3—Smooth Eye Flow

This directly teach us that make secondary message subtle and suppress against the first one by offering enough white space in the graphics. Another important usage of white space is to make eye flow of the user smooth this directly leads them to focus on the main parts of the image

Benefit No. 5—Grab Attention

As in above para, we have seen that white space is an active element in the web designing of the content and the graphics designs so we can use the white space in some smart ways such as to grab the attention of the users. For instance, if you want to grab attention of the readers on the call-to-action button or an UI element you have to leave some extra white space around them and make the button prominent in the eyes of the visitors so they focus their thoughts on the message of the button and take appropriate action.

If we make call-to-action button heavy in size and color we can add more flare them by providing more white space around it and grab immediate attention of the customers in many e-commerce websites.

Benefit No. 6—Clustering the UI Elements

Yes, if you want to make some visual groups of texts or UI elements you have very handy arsenal and that is white space, which allows you to formulate groups, or clusters of the elements, which may grab ultimate attention and deliver a well-crafted message to the users of the website or web application.

 

Helping Hand to Newbie WordPress Developers Part 3

In previous part 2, we have explored the ways to know database, and learned how to use them in our WordPress development effectively. In this recent post, we would like to know about the transferring process of local WordPress website to the live server without losing anything and with a smooth process.

Use cPanel

Once you finish the development process at local server, you will have huge database as well as bulky folders with innumerable files for posts, pages, images, themes, plugins, and so on. Today we are using cPanel to place and manage our website or web application sources to the hosting server. No doubt, cPanel is equipped with all tools and technologies to manage and migrate sources from local to live server manually, but there are various plugins available to do these tasks automatically with adequate security and speed for bulky web sources.

Use FTP

There BackupBuddy and Duplicator plugins used in recent generations or WordPress programmers who used to face such task on daily bases for their patrons. We know we can’t copy past our source files and folders without setting permissions and security variables appropriately. Therefore, use of FTP (File Transfer Protocol) is mandatory for all WordPress developers.

There are various FTP clients available in the market for free or paid such as WS_FTP for windows platforms, Filezilla as firefox or other browser plugins, FireFTP for all platforms, Cyberduck for Mac only, and WinSCP for windows only.

Transfer Database

The first and foremost step is to transfer local WordPress database using phpMyAdmin. As we have learn about phpMyAdmin in previous parts, we need to know that here we have to use only its export button located at the top menu bar of cPanel of your local host. Now, select all tables and zipped them to compress. After compression select zip file and push the Go button, located at the bottom of the page to download your database.

Now, turn on FTP client and connect it with your live site, where you will find various directories so you need to select proper directory for you and that would be public_html directory in your domain. The next step would be to select your WordPress files on local server and upload them to the liver server.

Create New Database

For database transfer you need to create MySQL database on the live site first using the cPanel features given especially for MySQL database. Once you push that database button on the cPanel dashboard you will enter in to the database creation wizard where you need to fill up all essential input fields with appropriate information.

Finish Database Transfer

Now, finally you come at the stage of importing you zipped database file saved in previous steps. At very moment, database section on cPanel will help you to import database so go to database section and click on phpMyAdmin where you will find new database with no tables so now click the import tab in the top menu and on the import page select file button and select your zipped database. After selection, you can press Go button at the bottom of the page and start importing process.

In next part, we will finish the transferring process from local to live.