#for css/embed reasons.

[somresources]

how many of you have pro-standard or higher

[losergames]

how did you find the move from choicescript to twine?? I've been working on a project in choicescript but not really sure I want to host it there anymore

hello! thank you for the ask,

preface, i think both tools are great for what they were built for. i had a good time with choicescript and it was a good introduction to what variables can be used for and structuring an if game. if you don't care about UI/ appearance, then choicescript makes sense.

i will be real and say, the move to twine was difficult personally lmao because i had no experience with html, css, or javascript prior to the move -- but that shouldn't put you off. my personal approach to it was that it's a learning opportunity.

be prepared to be 'not good'. learning something new can be a really frustrating and discouraging process. things won't work the first time round, they never do, but keep reminding yourself that this is a process and the progress, and your understanding, will come with time! the best quality a dev can have is patience, especially in the if circle.

if you go into twine thinking about your long form game/project and try to port things immediately into a template, i think it will really mess with you. make something tiny first, like a tutorial game, and when you're ready move up to the long form stuff.

you don't have to do it my way, but the best way for me to learn was to just get hands on with twine templates other developers have made. get a feel for the twine programme, language, layout, interface etc etc. i will tell you right now the second day i started learning twine/ sugarcube i got stuck on how to //open// an imported file haha. learning is hard and it sucks but now i've built my own interface for my own game!

all this being said, you don't even HAVE to build an interface for your game -- it comes with a default UI that you can start using straight away. so, if you don't care about the ui/ aesthetics, twine can still be an option.

i do want to touch on publishing, because that is a huge aspect of if. twine is a free open source tool and choicescript is not. if you get to the point where you finish a game and can publish with cog/ hosted games, then just be aware that you do not //own// your own writing because it is in the choicescript language. you will only own the IP.

i was stubborn about choicescript for a very long time, i still think it has better accessibility //because// the interface is basic and the appeal of going through a publishing house is very understandable. they have a huge reach and an established audience so there's no doubt of your game having eyes on it.

twine has an advantage being open source because no one owns it. plus, it encourages self-publishing and i think that's a great thing to aspire to as a writer! i love chop shop even more now because i built and own the whole thing. technically, twine games don't even need to be on itch.io because they're just html files, so they can be hosted anywhere that supports html. if i had a website for example i could just embed it into a page.

obviously, i am going to have a lot of bias towards twine since i made the move myself haha. i'm not trying to put my own feelings into this because COG as a company was a whole other reason why i moved and that won't be discussed on this blog.

you don't have to move to twine if you don't want to publish through COG, i'm pretty sure choicescript games can be hosted on itch.io.

edit: from @/hpowellsmith in the replies: you can have a contract with Hosted Games to monetise a ChoiceScript game on itch or elsewhere online where you pay them a smaller percentage of revenue than if you're published through Hosted Games

i think if you're happy with choicescript and COG/ hosted games then go for it and, if not, there are other options out there!! it doesn't have to be twine but it's probably one of the better tools for interactive games and has a wealth of help guides/ tutorials.

sorry this was so LONG, but thanks for reading if you got this far anyways :^)

[klebald]

Got inspired by your website and am attempting to make myself one since my old spacehey got terminated. However I’m having the hardest time figuring out how to link a second page and more importantly how to make containers for text. Very much struggling. An hour of effort and all I have is a background and a header. I’ll figure it out eventually I’m sure, but if I get desperate enough I may end up asking you for a couple codes here and there.

Do you have class today? I’m in my earth science class right now. Really excited cause my math course on Friday is optional, so I get to sleep in a little later than usual.

Little old me, inspiration? No way, not a single bit true. The reason that I made one myself is because my Spacehey got terminated as-well. Every single social media known to man hates the Columbine shooters, I suppose. I wish you the best of luck on the hell that is HTML/CSS. If you are still yet to figure out a way to link to a second page, or to make containers, I have a couple of ways. I will happily share the page linking right now, actually, at the bottom of this, for when you do eventually discover how to code a container. You might want to try a table, tables are fun to work with, just a little more linear and confined feeling. I dislike using them for that reason. I do have class, I was in French last period, and I just got out of lunch. I am in Algebra right now. Being a junior, my schedule is the same every day aside from Thursday and Friday, where I have home room squished into the middle of the day very annoyingly. I wish my math course were optional, although, it's considerably easier to get through than some of my other classes. Earth science also does sound a lot nicer, know that I want to take your place. I have Chemistry next semester for what will be my science class, Sociology for history credits and Algebra right now until January. The order of Chemistry, and Creative Writing, which is my second core class for the next semester, being together makes zero sense to me. I hope that class is easy on you today, seeing that next period I have a FUCKING PRESENTATION. I can brag that I got to leave early Monday! If you want the new page to be linked using a button with text inside of it, the way my diary button appears on my main page, for example, the way I did it was this. (Albeit removing the slash in the first "a href", it won't embed if I don't break the code). <\a href="whatever page, you have to make a new html index page to have another page show up clickably. Tedious, I know" class="new-page-button">WHATEVER TEXT YOU WANT INSIDE OF THE BUTTON</a> And, the matching CSS that you need for it to.. Look like anything, that you should keep seperate, towards the top of the page is where I put mine, is this. .new-page-button { display: inline-block; padding: 15px 30px; {You can change ALL of these values by their pixels, try using codepen.io to preview how it looks live while you input things.} margin: 20px 0; font-size: 20px; font-weight: bold; text-shadow: 2px 2px 4px rgba(128, 128, 128, 1.5); color: #fff; text-decoration: none; background-image: url('WHATEVER BACKGROUND IMAGE YOU WANT FOR INSIDE THE BOX); background-size: cover; background-position: center; border: 0.8px solid #b0b0b0; border-top: 2.2px solid #b0b0b0; border-bottom: 2.2px solid #b0b0b0; border-radius: 0; letter-spacing: 2px; } If you want it to be an image of some kind, the HTML is this (same rule as before) <\div class="BUTTON"> <\a href="your page link(the new html one)" style="cursor: pointer;"> <\img src="image that you want to be what you click on to get to the page" alt="alttextforit" style="width: 60px; height: auto;"> </a> {All of this is alterable, like I said, customization.} And, of course, the CSS: .back-button-container { margin-top: 160px; text-align: center; } Let me know if any of this is of help to you at all, I hope that my very late explanation was useful.

[glossamerr]

Glossamerr's Blog

Hello! I am Glossamerr (with two r’s), I make embed codes for roleplaying forums. Mainly WoX sites but you can use them for other purposes as well. If you are using my codes, please follow the rules. And if you are requesting or commissioning, please read the terms of service.

You can reach out to me via tumblr dm’s or discord (glossamerr) if you ever have any questions. 

Codes

As of right now, all of the codes I posted are free to use. If you are going to use my code, I would appreciate a like or reblog! It’s not required, but it really helps me out a lot. 

No Claiming as Your Own: Please don't claim the code I create as your own work. You’re welcome to modify or adapt the code I share to suit your needs. Just remember, even if you or someone else edited it, still keep my credits. If you want to share my code with others, please link back to my original post instead of posting the code directly.

Be Respectful: This is a friendly space, so please keep comments and feedback respectful. I reserve the right to remove any comments that are offensive or unkind.

No warranties: I’m by no means a professional, I’m just sharing what I’m learning along the way. Everything on this blog is provided as-is, with no guarantees that it’ll work perfectly in every situation. If you notice that one of my codes isn't working properly, I’d appreciate it if you reach out and tell me!

Requests

I am open to requests! Just head to asks and submit a short description of what you’d like to see in a code.

Guidelines:

requests can be whatever you want to see. e.g. mention a theme or a type of code (article/club/pt etc.)

requests are free, but there is no guarantee that I will do them or time limit.

Disclaimer: 

not all requests will be fulfilled, this is a voluntary service

I may combined/modify some requests based on interest or my schedule 

Commissions

I am currently not open for commissions as of right now. But I am in the process of setting everything up! I will let you guys know when it is.

Guidelines:

commissions are paid services where a client can be as specific as they wish.

if I accept the payment, that means that the code will be completed. I will get in contact with you to discuss further details.

I can deny commissions for various reasons. e.g., I am unable to complete a part of your commission, I am unable to complete your commission within your set deadlines

Pricing: 

Standard one page codes: $2.00 (simple html/css layout with modifications/specific themes)

Standard multi page codes: $4.00 (simple layout with multiple pages with modifications/specific themes)

Advanced multi page codes: $6.00 (Highly detailed and customized code with interactive elements, and special effects/functions like pop up modules etc.)

(note: all commissions include 2 rounds of revisions for free.)

Payment: 

Accepted payments include: PayPal, Stripe, Ko-fi 

Work begins after payment is received

line dividers by me

[world-war-heroes]

How to Convert an Image to Base64

In the realm of web development and data encoding, converting an image to a Base64 string is a common practice. This process allows binary image data to be represented as a text string, which can be useful for embedding images directly into HTML or CSS files.

Understanding Base64 Encoding

Base64 is an encoding scheme that translates binary data into a text representation. This encoding format is particularly useful when dealing with data that needs to be transmitted over media designed to handle textual data. It ensures that binary data remains intact without modification during transport.

Why Convert Images to Base64?

Embedding Images: One of the primary reasons for converting images to Base64 is to embed them directly into web pages or stylesheets. This eliminates the need for additional HTTP requests to fetch image files, which can improve load times and reduce the number of server requests.

Data URI Scheme: The Base64 encoded image data can be used in the Data URI scheme, allowing images to be included directly in CSS or HTML. This is particularly useful for small icons or images that are used frequently.

Simplified Deployment: Including images as Base64 strings can simplify the deployment process by reducing the number of files that need to be managed and deployed.

How to Convert an Image to Base64

There are several methods to convert an image to Base64, including using online tools, command-line utilities, or programming languages. Below are steps for some common methods:

1. Using Online Tools

Select an Online Converter: There are numerous online tools available for Base64 encoding, such as base64-image.de or base64-image

Upload Your Image: Choose the image file you want to convert from your computer.

Generate Base64 String: The tool will generate a Base64 encoded string for the image, which you can then copy and use as needed.

2. Using Command-Line Utilities

For those comfortable with the command line, you can use utilities such as base64 on Unix-based systems:

bash

Copier le code

base64 /path/to/your/image.jpg > image.txt

This command encodes the image and writes the Base64 string to a text file.

3. Using Programming Languages

Most programming languages offer libraries or built-in functions for Base64 encoding. For example, in Python:

python

Copier le code

import base64 with open('image.jpg', 'rb') as image_file: encoded_string = base64.b64encode(image_file.read()).decode('utf-8') print(encoded_string)

In this code snippet, the image is read in binary mode, encoded to Base64, and then printed as a UTF-8 string.

Using Base64 Encoded Images in HTML and CSS

Once you have the Base64 encoded string, you can embed it directly into HTML or CSS:

HTML Example:

html

Copier le code

<img src="data:image/jpeg;base64, [BASE64_STRING]" alt="Embedded Image">

CSS Example:

css

Copier le code

background-image: url('data:image/png;base64, [BASE64_STRING]');

Replace [BASE64_STRING] with your actual Base64 encoded string.

Conclusion

Converting images to Base64 can streamline web development by reducing the number of external resources and potentially improving load times. Whether you use online tools, command-line utilities, or programming languages, the process is straightforward and provides a useful way to manage and embed images within your web projects.

[skilluptolearn]

HTML

HTML Course Content

HTML, or *HyperText Markup Language*, is the standard language used for creating and structuring content on the web. It defines the structure of web pages through the use of elements and tags, which dictate how text, images, links, and other multimedia are displayed in a web browser. HTML provides the foundation for web documents, allowing developers to format content, organize sections, and create interactive features. It consists of a series of elements enclosed in angle brackets, such as <p> for paragraphs, <a> for links, and <img> for images, which together build the content and layout of a webpage.

 HTML Contents

HTML (HyperText Markup Language) is the foundation of web pages and web applications. It structures content on the web, defining elements like headings, paragraphs, links, images, and other multimedia. Here’s a breakdown of key HTML contents:

1. *Basic Structure*:

   *<!DOCTYPE html>*: Declares the document type and version of HTML.

    *<html>*: The root element that encompasses the entire HTML document.

    *<head>*: Contains meta-information about the document, such as title, character set, and links to CSS or JavaScript files.

    *<body>*: Contains the content that is visible on the web page, including text, images, and interactive elements.

2. *Text Elements*:

    *<h1> to <h6>*: Heading tags, with <h1> being the most important.

    *<p>*: Paragraph tag for regular text.

    *<a>*: Anchor tag for creating hyperlinks.

    *<span>* and *<div>*: Generic containers for grouping inline and block content, respectively.

3. *Lists*:

    *<ul>*: Unordered list.

    *<ol>*: Ordered list.

    *<li>*: List item, used within <ul> or <ol>.

4. *Images and Media*:

    *<img>*: Embeds images.

    *<video>* and *<audio>*: Embeds video and audio files.

    *<figure>* and *<figcaption>*: For adding images or media with captions.

5. *Forms*:

    *<form>*: Contains form elements for user input.

    *<input>*: Various input fields (text, password, checkbox, radio, etc.).

    *<textarea>*: For multi-line text input.

    *<button>* and *<select>*: Buttons and dropdown menus.

6. *Tables*:

    *<table>*: Defines a table.

    *<tr>*: Table row.

    *<th>*: Table header cell.

    *<td>*: Table data cell.

7.*Semantic Elements*:

    *<header>, *<footer>**: Defines the header and footer sections.

    *<nav>*: Navigation section.

    *<article>*: Independent content item.

    *<section>*: Thematic grouping of content.

    *<aside>*: Sidebar or additional content.

    *<main>*: Main content of the document.

8. *Metadata and Links*:

    *<meta>*: Provides metadata such as descriptions, keywords, and viewport settings.

    *<link>*: Links external resources like CSS files.

    *<script>*: Embeds or links JavaScript files.

 Importance of HTML

HTML is critically important for several reasons:

1. *Foundation of Web Pages*:

    HTML is the core language that structures content on the web. Without HTML, web pages wouldn’t exist as we know them. It organizes text, images, links, and other media into a cohesive and navigable format.

2. *Accessibility*:

    Proper use of HTML ensures that web content is accessible to all users, including those with disabilities. Semantic HTML elements provide context to assistive technologies, making it easier for screen readers to interpret the content.

3. *SEO (Search Engine Optimization)*:

   Search engines rely on HTML to understand the content of web pages. Properly structured HTML with relevant tags and attributes improves a website’s visibility in search engine results, driving more traffic to the site.

4. *Interoperability*:

   HTML is universally supported by all web browsers, ensuring that content can be displayed consistently across different devices and platforms. This cross-compatibility makes HTML the most reliable way to share content on the web.

5. *Foundation for CSS and JavaScript*:

   HTML is the backbone that supports styling and interactivity through CSS and JavaScript. It provides the structure that CSS styles and JavaScript enhances, creating dynamic, interactive, and visually appealing web experiences.

6. *Web Standards Compliance*:

   HTML is maintained by the World Wide Web Consortium (W3C), which sets standards to ensure the web remains open, accessible, and usable. Following these standards helps developers create web content that is robust and future-proof.

7. *Ease of Learning and Use*:

   HTML is relatively simple to learn, making it accessible to beginners and non-programmers. Its simplicity also allows for rapid development and prototyping of web pages.

In summary, HTML is essential because it structures and defines web content, ensuring it is accessible, searchable, and interoperable across various platforms. It is the foundation upon which modern web design and development are built.

[guzsdaily]

The beauty of Hyperlinks

Day 54 - Dec 29th, 12.023

If you read any of my posts here on Tumblr, which are mostly these daily journal entries, you probably noticed something that always appears in them: Hyperlinks, most of them in any new term, brand, software, product, etc. And maybe, you thought, "why? Why so many links?", maybe even "is this a marketing strategy? Are you sponsored in some way?", and maybe if you have a similar mind to my "what are links anyway? Where they came from?". So I'm here to [try] to explain them all! Under 2 to 3 hours before the deadline of this blog post passes!

<\h2>A brief history of the World Wide Web</h2>

<p>The start of the World Wide Web was invented by English computer scientist Tim Berners-Lee, while working at CERN in 1989, because of the frustration of how user unfriendly the Internet was at the time. In 1989, the Internet was in its early stages, compared to now at least, in summary, most of the content that you accessed was using a terminal, commands, etc. there wasn't a "web browser", you needed to directly connect to a server if you wanted to get any time of file, information, and scientific researches (which was the main use of the Internet at the time). And also, you needed to search that file in a file system tree most of the time, relying on tagged files with keywords.<p/>

<p>Because of this unfriendly "interface" at the time, Lee created a new system/protocol, a new information system, called World Wide Web, and hosted said system on his own computer which his turned into a server. The WWW is mainly composed of two things:<p/>

<ul>

<li>Hypertext Transfer Protocol (HTTP): the protocol built on top of the Internet's protocols, made for accessing this new way of sharing and consuming information;<li/>

Hypertext Markup Language (HTML): the markup language made to format and show text files similarly to ones for documentation and research. These files are organized in paragraphs, headers, etc. and most importantly of all: hyperlinks, small sections of texts which can embed URLs and provide immediate access to other HTML files / web pages. All said files and pages, could be viewed on a web browser, where the file would be formatted following its markup.<li/>

<p>And, as time passes, other technologies such as Cascading Style Sheets (CSS), for styling and "decorating" HTML documents; and scripting languages such as JavaScript, for adding interactivity to web pages and making our lives miserable, were created and are what create the Web as we know today. Everything because e scientist needed to share and access research papers and could bother to write ssh user@domain; ls -a ~/Documents | grep file in his fucking terminal, but at least, we know have Hyperlinks, something which I feel is underrated a lot of the times when using the World Wide Web.<p/>

The Wikipedia rabbit hole

If you are reading this until this point, and even more, if you're someone who uses Tumblr, you probably access Wikipedia a lot of times to find brief explanations for things you don't know, or even just to pass the time when you are low on internet. And, personally, I think that one of the best things about Wikipedia is how it's links everything, every term, topic and word with can be expanded upon, with hyperlinks. Every page has at least one link connecting it to another on the topic, and every single time, I at least hover each link to know what it's about, and probably ctrl+click to open it on a new tab to read it later, I think there's something special in that.

A lot of times you probably just end up lost, you entered on a page about JavaScript, and now is on the page about World War One for some reason. But most often than not, you end up learning something new, extended your knowledge about one topic, or even entered on a wiki about a topic you didn't even thought existed. Just by clicking hyperlinks one after another, going deeper in this network of interconnected files.

And you probably already know, but this is such a common thing when using Wikipedia, that a game was created, where you try to go from one page to another just using the links in the wiki, finding your way, trying to connect different topics.

Now think this effect, on the entire Internet.

The World Wide Web rabbit hole

To explain this, I think it's better with an example.

I had the idea of this post because of something that happened to me recently while procrastinating working on a Minecraft mod pack that I were creating for me (yes, somehow we are here now, but stay with me!). While creating packs, nowadays, I use a platform called Modrinth, where I can search mods, textures, yadda yadda... and a lot of times I try to just scroll through the list, trying to find new mods, something interesting, if maybe there's something useful that I can use that I can use.

While doing my "research", I found a mod called SplashFox, a simple and cute one that just adds a bouncy "blobfox" on the game's loading screen. I had already seen about this collection of emojis called "blobfox", but because it was hyperlinked in the mod's page, I clicked just to figure it out and see even if maybe I could use it in some project in the future as a custom emoji set for an application and things like that. The link navigated me to the emojis' author's personal website/portfolio's page about the collection. Quite a cool and beautiful website, not gonna lie.

The page had a bunch of others emoji collections, which I quite liked, and maybe I will use them in the future (all of them are licensed under an Open Source or Creative Commons license). Nonetheless, out of curiosity, I started to navigate the site and just go around seeing what it had.

The home page, very cozy... A work-in-progress "about me" page... Vector arts of dragons, the author is really talented... A notebook being worked on also... Bookmarks? Oh, "Things I found from anywhere on the internet", interesting...

And then, I found two things which stood out for me:

It had a bookmark about a microblogging platform called Firefish, one that it's connected to the Fediverse/ActivityPub protocol, so things like Mastodon, Pixelfed, etc. are all connected... and it is a fucking beautiful platform, with 4,000 users on it's main server, how the fuck I never heard of it?! I saved/bookmarked it right there, because no fucking way I will remember where to find it out of nowhere;

After that, I returned to the portfolio to see if I found something more on it. And the other bookmark that I found was a blog post/article: The peculiar case of Japaneses web design... I read all of it, right there at the moment, on one go, "out of curiosity".

I found, at least, two "interest gems", because I was searching a Minecraft mod... and one of the ones that I found, was a silly little modification about a blobby fox bouncing on the loading screen, which just happened to have a hyperlink.

That's the thing that I like to do when browsing the Web, and that's why I like to put hyperlinks on my blog posts. Because maybe, when someone read them and click on one of the links, they find a new interesting thing to learn, save, and even maybe, use in the future. That's the reason the World Wide Web was created, so always remember to put that <a> tag on your HTML, []() on your Markdown, or even, [[]] on that Wikitext page that you're creating or editing, and share new things to the world with a simple URL.

---

Today's artists & creative things

How We Made the Internet - by NationSquid This video really helped me to remember the history of the Internet, and of the World Wide Web for creating this blog entry. I really would recommend giving it a watch if you want more details and if you want to know more about how the Internet itself was created.

---

Copyright (c) 2023-present Gustavo "Guz" L. de Mello <contact.guz013@gmail.com>

This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) License

[specialgrades]

MADE THE CARRD. FINALLY. CAN ALSO CHECK A CARRD STYLE OF MY CHECKLIST OF ONES I WANT TO TRY

[general9chaos]

CSS styling is scoped, but your example is not well-formed. If the outer div was styled with text-align: justified, then the second inner text element is too, as well as text directly in the outer div, and inner div 1 would be centered if it was, you know, actually styled with text-align: center.

The problem is that a style element does not style the next html element! Style elements are for applying a stylesheet to the whole webpage. You don't interleave them with the html elements you're styling. You'd use class or style attributes inside the angle brackets of the div elements for the kind of specificity you're talking about.

A stylesheet is a list of rules for how to format a webpage. It's a config file, not linearly executed code. Webpages can embed their config files in the html using style elements, which is what that example is doing, but that's not how you usually do it. If you're using stylesheets, you usually link them in the <head> of the page with <link> tags or inject them with a userstyle extension like Stylus, because stylesheets are metadata and metadata goes in the head, not the body.

If you style a parent element, its children inherit that style. Specificity matters: if you style divs in general right-justified and headers centered, then text in the divs is right-justified and the headers are centered even if the headers are inside the divs. Specificity is a whole complicated mess if you really want to get into how it's calculated, but it's abstracted enough that it mostly just works.

Style attributes are a pain the ass to work with. If classes are analogous to variables, style attributes are hard-coding everything. If you style a quote class with text-align: justified, and then decide that you want quotes to be left-aligned in their own smaller box after all you can change that in the stylesheet without having to manually change dozens of style attributes.

Now, when you aren't allowed to actually use a stylesheet because you can only submit html, you start doing css crimes with style attributes. LexyEevee has a series on css crimes over on cohost. That's more likely to actually work in tumblr, but the editor will probably refuse to honor a bunch of styles you could theoretically use. It does have to sanitize the html you give it for security reasons, but also it's a buggy piece of shit.

To get a better sense for how css works, just right-click on a webpage somewhere, click on "Inspect Element", and fuck around with the css on that element and its parents and children. This isn't an embedded system where a little fuckup could cause expensive damages; malformed css gets ignored by the browser. About the worst that will happen is you'll break the webpage's formatting. Reload, and all will be well.

I don't love the ongoing disaster that is web dev

[darkstatistica]

first html from scratch

for years i've messed around with other people's html/css code for editing my blog layout (first on livejournal and now on tumblr) and i found i had a need to write something from scratch for the first time. on notion i have a page for the books i have checked out of the library, and for whatever reason i wanted the date to appear above the calendar. indify has a clock but it doesn’t display the whole date, so i thought maybe i could make my own.

mostly i looked at the examples on w3schools, specifically the web dev guide, and that gave me an idea for some script commands that would do what i wanted:

this one showed how to display time

and this one showed how to interact with elements in the page

really i wanted just the date but i got drawn in by the full timestamp, and then i thought it'd be cool to have it update automatically. so i found this tutorial but from the examples i saw at w3 i thought probably it could be done with less code and it ~worked~

at first i tried using their code more closely

function timestamp() { const display = document.getElementById("time"); const update = new Date().toLocaleString(); display.textContent = update; } setInterval(timestamp, 1000);

but then instead i decided just to use the setInterval line and see if it would work with the w3 code

function freshtime() { document.getElementById("time").innerHTML = Date().toLocaleString(); } setInterval(freshtime, 1000);

anyway i was really excited when i saw ~it worked~! in the meantime i was testing out github and decided to try it as a github page and it worked and i was able to embed it into notion wooo~~ but i definitely need to adjust the style so it shows up right but that was enough work for tonight.

remember to take a break! new wallpaper coming soon for spooky month))

[ao3skin]

Would you happen to know if it's possible (and if so, how) to change the color of the bar graphs on the stats page? Right now, my whole theme is purple, and the stats page still has the default red color. Thanks!

ok, yes and no. the main problem is that it’s a svg image and it’s a code ao3 embeds from google so they even have no input in it. 

Ao3 doesn’t allow a lot of svg specific css rules, simply because... there aren’t svg around the website beside that one (at least I think is that reason). The way to change color in svg images is by using ‘fill’ instead of the usual ‘background-color’ or ‘color’ of basically everything else. So basically the only way you have to change color to those is by using filters. Which are still very very limited by ao3 (as attested by this very desperate anon: https://ao3skin.tumblr.com/post/665743462420955136/this-may-be-a-trip-sorry-so-its-been-a-known who where desperately trying to use brightness filter with no success)

this is how you do it:

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect, #stat_chart  svg g:nth-of-type(2) > g rect:last-of-type {    filter: hue-rotate(222deg);    opacity: 70%; }

you can play with the values of hue-rotate and the opacity (you can also remove the opacity alltogether) to find a color you like.

also, if you want, this one makes the column change the color when you hover it:

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:hover {    filter: hue-rotate(217deg); }

not necessary though.

[uiux-design]

6+ Best Websites for Free Fonts in 2020

You need your website or application to look amazing, and typography is a key factor in design that can’t be overlooked. So where can you find free fonts online in 2020 that uphold a high standard of quality?

I firmly believe that, in order to strike the optimal balance between minimalism and visual appeal, a user interface should display no more than what’s absolutely necessary while making those necessary elements look visually appealing.

Keep it simple, but make the simple look amazing.

But, what does simple look like exactly?

Well, strip away all of the over-the-top marketing gimmicks, redundant features, and cluttering visuals, and most of what’s left is the UI copy and text content. As boring as this sounds, let’s be honest: this is the most important aspect of any app or website. Information and the ability to navigate it is the entire reason users are using our app or website.

So with the right typeface coupled with the right font styles (see “Font vs typeface: the ultimate guide”), we can create designs that are quite simple and yet visually appealing at the same time. This emphasizes the most important aspects of the design while using fewer resources and also inducing the least amount of unwanted cognitive load.

Typography can be very powerful.

But what are the best free font websites?

Where not to look for free fonts

Dribbble, Behance, Gumroad, and so on are home to a ton of hidden gems, but this involves sieving through a lot of digital resources, some of which are incomplete side ventures and “lite” versions. That being said, make sure that you bookmark awesome resources if you do happen to come across any. Even Instagram might surprise you, and Twitter shouldn’t be overlooked either.

That aside, let’s take a look as the best free font websites.

1. Google Fonts

Number one on this “best free fonts” list is obviously Google Fonts, which goes above and beyond what most free font websites offer. First of all, Google Fonts offers a fast and convenient CDN (content delivery network), making it super easy to embed webfonts into websites without having to actually host them.

Google fonts can be subsetted by script and weight, and we can also control how they’re loaded on the Web by setting the font-display CSS property from the embed code’s query string, which improves website loading times. (The CSS-Tricks article on “Google Fonts and font-display” explains how.)

Mind you, self-hosting fonts is better for privacy (because it’s cookieless) and speed (because it offers developers more control). Either way, Google Fonts has a humungous repertoire.

2. Creative Market

I know what you’re thinking: “Creative Market isn’t free, Daniel!”

Ahhh, but what about the Free Goods section? What’s interesting about Free Goods is that these are actually premium fonts that are temporarily free. While the section isn’t that huge, and isn’t guaranteed to include fonts specifically, each and every week it’s refreshed with six new design assets (plus three more if you sign up and another three if you spend X amount on assets).

I’ve been checking the Free Goods section on Creative Market every week for years, and I’ve built up a large repository of high-quality fonts that cost literally nothing. Font Bundles runs a similar deal.

3. Font Squirrel

Font Squirrel is like Unsplash but for fonts, although considering how long it’s been around (a really long time!) maybe saying that Unsplash is like Font Squirrel but for stock images is more accurate! It’s one of the veteran free font websites alongside Dafont, 1001 Free Fonts, and Urban Fonts, although “squirrel” is better.

Although many of the veteran free font websites look a little outdated, Font Squirrel has kept its website somewhat modern compared to the rest. It also has a couple of very useful tools:

Webfont Generator (converts TrueType/OpenType fonts into webfonts)

Font Identifier (for finding out the name a font from an uploaded image/screenshot)

4. FontSpace

FontSpace is one of the nicer-looking websites for free fonts, although it only offers fonts that are free for personal use, whereas Font Squirrel confirms that all of their fonts are free for commercial use too. FontSpace might not always be suitable.

5. Befonts

What sets Befonts apart is its focus on display fonts.

Although some of the fonts only offer lite/demo versions and often enough only come in TTF/OTF format (meaning they’re less suitable for the Web), Befonts is one of the very few websites that doesn’t take the “we have everything” approach (which can be overwhelming sometimes). Besides, you can always convert TTF and OTF fonts into webfonts.

6. Font Shop

Font Shop doesn’t focus completely on free fonts like Font Squirrel and FontSpace, but it’s still a rather decent alternative if options one to four didn’t have what you were looking for. I find it to be the least user-friendly of the options, but the fonts are relatively high-quality.

Honorable Mentions

The following free font websites look a little outdated, and truthfully some of the fonts do as well, but they’re arguably some of the largest databases of free fonts out there today:

Dafont

Urban Fonts

1001 Free Fonts

Fontsly

Which font format do I need?

OpenType (OTF) and TrueType (TTF) font formats have been the standard for a really long time, and they’re still used heavily in graphic design today. But that being said, WOFF formats have better compression on the Web (especially WOFF2, which is now supported in 94.49% of web browsers according to caniuse.com). In fact, the new Google Fonts embed code only offers the WOFF2 format now.

So, in short:

WOFF2 for web embeds

TTF/OTF for everything else

Which font style do I need?

Nowadays, it doesn’t really matter all that much because the norms have been thrown out the window a little bit. As an example, Serif fonts can have a modern feel now (think Medium).

Instead, we should focus more on clarity:

Legibility (how easy it is to tell characters apart)

Readability (how easy it is to read sentences as a whole)

Some of this comes down to the font itself, so one should be observant when deciding which fonts to use, but other times it comes down to how the font is styling (in terms of size, weight, and so on).

When in doubt, the WCAG 2.0/2.1 (Web Content Accessibility Guidelines) have everything you need to know about typography and its many attributes, such as line spacing, line width, line height, font sizing, and so on.

Conclusion

Fonts are super useful, and they’re often all that’s needed to achieve the right amount of visual and emotional appeal without laying on more and more visual clutter. Your design needs text anyway, so why not make it the most outstanding aspect of it?

[guruji]

Web accessibility for screen magnifier users

The needs of screen magnifier users are overlooked when implementing web accessibility on to a website. Screen magnifiers are used by partially sighted web users to increase the size of on-screen elements. Some users will magnify the screen so that only three to four words are able to appear on the screen at any one time. 

The good news is that some of the basic principles for improving accessibility and usability for screen magnifiers users, also increase usability for everyone. To help, we've listed six ways to improve accessibility and usability for screen magnifier users:

1. Don't embed text within images

Text embedded within images can become blurry and pixelated when viewed in screen magnifiers, and therefore completely illegible. This is especially true when the image text is rather poor quality, so if you absolutely have to embed text within images then make sure the image is of high quality. Many screen magnifier users can find it quite difficult to read text at the best of times, so when it appears fuzzy to them it can become difficult to impossible to read.

It's not usually necessary to embed text within images anymore, as most presentational effects can now be achieved with CSS. By embedding text within images the download time of each page can become significantly greater due to the weight of these images - for users on dial-up modems it can be a real pain waiting for these images to download and render.

If you're not sure if a piece of text on the page is embedded within an image or not, try highlighting the text. If you can highlight each letter individually then the text is real text and isn't embedded within an image.

2. Clearly separate sections of the page

Different sections of each web page should be clearly separated through the use of borders and different background colours. Screen magnifiers users can only see one tiny section of a web page at any one time so it can sometimes be hard for these users to orientate themselves within the page.

By using a blue background colour for the navigation, for example, screen magnifier users can quickly move through the page and when they see a blue background they instantly know that the content are has finished and the navigation area begun.

Likewise, by separating different sections of the page with borders, when a screen magnifier user moves over that border they know they're moving into a different section. One especially common form of this, is using a vertical bar to separate horizontal navigation items.

Separating different sections of the page with background colours and borders doesn't only increase usability for screen magnifier users - it increases usability for everyone. When regularly sighted users scan through a web page, if the content, footer and navigation are all effectively differentiated it's very easy to quickly gain an understanding of the on-page layout.

3. Use clear and descriptive headings often

When screen magnifier users move their magnifier across the screen one of the items that stand out to them is headings. By ensuring heading text is large, and perhaps by differentiating it through the use of colour, it will stand out to these users.

Screen magnifier users usually have to stop the movement of the magnifier when they want to read a piece of text, so when they see a heading, they can stop and read it. Because headings (in theory at least!) describe the content contained beneath them, screen magnifier users can read a heading, gain an understanding of the content beneath it, and decide whether they want to read that content or not. If not, they can simply move the magnifier down the screen and stop at the next heading.

Headings are incredibly useful for fully sighted users too for essentially the same reason. When you scan through a web page, headings are one of the items that stand out to you. Again, you can read the heading (or listen to it for a screen reader user), and provided its descriptive, instantly gain an understanding of the content beneath it. You can then keep reading or skip on to the next heading down the page.

4. Ensure link text is descriptive of its destination

Link text such as ‘click here' and ‘more' should be avoided and replaced with link text that adequately describes the link destination. Link text, along with headings, is one of the items that stands out to screen magnifier users (and all users for that matter) when browsing a web page. If ‘click here' is used then these users (and in fact all users) will have to search through the text before and after the link in order to work out its destination.

5. Avoid scrolling or flashing text

Scrolling or flashing text is generally known for offering poor usability, as it means that users can't read the text in their own time. This is doubly true for screen magnifier users who read web pages at a slower rate - chances are that they won't have time to read the text at all before it disappears.

6. Front-load paragraph content

By front-loading paragraph content, screen magnifier users can access the main point of each paragraph immediately. Front-loading means placing the conclusion first, followed by the what, why, when, where and how. By placing the conclusion first, screen magnifier users can read the conclusion of the paragraph straightaway and then decide whether they are interested in reading the rest of the paragraph or not.

If screen magnifier users aren't interested in the content of a paragraph, they can move the magnifier down the screen and when they see white space they know that the paragraph has ended and the next paragraph begun.

This rule about front-loading paragraph content actually benefits absolutely everyone. By putting the conclusion at the start of the paragraph, all users can instantly gain an understanding of the point of the paragraph and decide whether they want to keep reading it (or skip to the next paragraph).

Conclusion

All-in-all, there are quite a few things that can be done to improve usability and accessibility for screen magnifier users. The good news though is that all of them improve usability for absolutely everyone.

Thanks and regards, Guruji Softwares

[blogandtricks]

How To Start a Blog and make money

Learn how you can start a blog today. What is good than following your passion and make money. People start blogging for reasons, like this:

Making money

Sharing the new learnings

Free travel

Review gadgets

Free travel

Etc.. I think your one of the above or some other reasons, blogging could help you achieve your goal. A few things: This is the total guide with some theory and practical knowledge. A little bit of reading, and a little bit to follow the step to start your blog. This is the first thing you would like before we start:

The name of your domain.

Note: you'll always change your name within the future if you want. Ready to start a blog. Here are the steps to start a blog:

Step 1: Picking the blog topic Step 2: Select the blogging platform Step 3: Pick select domain name & hosting for your blog Step 4: Setup the design of the blog Step 5: Write your first blog post Step 6: Share your writeup with the world Step 7: Monetize your blog Step 8: Drive traffic and gain more exposure

Note: To make it easier for you to take action, I’m suggesting only those options in terms of platform, hosting which are working for everyone.

How to start a blog free

Step 1: Choose a Blog name & domain name for your blog

             1. Easy to remember              2.Easy to pronounce.              3.Easy to type Just remember this 3-factor when you picking a domain name for your blog. The name of your blog is that the most important part of success. A domain name is the URL of a blog that a visitor will use to open a blog. For example; www.blogandtricks.in A custom domain name is like www.blogandtricks.in, for which we need to pay $9/year = ₹599/year. However, I have shared a trick above which will help you save this $9/year = ₹599/year on domain purchase. Now, there are rules which will help you to pick the best name for your new blog. Prefer your suitable domain as my suggestion you have to select .com, .in, .org. Your domain name should be easy to pronounce and simple to type. Make sure your domain name should not be confusing to the listener. You can use the Namechk.com for domain suggestion to check if your domain name is available or not. Simply enter any word that you simply have picked for your blog and it'll also show you available domain name suggestions. My suggestion is to follow the 3 rules I shared below. Here are these things you should not do when selecting the domain name for your new blog:

Don’t use a too long domain name. Try to keep it lower than 14 characters. Ex: blogandtricks

I always prefer and suggest to use a domain name extension like .com, .in or .org.

The first answer you must have is, where must you create your blog?

There are many blogging platforms is there, and people have different opinions about each and every blog of them.

Most of the Bloggers start blogging on the Wordpress platform or Blogger platform.

Blogger is popular because it’s easy to use and Wordpress also.

Here is an interesting fact: 35% of the websites in the world are powered by WordPress.

Once complete crossed the testing period, you're ready for doing something more meaningful. Get a blogger blog or WordPress blog, and don’t confuse yourself with WordPress.com and Blogspot.com.

Blogger Hosted by Google so no installation issues. WordPress.com may be a freemium blog service that mixes the free WordPress blogging platform and premium hosting in one package.

How to start a blog in india

Free = $0 for life

Includes a WordPress.com subdomain, basic design customization, and 3GB Storage to get you started.

Personal = $2.99 per month, $36 billed yearly

Includes a free custom domain name, 6GB Storage, and removes all WordPress.com advertising.

Premium = $8.25 per month, $99 billed yearly

Includes advanced design tools, CSS editing, 13GB Storage for audio and video, plus the choice to monetize your site with ads.

Business = $24.92 per month, $299 billed yearly

Includes SEO Tools, Google Analytics support, Unlimited Storage, plus the option to install third-party themes and plugins, and remove the WordPress.com branding.

Step 3: What your blog is Niche? (About) The very very first thing you wish to try to do is to find the niche of your blog. By niche, I mean finding a topic that your blog goes to be about Or search on google blog niche ideas. I hope you don’t plane about your blog about every random thing and make money. This doesn’t work in 2020 and your chances of success are better when you blog on a single topic. You might be a jack of all trades, and need to start out a blog on multiple topics, but it'll not be fruitful, as people like this topic and subscribe a blog, which is an authority on a selected topic. Moreover, Google which is that the biggest search engine prefers a web site that's built on one single topic. For example, Blogandtricks topic is “blogging and tricks” related which is how you found us. Now, the big question is how to find the topic of your blog? Here are some tips which will help to get started:  Find a topic that you just know better than anyone else. It doesn’t have to be the job you are doing, and it could be anything. Try to think about your topic that you simply most prefer to talk about, and you'll comfortably talk about it for hours. The good idea is to select a topic that you simply usually know about that. The topic which you read about all the time is some things that interest you. Also, confirm you've got a keen interest during a particular topic, and you'll add values together with your own insight. For newbies, I always recommend to require the help of pen-paper and write down the topics in several columns that you simply like. For example:- Motivation, Fashion, Technology, Finance, Photography, Scientific research, Babycare, health care and so on. Now, try and write 5 post ideas for those different columns. When you are writing the post title, think about what you'll write without taking reference. By the end of the 5th article, it will help you to find the topic (Niche) that you like the most. This is a critical step before starting a blog because it will help you to choose a new topic that you simply are most strongly passionate about that topic. This will make sure that you'll not give out when your blog goes live. If you're picking a topic that you simply like talk about and write on, it'll make sure that your give out period will never come. So, I assume you've got selected the niche for your blog which may make some money for you. Conclusion- Selecting the suitable niche is that the first and therefore the important step for starting a brand new blog.

Design of your blog Blogging platform? *Done* Blog niche? *Done* Domain name? *Done* “The first impression is that the last impression”, that’s the Lines we follow for our blog. Blog design is that the important aspect of your blog because a decent design will make sure that your visitors will love your blog. In fact, that's how your readers will remember your blog. Imagine your blog design as you with some good outfit. In Blogger, there is a concept called “Blogger templates”(themes). These are ready-made designs that are available for every type of blogs. There are many Free and premium Blogger templates(themes) out there. I always recommend to use that kind of theme suitable to your blog and makeover, you will have a quality design for your blog. Here I am given you some link of blogger templets(themes) to use templets which I would recommend you to start with this templets. You need to download templets(themes), and skin to make it suitable for you. You can pick from the ready-made template and your blog design will be ready within several minutes. Read: How to upload templets in blogger

How to plan your blog content

Plan your content

Before you start writing your first blog post in your blogger, you should make a content plan. You can use a Trello board. This is a free Trello content planning board that you simply could use. Content planning board This Trello board also comes with a checklist help you write the proper article. Click on more on the right sidebar and click on the copy board. In the article ideas, write down all your content that you simply could write down . You can also create an outline of the content if you like. It’s a good idea to do this in one sitting and next time you can start writing your content (one at a time).

How to start a blog writing

The real fun begins now, writing your first post. I shall share some tips the articles link below to get you started, but here are little tips which can make sure you don’t make mistakes new bloggers usually make: When you are writing your content, imagine there's a person sitting next to you, and you're talking to the person. Write within the first-person tone, because there's one that is reading your blog. as an example, you're reading this blog post alone. that's why you may notice, my tone is “I” and “You”. Your content should cover all the aspects of the topic you're writing about. be happy to write down 1200+ words. Do not copy images from Google or the other sources. Rather use these sites to download free to use images. You can also embed videos from YouTube. this can be a tutorial on how to embed videos on your blog. If you wanna skip the overall crowd and level up your blogging game, then read my guide SEO copywriting. this may ensure whatever you'll write will assist you to drive great traffic from search engines. These are some of the important pages, which you should have on your blog. About page: Contains detail about your blog, and you. Contact page: A page with a contact form. You can use free contact form 7 or Jetpack contact form feature to create a contact form on WordPress. Media kit page: You don’t need it now, but you should know about it. This page is where you will write about your blog traffic and available advertising options.

Now, the next step is to driving traffic. Follow the steps mentioned here and that will help your blog to be visible in Google search. Now, there are many techniques that you can use to get traffic to your newly created blog. Getting social Once you've got established your blog, make your blog social so your readers can join your community. You just no need to stress, because I’m here to guide you with the resources. To get social with your blog, Create this account Facebook page, Instagram account, a Twitter account. Now, Make money from blogging in easy steps:-

Make money blogging There are some ways by which your blog can earn passive income for you.

How to start a blog and make money

Here are some of the most popular ways: Google AdSense Media.net info links Affiliate marketing Amazon affiliate program Direct ad sales Own digital products like eBooks, Online course I am covering all these aspects of blogging money in this exclusive article: Make money from blogger What Else you need to reach the next level of Blogging:

Learn SEO to drive free traffic SEO means search engine optimization. This is an advanced topic and it’s hard to complete it in a single article. Many bloggers try not to concentrate on search engine optimization, and This is a big mistake. SEO helps you to drive targeted traffic from organic search, which successively makes extra money for you. There are three parts of SEO(search engine optimization): On-page SEO: Your content quality, Keyword placement, etc. On-Site SEO: Crawling, indexing of your website. Off-Site SEO: Get do-follow backlinks from other sites. Evolution of SEO, I also like to add two more here: Social signals: Social media plays a good role in improving your blog ranking. Google plus is proven to be the most effective social networking site to boost ranking. User experience: New search engine optimization is all about giving a good user experience. Some of the key aspects of good user experience: Navigation, site loading, website design, readability so on. If you've got done everything as mentioned above, you'll start getting organic and traffic from social media sites. Now, here I’m sharing a number of the chosen posts to assist you drive more traffic to your website. One difference between the normal blog and a good blog is the detailing. An A-list blogger usually takes of every small detail about to ensure that users subscribe to his blog, they like to be a part of this blog. This can be what we call turning one time visitors into readers. below some of the advance and less talked techniques.this techniques to take your blog to the new level:- Get more blog readers and keep them No one is read your blog and how can make them read In the world of blogging, we always wish that there was someone who can guide to how to start a blog of your own.

[secondchances]

i’ve cooked up a bit of code that allows you to view an embeded google doc via tumblr page. 

pros

the ease of formatting google docs--meaning no html or css code knowledge needed.

updates can be set to push automatically. takes up to 5 minutes for changes to be amended to published document

does not redirect activity away from tumblr on mobile, as the google doc is simply embedded into a custom tumblr page

cons

document loses some formatting. for some reason, things like centered text don’t transfer with the document

there’s gonna be either a nasty ugly scroll bar when viewed on a regular web browser but the document will be centered, or the google doc will be off-center, but no scrollbars are visible. nothing more than a cosmetic issue, really, as both view fine on mobile.

i fought with this a lot, and maybe someone other than me can fix it, but from what i’m looking at, because of how iframe works, i don’t think this is something that can be fixed. it’s just how embedding things works

i’ve set up example pages-- one for the CENTERED DOC and one for the HIDDEN SCROLLBAR DOC. the code and steps for install are below

CODE: found here on pastebin

CODE DIRECTIONS

go to your blog’s edit theme page where you can create a tumblr page

create a new page

switch page layout to “custom layout” to enable html. select “show link to this page” and give it a name. then give the page an html name (ie when you visit you’d go to page urlhere.tumblr.com/rules or something)

paste code

decide whether you want the google doc centered or a hidden scrollbar. hidden scrollbar is default. follow directions in comments for where to comment/uncomment for centered version of code.

open the google doc you wish to embed

go to file > publish to web. the settings are automatically enabled for the doc to publish again whenever changes have been made. 

in the box that appears, select “embed,” then hit publish. a block of code beginning with <iframe should appear. you only need the link. you need the embedded version of the link specifically to put within the code, as it is slightly different from the web published version

return to the tumblr code page

at the bottom of the code, is src=“ and then a link. paste the embeded link within the quotes

preview page

save page

[friendlydesign-blog1]

4 Tips for Optimize Your Blog for Mobile Friendly

Here’s a riddle for you: what do a restaurant, park, bus, and a dining table have in common? If you guessed, “Everyone sitting around / standing on / walking through them is watching a smartphone,” ding ding ding! I’ll leave aside my musings on what this suggests for our society as an entire, and stick more to the essential idea here that this is often proof that mobile usage is constant to skyrocket.

In fact, over half the whole earth’s population features a smartphone, with half those users turning to their phones as their primary access route to the web. meaning that if you run a blog — especially one that comes with an attached store — it’s likely that the majority of your readers are consuming your work on a smartphone.

A clunker of an internet site that doesn’t scale for mobile also causes you to look out of touch, and thus perhaps not the foremost authoritative blogger to consume.

Altogether, these bring quite a couple of excellent reasons to form your site mobile friendly. Let’s take a glance at 5 tips for optimizing your blog for mobile to urge started.

1. Streamline your site

First things first: if your site is an unwieldy tangle of giant graphics and “click here!” buttons, your visitors are sure to get ticked off. Big photos often won’t load on small screens (or they’ll take forever in doing so, and you've got about 3 seconds max to stay a visitor’s attention), and, um, have you ever ever tried to click a small button with massive thumbs?

Here’s what to seem out for:

Long Posts: If you’re getting to do them, break them up with bolded headers and provides yourself many paragraph breaks. The rule of thumb is: if it’s easily skimmed, it can stay. If not, keep breaking things up. Flash and Java: iPhones don’t support Flash and lots of other phones don’t support Java, so avoid them both.

File Sizes: As we mentioned above, graphics that are too big are an excessive amount of a risk, so confirm to stay your file sizes small. Number of Pages: Unlike on desktops, the bulk of on-screen navigation on smartphones and tablets happens via scrolling. that creates a one-page website ideal for the mobile platform, as users can simply scroll right down to find what they have.

2. Make it responsive

If you haven’t heard of responsive design, you’ve definitely interacted with responsive websites. A responsive website is one that — you bought it — responds differently supported the type of device wont to access the location. On a smartphone? the location automatically shrinks right down to fit a smartphone screen, so you won’t need to scroll horizontally also as up and down. On a tablet? A laptop? Same thing. Responsive design means automatic customization to suit each user, which is pretty nifty.

If your blog is hosted on WordPress, getting it to be responsive is pretty simple: from your admin panel, just enter the shop and choose a responsive theme that suits your style. Voila! You’re ready for mobile. Most other blog sites also will have responsive templates, but choices seem to be a touch more limited.

If you probably did your own web design or hired it out onto a special platform, responsive design is often a touch more tricky to implement, as you’ll either got to do an entire redesign or make some serious tweaks to your HTML and CSS. therein case, it's going to make more sense to style a separate mobile site to which users on mobile platforms are going to be automatically redirected, or to a minimum of doing that temporarily while you’re building your responsive site.

The other nice thing about having a separate mobile site is that you simply can maintain a non-mobile site that permits you to try whatever you would like, flash video included. However, I personally think this is often a null point, because the trend in UI design is purposely towards minimalism, and it’s not an honest idea to consider your main site as an area where you've got free reign to urge overly complicated.

3. Integrate Instagram

Photos are essential for drawing in and maintaining the eye of your visitors (especially in longer blog posts), but legit photos accompany hefty licenses and, as I discussed above if they’re too big or within the wrong format they’re not bound to actually load on a mobile platform. But none of that matters if they’ve already been formatted to figure on mobile devices via a 3rd party site like Instagram.

With the assistance of a variety of various Instagram widgets, you'll easily stream your Instagram photos right into your blog posts (again, it’s extra-easy on WordPress). Alternatively, all public Instagram photos accompany an embed code lately, so it’s easy to identify a photograph you wish on a friend’s feed and post it to your blog while still giving credit where credit is due.

4. Keep it secure

As the recent Heartbleed episode has proven, security may be a huge problem on the web generally, but it’s all the more so within the Wild West of mobile devices. A recent report from the mobile security company, Lookout, entitled “Mobile Threats, Made to live,” cites adware, charger, and malware because of the greatest risks to mobile users, especially those in countries where regulations are sparse. you'll keep your own site from getting hacked and help to safeguard your mobile visitors by taking the subsequent steps:

Stay Up so far. Has your platform notified you of an update? Great. Do it, now. Oftentimes updates contain patches for security flaws. Change Your Username and Password. Especially if your username is “admin” and your password is “12345.” It’s also an honest idea to vary your password on a daily basis. Be Wary of Photos. they will hide malicious code. That’s why the Instagram trick mentioned above may be a far better idea, as is purchasing photos through a good stock photo site.

Stick With Widgets. Applications are often crammed with junk, so when you’re looking to offer your site a touch more functionality or wow factor, persist with the widgets already vetted by your blog platform.