CSS

JavaScript and other Web Anxiety

JavaScript and other Web Anxiety

Technology

I recently came across this excellent video called “Full Stack Anxiety” by Joel Califa with this related article by @FirstMark and it got me thinking about my current situation as this hybrid UI/UX designer and front-web developer.

First, a little background on my web career for context

I have been building digital deliverables for the web since 2005, and in the beginning, I struggled with HTML and CSS and was more of the Adobe Creative Suite guy using Photoshop and InDesign to design print materials. Later on, continued to traverse the Adobe Creative Suite with Flash and Dreamweaver (actually when I started using Flash and Dreamweaver they were still own by Macromedia). Built a few great portfolios in Flash and some okay websites in Dreamweaver utilizing templates.

Hit a few bumps in the road at the beginning of my career working for some not so great freelance gigs and contract jobs, but all of them a learning experience making me a better at what I choose to focus on and find my niche in the web world.

Between 2006 and 2007 I began to understand HTML and CSS and was able to build websites utilizing Photoshop, NotePad++ and your traditional shared hosting provider, uploading files via FTP.  I also was able to implement things like JavaScript and jQuery but never without reference; I could never write JavaScript from scratch as I did with HTML and CSS. There was a lot of copying and pasting happening with JavaScript.

Then I discovered WordPress, and it opened a whole other realm of opportunities for me.  I felt limitless with WordPress and still do today. But what I was finding utilizing the framework like WordPress was that I was missing out on the opportunity for what I  would consider “hardcore web programming,” for example building a PHP or JavaScript web app from scratch. And doing that hardcore web programming with all the fancy compilers and make tools you find today. For example Gulp, Grunt, WebPack LESS, and or SASS.

Also felt like I missed out on genuinely understanding JavaScript and now not having a keen understanding of JavaScript background leaves you not worthy of many UI developer jobs. Or even worst you try to take a UI developer job to learn JavaScript and all the cool new tools, but the current web-devs are a bunch of pompous, egotistical assholes. And if you don’t operate at their speed your, then you are an idiot! “Look at how fast I can use the command line.”

Sorry had to vent there, let’s get back on track.

What to focus on next for my web career?

I have held a multitude of positions everything from graphic designer to web developer to the more recently UX designer and UI engineer. To me, they are just titles. Why? Fundamentally I approach all my jobs with a similar mindset, get presented with a problem/task and do everything in your power and knowledge to solve that problem even if not knowing the proper syntax or methodology to explain it. How to explain it? Utilizing your past experiences,  online resources, and communities.

Over the years you gather the necessary and experience and knowledge to take with you for your next adventure (job/gig). But sometimes that only gets you so far. Questions I ask myself today

  • Should I niche down? – For example be purely a WordPress Developer.
  • Should I get better at JavaScript and pick up a framework like React.js? – Probably should
  • Should I focus more on product design and management? – Maybe one day I could be a product manager and not worry about coding every again.
  • Should I focus on project management? – Maybe one day I could be a project manager and never worry about coding again.
  • Do I continue to be a jack of all trades and master none? – Not likely a good idea.

Hence, you can see where the anxiety comes in to be being a web-dev hybrid purple squirrel thingy.

But thanks to the excellent video and article by Joel he does give us some impressive outlooks on what to focus on (note this our my takeaways):

Be happy with your career and what you decide to do

Currently, I am satisfied working as front-end web developer/graphic designer typically in marketing departments utilizing tools like WordPress, Photoshop, Moz, Hubspot, Google Analytics and Hootsuite to deliver compelling digital solutions and custom WordPress sites that drive leads to convert.

Where do I want to be eventually, maybe? I may see myself as a creative director, product manager or even a director of development/IT. But who knows where the road will take me. For now, I keep gathering experience and knowledge with me with each job and moving forward.

Since I feel confident in the UX design process and am proficient in Photoshop, rapid prototyping, etc. I feel like I want to focus on learning hardcore JavaScript development. Why? I think it’s imperative for me to stay relevant in the front-end web development world. Plus I feel most developers get paid more than designers in some cases*.

*Of course, this is based on industry, company, location and whole other bunch of factors. But currently I see developers getting paid more in my region and more opportunities for developers then I do designers. 

Stop being a jack of all trades and master none

So to paraphrase Joel,  “Stop chasing the trends” – You don’t have to learn the latest and greatest JavaScript framework. But be aware of those frameworks and maybe try one out but do what you are good at for now and keep learning.

So thanks Joel for putting things in perspective it helps. Until next time, Godspeed.

Are WordPress Templates Difficult To Understand

Are WordPress Themes Difficult?

WordPress

Are WordPress Themes Hard to Understand?

One of the things that seem to put people off using the WordPress software on their own site (as opposed to the hosted WordPress blog site) is the technical side of the process involving WordPress templates and themes. There’s a lot of talk about code, PHP, CSS, and plenty of other confusing abbreviations that don’t mean a lot to many people! This is unfortunate, as a WordPress blog can make such a big impact on web pages, and can even be used as a standalone website once you get your domain name and hosting sorted out.

Understanding the way WordPress works, installing the software, and figuring out how the templates fit into themes does require a bit of techie know-how. It is not as hard as it first appears though, and thankfully, for those of us who are a bit technically challenged, there are some excellent guides and resources that can help make the process a whole lot smoother.

The WordPress templates are the backbone of the themes used to build the WordPress blog pages. Themes come in all manner of styles and designs and can be customized by altering the layouts, installing WordPress plugins and by adding or changing the templates. WordPress templates are basically just a bunch of files that together make up the themes for your WordPress blog site.

Essential WordPress Theme Files

Generally, a default set of templates for WordPress themes would include some of these essential files:

-> index.php this is the main template file for your WordPress blog
-> header.php the header template
-> footer.php the footer template
-> page.php for creating WordPress pages
-> single.php for creating WordPress posts
-> sidebar.php the WordPress blog page navigation
-> style.css the stylesheet that makes up the layout for your WordPress blog.

These are just the basics; there are much more WordPress templates that can be added to customize your blog; for example, links, search forms, archive posts, and WordPress blog comments.

Another confusing aspect for some people is the mention of template tags. Again, these are not as difficult to understand as they first seem. They are basically just bits of code to help the WordPress templates to perform their job properly. The tags within the templates contain the instructions to make your WordPress blog a cleverly designed set of pages!

Customize WordPress Pages

One of the great things about WordPress templates is that you can customize them to design individual blog pages as well as post pages. The pre-defined templates will usually apply to all the pages on your WordPress blog, but you can add, remove or change the other template files to create unique items on each page.

If you consider the WordPress templates as the mechanics of the themes, you can hopefully begin to understand how they work together to create a WordPress blog.

CSS And Semantic Markup

CSS And Semantic Markup

CSS

Advancements in CSS and semantic markup

One thing that I have learned in over 10 years creating sites is that the ‘web is persistently changing, and to keep up you have to change with it. One of the later advancements in website composition is the utilization of CSS and semantic markup. CSS and semantic website composition have a few advantages: lucidity in code, program and other web-empowered gadgets similarity, separation of substance and introduction, littler weight on bandwidth, and better permeability to web crawlers.

Once upon a time, we outlined locales with divs and hacked those divs into doing things that they were never intended to do. The div tag was intended to show unthinkable information, not as an approach to rendering the design of a site. Lamentably, a superior option did not exist, so we utilized divs. This made for wasteful, moderate stacking destinations with code that was difficult to peruse and keep up. characterizes semantic markup like this:

Sematic pages “supply data for web indexes utilizing web crawlers. This could be machine-lucid data about the comprehensible substance of the record, (for example, the designer, title, portrayal, and so on., of the report) or it could be absolutely metadata speaking to an arrangement of certainties, (for example, assets and administrations somewhere else in the site). (Take note of that anything that can be related to a Uniform Resource Identifier (URI) can be depicted, so the semantic web can reason about individuals, places, thoughts, felines and so forth.)”

Nowadays, hip fashioners and engineers utilize CSS broadly to make lovely, completely guidelines agreeable locales. CSS-based design permits us to create destinations that will corrupt viably – that will be that they will be perceptible to a wide range of gadgets, for example, PDA’s, phones, T. V.’s- – and will work accurately on gadgets that don’t exist yet the length of they are guidelines agreeable.

CSS Isolation

Above all, creating destinations with CSS permits us to adequately isolate substance and introduction. Have you ever taken a gander at the source code of HTML pages that were made with a div-based format and pondered “what the hell is going ahead here?” You see heaps of opening and shutting of divs and div lines all combined with literary substance and representation. With a clean, CSS-based design you can make pages that are effectively comprehended by taking a gander at the source, making them less demanding to comprehend, keep up, and refresh.

On the off chance that you have a site with high activity, you can essentially lessen the measure of bandwidth utilized by transitioning from a div-based site to a CSS-based design. In the event that a guest to your site doesn’t need to load the greater part of the code expected to render those divs and spacer gifs, you are transmitting less information.

CSS likewise offers site improvement benefits over divs. In the event that you have divs construct a business website that relies on the light of Internet activity to turn a benefit or acquire new customers, you will see genuinely favorable circumstances by changing to CSS. At the point when a web index insects your divs-based web page, they recover a lot of substance that has nothing to do with your business. At the point when web search tools arachnids a clean CSS-based website, the larger part of substance recovered will be a literary substance that depicts your business. The proportion of substance to code is higher with CSS-based designs.

We’ve all observed web search tool depictions that don’t bode well; that is on account of web search tool creepy crawlies utilize a top-down technique for recovering data. Whatever is highest on your record, the web crawlers will believe is the most vital piece of the archive, and in this manner ought to be utilized as the depiction. Since we separate substance and introduction with CSS, we can put the most critical data at the highest point of a report regardless of where it is really shown on the page. Attempt that with divs!

I trust this article gives you an outline of why it is imperative to move from your present divs-based format to a completely substantial CSS usage. On the off chance that you don’t have a site, yet are anticipating propelling one sooner rather than later, ensure you tell your engineers you need a CSS-based usage.

Welcome To The World Of CSS Web Design

Welcome To The World Of CSS Web Design

CSS

Improved with the help of CSS

Although CSS was first introduced in the mid-1990s, it did not become a mainstream tool for web designers and masters until more recent years. This is unfortunate because there are millions of poorly designed websites cluttering the internet that could be easily improved with the help of CSS.

So what exactly is CSS?

CSS is an acronym that stands for Cascading Style Sheets. The term Cascading Style Sheets implies two things. First off, the style sheets are cascading. This means that multiple style sheets can be used for a single web page. Additionally, the term “cascading” also refers to the way a style is determined in the event that more than one rule matches a single element. The second thing that is implied by the name Cascading Style Sheets is that the purpose of CSS is to style web pages. Whereas the purpose of HTML (or XHTML) is to define the structure of a web page, the purpose of CSS is to define the presentation.

Different browsers

The reason that so many web pages have broken layouts in different browsers is that they try to use HTML to control the structure and presentation of the page. The most common abuse of HTML is attempting to use tables as a presentation method. Although you may be able to achieve the look you want in a single browser, your web page will look broken and distorted in many other browsers. The only time that tables should be used is to hold a set of data (such as the results of a scientific experiment). If you do have a legitimate use for tables on your web page, you can even use CSS to style your table and make it more attractive.

Conclusion

By taking the time to learn CSS, you will be able to create a web page that looks much more consistent across a variety of browsers.

6 Basic Website Design Tips

6 Basic Website Design Tips

UX Design

6 Simple website design tips

1. Use CSS (cascading attraction sheets).

If you follow through not apperceive CSS, ferret out it. CSS allows you to maintain the formatting of your town (e.g. the color or size of a blonde of text) on a disparate at variance page – a CSS document. Thus, with CSS you can impinge the formatting of a common-element by simply updating one piece of code on one page, rather than updating all the pages of your site. For example, if you want to change the background color of your website, you could just change your one CSS sheet and your entire website’s background color would change. Another great aspect of CSS is that you can use it to set the default properties of HTML tags. This can be used to counter browser compatibility problem – that different browser (e.g. Internet Explorer, Google Chrome, etc.) use different default settings.

2. Test your website in all browsers.

Just now your website displays a singular rubric in one browser, doesn’t cruel it commit an act that disposal in an also browser. You should permit that your website displays properly in all of the primary following browsers: Mozilla Firefox, Internet Explorer, and Google Chrome, and Opera.

3. Use opens source scripts if you need to plunge into an energizing website.

Even if you undergo influential languages (such as JavaScript, PHP, and MySQL) absolutely enough to lead your receive software and features, you do not want to do that if you are a beginner. There’s no reason to create your own dynamic scripts (e.g. shopping carts, chat-rooms, etc.) if you can find full-functioning customizable open source scripts. A great benefit of this method is that the customization options will separate the code that changes your website’s look and feel from the functioning code. If you design the code yourself, you’ll be tempted to mix the look and feel with the functioning aspects. So, if later you want to update the look and feel, you’ll have to dig through the long software scripts. If you’re going to be using freeware or any other code that you didn’t design yourself, you should still be familiar with that language.

4. Don’t benediction for free or tasteless web-hosting.

Okay, this isn’t necessarily a star tip. However, hosting is the twin to design. Free hosts may emit your website with awkward ads. So, you won’t be adequate to task your region as is. Also, free and cheap hosts often don’t support dynamic websites. Unless your website is supposed to be a joke, don’t use a free host.

5. Don’t compose your email superscription on your website.

If you have a mailing directions that your customers can betterment to discharge you or your business, make public that on your website. Website’s with a phone embrace or mailing directions loom much more reliable and honest than websites without contact information. However, don’t publish your email address, because spammers will use web-crawlers will to pick it up. Instead, design a form on your website that customers can use to send messages or questions without giving your email address.

6. Take it slow.

Unfortunately, the own disposal to alter to a brilliant designer is considering experience, but your vim can’t render sloppy pages. Don’t go to generate confused and dynamic websites without the ability. If you try to design a code, but find it hard and the code begins to come out sloppy, don’t hesitate to just throw it out. It’s better to have a simple, sleek, and functional website than to have a complex, sloppy, dysfunctional website.

4 Steps To Success In Web Coding

UX Design

coding-924920_960_720

If you are planning to become a serious player in the webdesign world, you should now what to learn and discover. Here’s a short list that gives you an overview of your needs.

1. Learn HTML 

Before you start creating websites you should master HTML. This is the key element to even start publishing documents on the web. This sounds pretty obvious but there are some elements that you should understand like the label element which will add great usability to a form. 

Continue reading →

Search Engine Friendly Pages

Digital Marketing

seo-592747_640

There is no point in building a website unless there are visitors coming in. A major source of traffic for most sites on the Internet is search engines like Google, Yahoo!, Bing and so on. Hence, by designing a search engine friendly site, you will be able to rank easily in search engines and obtain more visitors.

Major search engines use programs called crawlers or robots to index websites to list on their search result pages. They follow links to a page, reads the content of the page and record it in their own database, pulling up the listing as people search for it.

Continue reading →