Awesome Building Websites with a Priority for Mobile

Today it’s more common to find a skilled web artisan who understands desktop support over mobile. This appears to be a symptom of building on the desktop browser for decades as opposed to other screens. Yet there is a growing case to argue that mobile development is the best place to start on new-age websites.

In this article I’d like to discuss a few key points in this argument. Namely that starting on mobile first will give you insight into how the design layout can unfold on larger screens. Prioritizing mobile isn’t always the best solution, but on today’s Internet it appears smartphone usage is growing at an alarming rate. Any web designer truly interested in building semantic layouts will jump at the idea of coding websites for mobile first.

Simplify all Page Elements

When I first started researching the mobile web I was frequently lost in a sea of CSS media queries and JavaScript plugins. Unfortunately these tools aren’t very helpful if there’s no grounding to work on. You have to start with a basic understand of why you would design for mobile and slowly incorporate these ideas.

A solid approach is to consider limiting your website to only key elements. When you can strip down a design idea into bare essentials it makes the process of building on mobile screens all the more easier. But why would you want to start in the mobile realm?

Well, it allows you to approach each project with a clearer perspective on goals and user objectives. You have to ask yourself What do I want my users to be doing? What do my users want to do? Mobile screen real estate is much pricier than monitors or laptop screens. You have to utilize the space you’re given to fit all components neatly in place.

If you can put together such a layout on mobile then it will be much easier transitioning into the desktop environment. There is an old concept that placing limits on your design work will actually help you achieve a more narrow focus. I absolutely feel this holds true for mobile web design which gives all the more reason to prioritize smartphones first.

Understanding User Needs

The requirements of your visitors will change drastically from person to person. Whether you’re building a personal project or working freelance it’s crucial to spend a bit of time thinking about activities on the site.

Are visitors mostly coming into the site via Google searches or social media? Think about what are the most popular features in the layout (search, page navigation, login/logout).

With these ideas in mind you can prepare a much more complementary mobile web design. And prioritizing this first means you’ll have a bit of knowledge when moving into desktop web development. Considering websites are built for the user experience you should spend as much time as needed to plan out these features. Test run a couple of different layout ideas in plain HTML to see how they feel in a mobile browser.

Tablet PCs

Discussing the mobile web would not be complete without a bit on tablets. The new iPad 3 announcement will only increase hype for users looking to make the transition. And browsing a website on your laptop can appear much different than on a touch screen device.

Yet obviously most tablets do not have the same limitations as you’ll find on mobile phones. The iPad 2 screen resolution is limited at most by 1024×768 which should display modern layouts just fine. If you choose to work with a focus on all mobile devices you’ll need to plan ahead for each resolution setting.

I recommend starting with the smallest possible screen size and working your way up. This can be accomplished with CSS3 media queries by including different stylesheets based on the device width. Yet there is also the option of building a single layout with responsive capabilities.

Coding Responsive Layouts

Possibly the simplest solution for supporting all mobile devices is to build your layout with responsive properties. This means the whole website and inner content will re-form itself to fit the particular screen resolution – even as the user resizes their browser window.

If we place a priority on mobile design then building a responsive website makes a lot of sense. You don’t need to include particular stylesheets for different devices since the same HTML markup works on all screens. This also provides the perfect reason to start with mobile first. Once you know that your layout renders properly in mobile screens it’s simpler to fix bugs related to desktop browsers.

The best way to jump into this topic is by looking at similar examples. You must understand how responsive websites perform on a mobile phone vs. a desktop and how you can code these features. I highly recommend our gallery of 40 responsive websites to get you started on the right path.

Shifting the Navigation

Typical desktop browsers and even tablets may support more convoluted link hierarchies. You can use jQuery to enhance navigation with dropdown menus or slideout effects. This is all well and good if you have space on the screen to interact.

Yet touch screen devices do not support mice, and even worse it’s difficult to port over jQuery menus onto mobile. Whether you’re building responsive or coding a separate mobile layout, either way will require some finesse to move around your page navigation. But understand there is no “right” or “wrong” placement for nav links.

I find that building block sections of the page to cascade down is the simplest solution. You can even still use simple jQuery effects to slide open hidden sub-menus if needed. Keep in mind there isn’t a lot of room for links so you’ll have to stick with the most popular root items in your navigation.

Alternatively you could push all these links to the bottom of your page and include a hash anchor such as #btmnav. This alleviates room at the top of your layout once the website loads. But it can be confusing if visitors don’t know where to find the navigation items.

Handling Image Content

In-page media can be the trickiest to work around on mobile screens. If you’re considering building for mobile first then it’s difficult to gauge just how large your photos should be.

With the CSS property max-width: 100% you can setup all images to contract and expand up to their maximum point. This is the best way to respond with users on a mobile screen while also supporting full-sized images on desktops. And the best part is that all forms of media(including HTML5 video) will support this property as well.

Now the alternative solution is to build a set of images targeted towards mobile screens and another set for standard displays. This is trickier since you need to support Android and iOS devices while iPhone also requires retina images at double the standard resolution. To learn more about this method check out Ben Frain’s awesome article on how to serve high-resolution images for retina displays.

Conclusion

There are plenty of reasons to focus on mobile web development from the get-go. It’s a realm of technology which has been widely ignored for a long time. Thankfully advancements in mobile web browsing have forced designers to consider this ever-growing form of screen media. If you have similar ideas for building on mobile first you can share with us in the post discussion area.

Read More

Awesome Helpful Code Paradigms for Frontend Web Developers

Coding a website takes a lot more time than just a simple design. You have to consider how each HTML element will be placed in the document and how you need to style them using CSS. Not to mention there are at least 4 browsers you should test plus the possibility for mobile users.

There is such a demand for web development that coding takes on a life of its own. In this guide I want to share a few tips and ideas I’ve come across when working on the frontend. There are many ways you can save time writing HTML5/CSS3 and even working with jQuery. But truly the best remedy to understand frontend development is lots of practice and patience.

Work with Document Templates

Most developers do not start with a plain blank document. It’s not difficult to store a local copy of your typical setup when coding a website from scratch. There are even lots of HTML5 templates you could work with instead of crafting your own.

I personally choose to setup a custom dev environment because I can have more control over where the files are located. This also means I can work with other CSS and JS files to get me started. The only significant inclusions may be jQuery and some CSS resets.

But try to keep the HTML template as slim as possible. You don’t need any elements inside the body since you’ll likely code each website layout differently. Focus mostly on the meta content and other tags found inside your document header.

Break Up your Stylesheets

When first coding your styles it’s common to work within a single file. This makes everything much easier to manage, up until a certain point.

When you begin to include media queries and IE-specific code it’s worthwhile to build out a few different files. I usually split into ie.css, responsive.css, and forms.css. If needed you may break up entire pages into their own file – such as profile.css or user.css.

It doesn’t seem like much of a priority to begin with. But remember that after you launch your website live it will still require maintenance. Going back to edit a single stylesheet will require lots of find & replace functionality. Organization is the key to any frontend developer’s lifestyle.

Writing CSS3 Properties

Back before CSS3 standards were released the major specification was CSS2. Many of these properties could be written together in block-line formatting. Even if you chose to break up styles onto a single line there was still plenty of space to quickly scan through.

Unfortunately we have seen many new CSS properties released which take up a lot of extra white space. The CSS3 gradients and transition properties immediately come to mind. These can save you tons of development time without the need of resorting to JavaScript. But your CSS files may quickly become a huge mess of properties and selectors.

I’ve found a comfortable medium in writing CSS syntax where I use both types of inline and block-level selectors. On minimal elements with only a few properties it’s easier to keep them inline since you’re saving space. But using these more complex CSS3 properties almost requires block-level syntax as the code appears jumbled together.

This may also occur using smaller CSS3 styles such as border-radius. You’ll need to support the -moz and -webkit prefixes, so you’re really writing 3 properties targeting different browsers. It’s not such a huge problem since the border radius properties are much easier to use than background images. But to keep your code clean and readable I recommend breaking up lines and keeping those selectors segmented.

Powerful JavaScript Libraries

There’s no doubt that jQuery and MooTools are the most well-known libraries to date. Their open source nature has allowed for quick adoption into other CMS’ such as WordPress and Pligg. But consider some of the other amazing JavaScript solutions in the market.

For Ajax requests you should check out Prototype.js. It was originally released in 2007 and has since built up a reputable name. Web applications can be quickly scaled and require very little JavaScript coding on your end.

Another newcomer into the field is Retina.js for dynamic mobile graphics. This is a perfect example of “drop it and leave it” where you can include the script into your website with no customizations required. If you create images based on Apple’s @2x retina display this script will detect retina devices and replace your image URLs automatically.

Scroll through this Smashing Magazine article which outlines a whole slew of JavaScript libraries. There are 40 different frameworks listed which focus on a few different subjects including web forms, data validation, and working with databases. It’s almost unbelievable how powerful JavaScript has become!

jQuery Animations

Aside from Ajax calls JavaScript is also exclusively tied to web animations. The CSS3 docs allow for a bit of leeway, but this is only within standards compliant browsers. jQuery animations are quick to load and will resolve even in modern versions of Internet Explorer.

Any typical website may find value in simple jQuery animations. They are easy to create and work by manipulating different CSS properties over a given time. Many animations will even work in Mobile Safari and Android-based web browsers.

Simple examples may include fading the opacity or hiding a content element. You can also replace HTML inside a container by sliding it over left or right. There are so many great techniques with animate() I must recommend looking into the docs. Test out an application idea and see if you can spruce up any typical layout styles.

Conclusion

There are so many more topics to discuss when dealing with frontend web development. Coding in HTML/CSS is difficult enough to wrap your head around. But moving into JavaScript may require a few weeks of dedicated study and commitment. However, with these 3 languages under your belt it’s possible to turn practically any website idea into a reality.

Never take the frontend for granted in your design work. The process has become more streamlined over the past decade but it is still not so simple for beginners. Web developers in the field 4-5 years have grasped all the difficult concepts and forget the process of learning. Be sure to share your ideas on coding frontend web layouts within the post discussion area below.

Read More

Awesome How Developers can Take Advantage of Social Media

Working in the field of web development has a much different feel than graphics design. The work is more task-oriented and requires a higher level of concentration and detail. Not to mention bug fixes, maintenance, or getting sites running live on a web server.

It seems the job of a designer is more creative and freeform. This holds true for development as well, except in a different ideology. The open source movement has dramatically changed the web design industry at its core.. And social media is a related industry with a tremendous backbone. Once you understand how social networks can help you as a developer you’ll be hard-pressed taking the Internet for granted!

Building Contacts

When I first got started in coding websites it was much easier to work with a group of people. This is still the case with any modern-day large project. But with so many open source content management systems floating around, you are no longer required to work with people in the same physical space.

Network around and try to meet other passionate developers working on similar ideas as yourself. There are online forums, bulletin boards, and blog discussion threads where you can share ideas together. This is the best way to teach yourself new techniques as well.

But one of the biggest advantages is using one of these infamous open source CMS’. Most of the popular examples have been running for years now, and are coupled with a populated support forum. I’ve included just a few links to check out:

• Joomla forums


• WordPress support forums


• Drupal Forums


• Pligg CMS Forum

The Stack Network

I cannot recommend enough young devs to start using Stack Overflow. I am naturally curious about building web products – so when I run into trouble coding some JavaScript or PHP it’s very frustrating. But the Stack network is full of brilliant coders who have years and years of practice under their belt.

To signup for an account you should visit the Stack Exchange website. From there you can connect directly to Twitter or Google, or register using an e-mail address. But once you’re in you can connect the same account details over each of their different sites. A couple popular communities are the pro webmasters and ux stack(there’s even one for WordPress).

You have the option of including some extra contact details on your profile page. It makes communicating easier, especially with other helpful members who can answer your questions. But the community isn’t just about grabbing quick fixes for problematic code.

You can also go through some of the recently asked questions and help answer folks who are struggling. If you’re a beginner then you likely won’t have as much knowledge to do this. But as you have more time to practice these skills should become easier to memorize.

Coding on Open Source

The recent trend of open source code has allowed for major improvements to rendering engines in web browsers. Webkit standards are being adopted by most 3rd party developers, including Microsoft and Mozilla. Web developers can host their code online for free and share it with a huge network of other devs from around the world.

The most popular example is GitHub which acts as a Git repository for open source code. This includes much more than HTML/CSS/JS – even up to software development with Java and C++. But the whole website also acts as a social network where developers may connect with each other via e-mail, chat, or personal message. You can setup teams of developers and work coding projects hosted on their servers.

Another cool resource Bitbucket is more private for personal projects. The system behaves very similar to GitHub, although profiles aren’t a huge aspect. I personally haven’t used the site very much – however I have read great things about their service in a few blog articles.

Write About your Experience

If you have some years of experience it may be worthwhile to setup a small blog of your own. Even if you just have a simple portfolio website, or nothing at all, you can still write tutorials and articles about coding practices and web development. Write about anything you know which would be helpful for others to understand and build products for the web.

Over time it’s possible you will aggregate a small following. Curious web developers will always be interested in learning about new techniques. If your content is good then it’s easy to draw in and captivate a small audience. You can further this success by running profiles on major networks such as Twitter and Facebook. Marketing is just as important and you can’t ignore the girth of social media.

Check Social News Websites

In the same vein as social media there is a popular sub-culture devoted to social news. This is a type of web application where the community of users becomes the editors. All stories are voted on and only the most popular articles will publish onto front page. Digg is possibly the pioneer in this industry – yet the web development niche has seen progress.

My favorite network is Dzone as it has been around for years and supplies great front-page content. Another popular choice is PHP Camp which is more devoted to PHP web applications. You can signup for free on either website and submit tutorials you find online, or alternatively submit your own blog posts.

A newer launch Source Canvas has been online for just a few months now. Their network is invite-only and requires administrator’s approval to register. But this leads to much higher quality submissions, which ultimately provides an excellent source for networking with like-minded people. Check out any of these brands and see if you can relate to the community.

Conclusion

These are just a few suggestions to get your name out there on the Internet. It’s important to keep trying new ways of marketing, and feel free to experiment with anything and everything at your disposal. The advancing Internet technologies as well as mobile devices will play a huge role moving forward into the 21st century. If you have similar ideas or websites for networking with web developers please share with us in the post discussion area below.

Read More