Why Mobile First Design Principle is so Important on Website Development
Mobile First Design: Historically, most web designers and their clients have approached the desktop side of any project first, while leaving the mobile part as a secondary goal that gets accomplished later. Even with the rise of responsive design, many of us begin with the “full size” site and work our way down.
One downside to doing this is that priority is essentially given to desktop/laptop users. Unfortunately, many design elements and functionality that are optimized for desktop computers and laptops do not transfer well to the mobile version of the design.
The growing importance of mobile designs has contributed to many designers following a “Mobile-First” strategy with their designs.
In this article, we would like to talk about why it is now so important to do this.
What is a mobile-first Design?
Mobile first design is a design strategy that says when you create a website or app, you should start sketching and prototyping the smallest screen first and work your way up to larger screens. Essentially, it’s about delivering the right user experience to the right device.
The reason that this makes sense is that with such limited real estate on small screens, UX designers must prioritize the most important aspects of their website and apps, namely content.
For many years, mobile websites were an afterthought to the design process. An addition, not a necessity. The slow decline of desktops, coupled with the rise of mobile phones over the last 5 years, has shown that mobile-first design has to take priority.
Mobile-Friendly vs Mobile-First Design:
We’ve got used to the terms responsive and mobile-friendly design. Isn’t this just the same as mobile-first web pages? Although the two terms sound somewhat similar, they bear different meanings.
Responsive design is built around the concept of media queries that target specific devices and viewport sizes. With this in mind, you can code up your initial CSS given a mobile perspective and then use media queries to selectively serve up additional styling as the viewport size increases.
This is likely the opposite of the method that you typically take with responsive design: start big and then reduce. Given the arguments above, though, there’s obviously a lot of logic behind structuring your media queries from small to large.
Mobile-first web design is an independent technical approach to building websites. Instead of building a site for the screens of larger devices primarily, the technique suggests that you put a smaller smartphone screen at the heart of your web development strategy. This allows you to focus on the essentials, mainly, bringing the primary focus on the design elements and pieces of content that bear the major importance for your brand and your audience.
When a user accesses mobile-first web pages, additional layers of content are added. This makes your site well thought-out and content-centric.
Why the “Mobile First” Principle Is So Important?
Mobile conversion rates are up 64% when compared with the average desktop conversion rates. So, designing mobile first can lead to more profit for your business. And since Google ranks for mobile-friendliness, it makes sense to bear this in mind when starting a new project.
This way of designing is also beneficial when it comes to download times and users accessing your content as quickly as possible. With fewer elements, the page will load faster. When you consider a 1-second delay causing a 7% loss in conversions, it pays to design mobile first.
When you design from the smallest screen to the largest screen, this is known as progressive enhancement. It’s about designing with a strong foundation and adding enhancements as you go.
With mobile first, you create your strong foundation. This foundation will help strengthen other designs for tablets and desktops. The foundation should always be content and mobile first design emphasizes content over navigation – users get the information they need quicker.
This will also make your life easier since the mobile-first design starts off by tackling the hardest screen size to design for. The rest inevitably falls into place.
Mobile-first design forces you to really focus and maintain clarity by removing any unnecessary user interface decoration. By removing any distractions, you’ll invariably improve the user experience, and that makes good business sense.
How to create a Mobile-First Design?
One of the best and quickest ways to build mobile-first pages is to use a responsive website creator that allows you to build unique designs code-free. The popularity of drag-and-drop page builders grows at a fast rate. There is no need to spend time on the learning curve in order to be able to create versatile web pages without tweaking the code.
Moreover, you can use ready-made web themes that include all the essentials that are needed for a quick start to your web project. All you need to do is select a web theme that suits your topic, adjust it with the help of the drag-and-drop admin panel, upload the pages with your content, and bring it online.
Conclusion:
Neglecting mobile design in this day and age is a UX design sin. Delivering a pleasurable user experience should be at the heart of what we do. Using this mobile-first approach will not only make your life easier as a designer, but it’ll make the life of the user easier too. And isn’t that why we do this?
How Much Does A Website Cost?
How much does a Website Cost?
We are asked all the time. The problem is that there is no simple answer. There are many variables to price, and it is important to know these variables to make the right decision for your company’s website project.
First, a web designer or a web design firm. Many individuals are capable of producing the files needed to create a website. The problem is how capable they are. Today’s Internet technologies are very complex, and there are many issues to know, design standards, usability, technical choices, programming languages, database design, web services, social networking, search engine optimization, search engine marketing, server administration, maintenance, and much, much more. It is difficult for one person to have expertise in all of these areas. Additionally, an individual can easily get bogged down if they take on too many website projects at one time. A professional firm has the resources to move around to keep your project on a timeline. This all said an individual working from their home could be less expensive than a professional firm with a team of specialists. It is important to consider these issues together.
Second, what is the business model of the web designer or web design firm you are considering? Generally, there are three business models: a website builder application, such as you will find on GoDaddy.com, a flat rate price for a template website, or an hourly rate for a customized website. A website builder is simply an application that resides on a website server, whereby you choose a rudimentary, generic template and access the content area on the page with a text editor. Typically, these website builder applications charge a fixed monthly rate. You can add additional features for an increase in the fixed monthly rate. This is a very inexpensive way to “just get a website online”. Their shortcomings are that they look very generic, are not very flexible, are not specific to your industry, very poor performing in search engines, you do not have assistance in how to write or present your concepts on the website, it is not transferrable, you are limited to the functionality offered by the website builder application.
Many web designers or website design firms will offer a flat rate to develop a website for you. This rate is usually derived from the website designer’s experience, and it is quoted broadly to fit the designer’s experience or expertise. For instance, you want a blog on your website. there are many ways to design a blog, and there are even more ways to present the blog to your website visitors. To control costs or the time involved in delivering this website functionality to you a web designer who is using a flat rate price will provide a set of pages and programming code that the web designer is familiar with or may have already produced. If the blog does not perform the way you want or is displayed as you wish, too bad. A “blog” was delivered, and you get “that” blog for the price that was quoted. This is true with other features, calendars, membership lists, newsletters, email blasts, etc. Many inexperienced web designers do not have programming skills and will provide a flat rate price because they utilize “off-the-shelf” solutions to your feature/functionality requests. Most of the time, they lack the programming skills to write a customized solution or to even make code changes necessary to effect the exact changes you want. Or, the “off-the-shelf” solution does not allow for code changes.
Most reputable, experienced, and professional web design firms provide website design and website programming, and consulting services at an hourly rate. These rates can vary widely, but it is usually the fairest way to provide web design services. Two things are critical when hiring a web design firm under this business model: be as specific as you can about the features and functionality you want on your website, and get an estimate of time/cost up front on that specific features/functionality list before beginning your website project. It is also very telling if your web design firm does not provide some room in the budget for contingencies. There will always need to be some changes or some additions. The web designer must put some padding on the estimate.
It is impossible to provide a price with any confidence when you tell the designer, “I just want a simple website. Nothing fancy.”, etc. Do you want a calendar? Blog? Newsletter? eCommerce? Membership directory? All of this functionality takes additional time to program into your web design. The design, the look, and feel, of your website, is contingent on these features – how to display them, where to display, etc. It is easy for costs to get out of hand once the project starts if you do not focus on completing your project quickly. If you run hot and cold on the process of designing and programming your website it will cause the firm hired to have to start and stop. This is a very inefficient use of their time, as they have to re-educate themselves on the project each time. It is also important that you communicate well with the web design team so they are not guessing at layout positions, minor features, and styling issues. It just costs them time and your money if they have to redo things.
Finally, there are some additional costs after the website design and programming phase – hosting of the website, hosting of email services, domain registration, search engine marketing. There can be additional costs depending on the details of your website (i.e. electronic gateway fees in the case of processing credit cards online, etc.) but, these are the primary charges you can expect on a monthly, quarterly, annual basis for just about any website. Web hosting/email hosting fees typically run about $10/month to $100/month, $200/month or more. Domain registration typically runs $9 or $10 per year to as high as $35/year. Search engine marketing such as Google Adwords can be budgeted but is difficult to predict because some industries are more competitive than others. The reason for this is because you bid for the position of your ads. Your budget could do the job as low as $100/month or may be as high as $1,000/month, $1,500/month or, more per month.
By the way, if you are getting bids from several web designers/web design firms, be sure you are comparing apples and apples before making your selection. It can be difficult to be sure what one designer is proposing matches up to the other designer’s deliverables. If you have any question or are unsure about a comparison, call the designers and ask for clarification. They will be happy to discuss it with you. We recently had a client who thought they were making a fair comparison. They didn’t. After awarding the website design project to a web designer working out of his house, they learned not everything was covered in the chosen estimate. The project finished over budget and it was completed late causing difficulties with sponsors and advertisers. The lowest price/cost estimate is not always the best value.
So, by now you are saying, “Great Kevin, HOW MUCH DOES A WEBSITE COST!” eMUNICATIONS charges an hourly rate. We will sit down with you at no charge to learn what your goals are, what your feature/function desires are, make suggestions, and we will come to a pretty good understanding of where we are headed. eMUNICATIONS will then provide you with a written estimate of the time and costs to build a customized website that will deliver the professional appearance, features, functionality, and results you expect from your website.
eMUNICATIONS uses a programming environment called Drupal. We are experts in Drupal and have done many websites utilizing this terrific programming environment. A well-respected (and big) Drupal training firm named Lullabot did a pricing survey among Drupal website design firms. You will be happy to know, eMUNICATIONS is on the low end of these scales. Not because we are less capable but because we are extremely efficient and specialized.
So sorry, as any reputable website design firm will tell you, to find out “HOW MUCH DOES A WEBSITE COST”, you’ll have to contact us and tell us what the goals of your website are.
Off-Page SEO Techniques to Improve Online Reputation
Search Engine Optimisation (SEO) is one of the techniques used to improve traffic to a website. This is where you construct your web pages and implement certain techniques to help you rank as high as possible on search engine result pages (SERPs). The higher your pages can rank on Google/Bing/Yahoo/etc. results pages, the more traffic your site is likely to get.
SEO can be split up into two separate categories: On-Page SEO & Off-Page SEO.
On-page SEO refers to settings you can apply on your website so that it is optimized for search engines. and it includes optimized titles and snippets, search-friendly URL structures, friendly navigation, user sitemaps, internal links, text formatting, user-friendly 404 pages, accelerated pages in terms of loading, mobile-optimized pages, high-quality fresh content, image optimization, external links to relevant sites (not broken) etc.
Off-page SEO refers to optimization activities you can do outside the boundaries of your website. Anything taking place outside of your website and contributing to your ranking is considered off-site SEO: social media marketing, influencer marketing, mentions (direct or indirect), guest blogging, and so on, so forth.
By deploying better off-page SEO techniques means you are trying to prove to your readers and search engines that your site is trustworthy, authentic, relevant, and could very well be popular in your industry, other benefits like the increase in rankings, increase in PageRank, more exposure.
Let’s get to the ultimate off-page SEO techniques checklist and learn some lessons.
Link Building:
Link building is another popular way of promoting your site. If you produce a popular, unique post for your site, then other people may want to link to it. Perhaps you have copied/published another website’s content on your site; don’t forget to place their website link as a reference. Do it for others and, if your content is trustworthy, let others do it for you. This is another way to increase your link popularity. Link building should be about quality, not quantity. If you try to ‘trick’ search engines by building artificial links, you are more likely to get a penalty rather than an increase in rankings.
Blogging:
Blogging is one of the best ways to promote your website online! By writing a blog for your website, you give a reason for visitors to keep returning to your site and keep up to date with your latest posts. It also helps search engines to crawl your site more frequently, as they have to update your latest blog post entries, which ultimately helps you rank higher in search engine results pages.
If you’re not very good at writing content for your blog, then you could always hire a guest blogger for your blog and ask him/her to write precise and unique content so that your blog can gain more credit from a search engine point of view.
Blog Marketing:
If you have created any kind of content which is share-worthy, then don’t hesitate to reach out influencers in your industry. Tell them to check your blog and ask for link backs from their blog. Make sure you get the links from completely relevant domains.
Engage in Social Media:
Social Networking is bigger than ever these days, If you want to make your business, website or blog popular, engage with people on multiple social media platforms. Social media presence will help grow your business and also help you get more backlinks.
Forum Submission:
Find forums online that are related to your sites and get involved within that community. Reply to threads, answer peoples questions, offer advice, etc. This all helps to build up your reputation as someone who is an expert within that position. Try to use “Do-Follow” Forums so that you can include a link to your site within your signature, which helps search engines crawl your site.
Directory Submission:
Many people may say that directory submission is dead! I believe that it isn’t as you are increasing the likely hood of people seeing your website. It is purely based on how effectively we are selecting those directories and how efficiently we are choosing the category for submission. You could submit to general directories, but for maximum effect, you are better off submitting to suitable directories. Of course, I agree that it gives quite delayed results, but it is worth doing it.
Social Bookmarking:
Social bookmarking sites are one of the best platforms to promote your website. When you bookmark your webpage or blog post on popular social bookmarking websites, you gain high traffic to your webpage or blog.
Photo Sharing:
Share your photos on popular image submission websites. Before submitting your images please optimize them with the correct URL and title tag. Before submitting your images, check if they have a proper title, description, and tags.
Video Marketing:
Just like photo sharing, if you have any videos that you have used on your site, then you can submit them to sites like; YouTube, Vimeo, etc. allowing people to find your content in other ways.
Answer the Questions:
One of the best ways you can get high traffic is from question and answer websites. Join high question and answer sites and search for questions related to your business, blog or website and give clear answers to these questions. Give a link to your website which will help in bringing you more visibility.
Infographics Submission:
Make creative infographics. These days, infographics are getting popular on the internet. Submit your infographics on infographics submission websites and give reference links to your webpage or blog. The image sizes differ with different websites
Conclusion:
Off-page, SEO is NOT just about backlinks as most people think. It involves your overall website trust, authority, social signals, and many other things. This off page SEO techniques guide is written to discuss some of the crucial factors that can improve your overall website authority on Google search. Don’t just rely upon on page SEO if you want higher rankings. Whenever you publish a new post, make sure to follow the off page SEO techniques mentioned here. Please always check your Google analytics report to improve your website.
Last but not least, avoid playing with fire and practice black hat off-page SEO techniques. You can turn both search engines, visitors, and subscribers to enemies. You can get penalties from Google, get blocked by visitors, or blacklisted by subscribers. And nobody wants that.
Dynamic sorting in Views for Drupal
A common problem that I see when working with non-table views is dynamic sorting. It seems as if there’s no easy way to make use of the sort functionality that views provide without using the table style. This is the method that I use to get around the problem. I’m not the first to do it this way, and I’m also not convinced it’s the easiest way to do it. But it does work and we’ve used it without trouble.
I create a module to contain a function to handle the sorting. That makes it easier to make changes on the fly and keeps code out of the database where possible. You’ll still have to do some work in the view, but it’s minimal and hopefully self-explanatory. Below, I’ve outlined the parts of the view that need to be edited or added. In this case, I want to be able to sort on title or price, but your case will likely be different. Change the sort features as appropriate.
Create an argument of type “Global: Null”. It can come at any point in your list, but there must be an argument present in that URL location or the code will not execute. I usually add a title or search type. Set the argument to display all values if not present and add a validator. Choose a PHP validator and add the following.
return _mymodule_handle_sortables($view);
That will allow you to edit the contents of the function quickly/easily without having to edit view / save view/preview view at each iteration. Note that I pass the $_GET variable. That’s not strictly necessary since it should be available in the function anyway. I just do it for easier readability.
First step, get the names of the sortable fields with the devel module:
function _mymodule_handle_sortables(&$view) { dpm($view->sort); }
Preview the view and note the names of the fields. Once you’ve got them, you can do the following to alter the output of the view:
function _mymodule_handle_sortables(&$view) { switch ($_GET[‘sort’]) { case ‘sell_price_asc’: unset($view->sort[‘title’]); $view->sort[‘sell_price’]->options[‘order’] = ‘ASC’; break; case ‘sell_price_desc’: unset($view->sort[‘title’]); $view->sort[‘sell_price’]->options[‘order’] = ‘DESC’; break; case ‘alpha_asc’: unset($view->sort[‘sell_price’]); $view->sort[‘title’]->options[‘order’] = ‘ASC’; break; case ‘alpha_desc’: unset($view->sort[‘sell_price’]); $view->sort[‘title’]->options[‘order’] = ‘DESC’; break; } return true; }
Add a PHP header to your view and add the following to it:
Now you can dynamically display a sort header. Here’s an admittedly overdone function to do that:
function _mymodule_sortables($g) { // Collect all the relevant GET parameters $gopts = array(); foreach ($g as $k=>$v) { if ($k == ‘q’) continue; $gopts[$k] = $v; } $opts = http_build_query($gopts); // Preserve the sort choice for selection $s1 = $s2 = $s3 = $s4 = ”; switch ($gopts[‘sort’]) { case ‘alpha_asc’ : $s1 = ‘selected=”selected”‘;break; case ‘alpha_desc’ : $s2 = ‘selected=”selected”‘;break; case ‘sell_price_asc’ : $s3 = ‘selected=”selected”‘;break; case ‘sell_price_desc’ : $s4 = ‘selected=”selected”‘;break; } // Unset the sort option so that it can be set in the url manually below unset($gopts[‘sort’]); $opts_sort = http_build_query($gopts); $output = “
Sorta-zz-a$ – $$$$ – $
“; return $output; }
Note also that I provide a means of choosing a different “display” within this view by preserving the url options and adding direct links. I’ve got a grid view and list view, the header provides links to the pages for each and preserves url options.
I ripped out some code for readability and to focus more on the point of this article, so let me know if you have any questions
